• 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”就是为了找到了对应的城市属性名,然后再对该项进行删除操作。

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

     
       
  • 相关阅读:
    如何禁止复制网页内容?(javascript)
    CSS实现的div仿制Textarea效果
    C/S WinForm自定义控件实现B/S菜单样式
    ER/Studio 数据库建模
    设为首页JS,加入收藏夹js,加入收藏夹代码,设为首页代码,火狐和ie兼容
    entity framework进行一对多的联合查询
    增加asp.net应用程序性能的19种方法
    MVC Models定义验证属性
    [导入]linq与xml
    Entity Framework 批量删除
  • 原文地址:https://www.cnblogs.com/spezz07/p/5575775.html
Copyright © 2020-2023  润新知