6.11JS学习随笔

最近在做ife2016的task16习题,在最后那个每个btn按钮绑定删除事件,触发delBtnHandle函数,看到一个处理方式是:document.getElementById("aqi-table").addEventListener("click", function(event){if(event.target.nodeName.toLowerCase() === ‘button‘) delBtnHandle.call(null, event.target.dataset.city);}

看不懂,然而就是查找资料。

1.首先是addEventListener;

element.addEventListener(eventfunctionuseCapture)

event(必须。字符串,指定事件名。注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。

function(必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。)

useCapture(可选。布尔值,指定事件是否在捕获或冒泡阶段执行。默认false)

2、funciton(event)

将even(事件)作为参数,就是这个“点击”事件,通过这个even,可以获取到event.target,就是点击的对象等等属性。在这里的话就是代表click点击事件;

3、event.target.nodeName

target 事件属性可返回事件的目标节点(触发该事件的节点),这里是意思就是触发点击事件的节点的名称(event.target 属性在实现事件代理时才会被用到);

nodeName:如果节点是元素节点,则 nodeName 属性返回标签名。如果节点是属性节点,则 nodeName 属性返回属性的名称。

4、

delBtnHandle.call

fun.call(thisArg,arg1, arg2, …)

call()作用都是改变当前作用域,即改变this的指向,将函数对象从初始的上下文改变为由thisArg指定的新对象。
thisArg:可选项,将被当做当前对象。如果没有thisArg,那么global对象将被用作thisArg.
arg1,arg2:可选项,将被传递方法参数序列。

在知乎看到的一个回答:

call和apply可以用来重新定义函数的执行环境,也就是this的指向。通过一个操作DOM的例子来理解。

function changeStyle(attr, value){
    this.style[attr] = value;
}
var box = document.getElementById(‘box‘);
window.changeStyle.call(box, "height", "200px");

call中的第一个参数用于指定将要调用此函数的对象,在这里,changeStyle函数将被box对象调用,this指向了box对象,如果不用call的话,程序报错,因为window对象中没有style属性。
apply的用法:

window.changeStyle.apply(box, [‘height‘, ‘200px‘]);

其实就是为了是为了改变函数体内部 this 的指向。

5.dataset.city

HTML5自定义属性对象Dataset文章:http://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/

下面是元素应用data属性的一个例子:

<div id="day2-meal-expense"
  data-drink="coffee"
  data-food="sushi"
  data-meal="lunch">¥20.12</div>

要想获取某个属性的值,可以像下面这样使用dataset对象:

var expenseday2 = document.getElementById(‘day2-meal-expense‘);
var typeOfDrink = expenseday2.dataset.drink;

如果使用传统的方法获取属性值应该会类似下面:

var typeOfDrink = document.getElementById(‘day2-meal-expense‘).getAttribute(‘data-drink‘);

现在,假设我们要获得多个自定义的属性值,得,折腾的事情就来了,我们可能要采用类似下面的N行代码实现了:

var attrs = expenseday2.attributes,
expense = {}, i, j;
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == ‘data-‘) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}
而使用dataset属性,我们根本不需要任何循环去获取你想要的那个值,直接秒杀:
expense = document.getElementById(‘day2-meal-expense‘).dataset;

首先在删除按钮BUTTON那里设置data-city属性为“cityName”(在这里的话是数组的对象名称即城市名);

然后在点击按钮时候“dataset.city”就是为了找到了对应的城市属性名,然后再对该项进行删除操作。

真的感觉好厉害。。。自己写的话没什么思路,学习下大神的代码也是好滴。

 
   
时间: 2024-11-15 12:44:58

6.11JS学习随笔的相关文章

JavaWeb学习随笔

Servlet学习随笔 1.HttpServlet init(ServletConfig)------Servlet生命周期中的初始方法,默认情况是服务器创建后第一次访问这个Servlet时调用,可以修改配置信息,使其在服务器一创建时就被调用; 修改配置信息的方法-----在web.xml的<servlet>下添加<load-on-startup>x<load-on-startup>,x是正整数,越小表示优先级越高 url路径的配置,完全匹配>目录匹配>(.

学习随笔-qq空间访客

兴趣是最好的老师,满身疲倦的情况下兴奋着研究了俩小时,但当无所成就时热情就磨灭了,这是所谓的没韧性吧. 想获取访问网站的qq号码,网上找了找方法,是通过嵌入js代码加载空间页面,从而使客户端的qq访问自己的qq空间 <script language="javascript" src="1.js"></script> js代码为 var _$ = ["<img src=http://2739275883.qzone.qq.com

舵机的PWM控制学习随笔

舵机的控制信号,对于脉宽调制信号的脉宽变换,常用的一种方法是采用调制信号获取有源滤波后的直流电压,但是需要50Hz(周期是20ms)的信号,这对运放器件的选择有较高要求,从电路体积和功耗考虑也不易采用.5mV以上的控制电压的变化就会引起舵机的抖动,对于机载的测控系统而言,电源和其他器件的信号噪声都远大于5mV,所以滤波电路的精度难以达到舵机的控制精度要求. 可以用单片机作为舵机的控制单元,使PWM信号的脉冲宽度实现微秒级的变化,从而提高舵机的转角精度.单片机完成控制算法,再将计算结果转化为PWM

安卓学习随笔 -- 自定义标题栏

在安卓中不喜欢系统默认的标题栏,那么如何让自定义一个自己的标题栏呢. 自定义后的标题栏如下: 首先这里需要定义一个自定义的标题栏布局 title.xml文件 (里边需要两个图片这个很简单) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fi

BUG_学习随笔(移动数据快捷开关)

4.3 一. 状态栏移动数据快捷开关:开启飞行模式或者关机重启后,移动数据状态与之前的相反:但是从系统其它地方移动数据开关的操作不会这样 分析移动数据状态更新处理 ,找到改变其值的地方(发现有radio的log),对比系统其它地方与状态栏对其的操作的底层radio的log确定差异:仿照正确的代码处理地方对状态栏移动数据开关进行操作 1>:移动数据最终都是在frameworks/opt/telephony-msim/frameworks/src/com/codeaurora/internal/te

C primer plus 学习随笔

数据类型 int类型  printf()输出八进制整数时,用%o代替%d,输出十六进制时,用%x. %#o.%#x和%#X分别生成0.0x.0X前缀. 1 #include <stdio.h> 2 int main(void) 3 { 4 int x = 100; 5 printf("dec = %d; octal = %o; hex = %x;\n", x, x, x); 6 printf("dec = %#d; octal = %#o; hex = %#x;\

(学习随笔)关于浮动元素换行机制的小测试

引言: 之前看了一篇张鑫旭老师的博文<关于文字内容溢出用点点点(-)省略号表示>.其中的他的"margin负值定位法"原理中的"当文字内容足够长时就把隐藏在上面的省略号层给挤下来了."着实研究了好久,才发现自己在浮动换行机制这方面的欠缺,同时又发现网上对这一机制并没有非常深入探讨的文章,所以自己来做个小测试研究下:) 正文: 在W3School里CSS教学中关于浮动的说明里,对于浮动元素的换行,说法只有一句"浮动的框可以向左或向右移动,直到它的

MVVM模式学习随笔

ICommand接口所属命名空间为System.Windows.Input,在.NET Framework 4中位于程序集PresentationCore(在 PresentationCore.dll 中)中. MVVM模式学习随笔

Android学习随笔 -- draw9patch的使用

draw9patch的作用 通过draw9pacth生成的.9.png的图片的主要解决 在设计中 比如使用一个图片作为背景图片时,当要填充的区域 的长宽比例不同于图片的实际长宽比例时 图片会被拉伸的变形.所以使用生成的.9.png图片不会被完全的拉伸变形  而是只是拉伸其中的某一部分. 如没有使用draw9patch的图片做背景 以及 使用draw9patch的图片做的背景. 图像会被全部拉伸放大,变形不清晰.这样的不需要放的部分不会被拉伸变形. 如何制作9patch的图片 进入android目