资讯专栏INFORMATION COLUMN

JavaScript事件委托原理

lscho / 1657人阅读

摘要:概念事件委托,通俗来说就是将元素的事件委托给它的父级或者更外级元素处理。级事件规定的事件流包括三个阶段事件捕获目标阶段事件冒泡原理事件委托就是利用事件冒泡机制实现的。最适合采用事件委托技术的事件包括和。

概念

事件委托,通俗来说就是将元素的事件委托给它的父级或者更外级元素处理。

事件流
事件流描述的是从页面中接收事件的顺序。

事件冒泡:事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(或文档)。

事件捕获:事件开始由不太具体的节点接收,然后逐级向下传播到最具体的节点。它与事件冒泡是个相反的过程。

DOM2级事件规定的事件流包括三个阶段:

事件捕获

目标阶段

事件冒泡

原理
事件委托就是利用事件冒泡机制实现的。

假设有一个列表,要求点击列表项弹出对应字段。

不使用事件委托

var myLink = document.getElementById("myLink");
var li = myLink.getElementsByTagName("li");

for(var i = 0; i < li.length; i++) {
  li[i].onclick = function(e) {
    var e = event || window.event;
    var target = e.target || e.srcElement;
    alert(e.target.id + ":" + e.target.innerText);  
  };
}

这样做存在的问题:

给每个列表项都绑定事件,消耗内存

当有动态添加的元素时,需要重新给元素绑定事件

使用事件委托

var myLink = document.getElementById("myLink");

myLink.onclick = function(e) {
  var e = event || window.event;
  var target = e.target || e.srcElement;
  if(e.target.nodeName.toLowerCase() == "li") {
    alert(e.target.id + ":" + e.target.innerText);
  }
};

上述代码是将事件委托给列表项的父级,通过 target 下的 nodeName 属性作出判断。

也可以给每个列表项绑定与其对应的事件。如:

var myLink = document.getElementById("myLink");

myLink.onclick = function(e) {
  var e = event || window.event;
  var target = e.target || e.srcElement;
  switch(target.id) {
    case "1":
      target.style.backgroundColor = "red";
      break;
    case "2":
      alert("这是第二项");
      break;
    case "3":
      alert(e.target.id + ":" + e.target.innerText);
      break;
    default:
      alert("...");
  }
};

上述代码是通过判断 target 下的 id 属性,执行不同的事件。

事件委托的优点:

只需要将同类元素的事件委托给父级或者更外级的元素,不需要给所有元素都绑定事件,减少内存空间占用,提升性能

动态新增的元素无需重新绑定事件

需要注意的地方:

事件委托的实现依靠事件冒泡,因此不支持事件冒泡的事件就不适合用事件委托。

最适合采用事件委托技术的事件包括 clickmousedownmouseupkeydownkeyupkeypress。虽然 mouseovermouseout 事件也冒泡,但要适当处理它们并不容易,而且经常需要计算元素的位置。(因为当鼠标从一个元素移到其子节点时,或者当鼠标移出该元素时,都会触发 mouseout 事件。)

不是所有的事件绑定都适合使用事件委托,不恰当使用反而可能会导致不需要绑定事件的元素也被绑定上了事件。

Jquery中的事件委托

jquery中实现事件委托的几种方法:

on

on(events, [selector], [data], fn)
// 将 li 的事件委托给它的父元素
$("#myLink").on("click", "li", function() {
    // todo...
});

live

该方法在 jquery 1.7 版本已被废弃。

delegate

delegate(selector, [type], [data], fn)
$("#myLink").delegate("li", "click", function() {
    // todo...
});

该方法在 jquery 3.0 版本已被废弃。用 on() 代替。

jquery 中, delegate()live()one()bind()等最终都是依赖 on() 方法实现的。因此可以直接使用 on() 替代其他方法。

封装一个事件委托方法

需要注意的地方:

保证兼容性,包括:事件绑定、元素选择器 Element.matches 、事件 event 对象

回调函数 this 指向

上面的示例中,当目标元素下还有子元素时,子元素不能触发事件。解决办法是在触发过程中对元素进行判断,如果当前触发的元素不是目标元素,就继续往该元素的 parentNode 查找,否则循环结束。

/**
 * [delegateEvent description]
 * @param  {[type]}   parentSelector 父元素
 * @param  {[type]}   targetSelector 目标元素
 * @param  {[type]}   events         事件
 * @param  {Function} fn             回调函数
 * @return {[type]}                  null
 */
function delegateEvent(parentSelector, targetSelector, events, fn) {
            
  // 事件绑定兼容性处理
  function addEvent(ele, type, handle) {
    if(ele.addEventListener) {
      ele.addEventListener(type, handle, false);
    } else if(ele.attachEvent){
      ele.attachEvent("on" + type, handle);
    } else {
      ele["on" + type] = handle;
    }
  }

  // 如果元素被指定的选择器字符串选择,Element.matches()  方法返回 true; 否则返回 false。
  // 对于不支持 Element.matches() 或 Element.matchesSelector(),但支持 document.querySelectorAll() 方法的浏览器,存在以下替代方案
  if (!Element.prototype.matches) {
    Element.prototype.matches = 
    Element.prototype.matchesSelector || 
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector || 
    Element.prototype.webkitMatchesSelector ||
    function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1;            
      };
    }

    // 事件处理逻辑
    addEvent(parentSelector, events, function(e) {
              
      // 兼容性处理
      var e = e || window.event;
      var t = e.target || e.srcElement;
      
      // currentTarget === parentSelector           
      var currentTarget = e.currentTarget;

      // 遍历并判断是否为目标元素,如果不是,则往元素的 parentNode 继续查找
      while(!t.matches(targetSelector)) {
        // 如果是目标元素则跳出循环
        if(t === currentTarget) {
          t = null;
          break;
        }
        t = t.parentNode;
      }

      if(t) {
        // 将回调函数的 this 指向目标元素
        fn.call(t, Array.prototype.slice.call(arguments));
      }
    });

}

调用示例:

var myLink = document.querySelector("#myLink");

delegateEvent(myLink, "li.link", "click", function() {
  console.log(this, this.id + ":" + this.innerText);
});

原文地址:https://github.com/daijingfeng/blog/issues/1

参考资料:

1、《JavaScript高级程序设计(第3版)》

2、Element.matches() API https://developer.mozilla.org...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90226.html

相关文章

  • 好文推荐:javascript: 事件委托解析

    摘要:前言之前不太明白事件委托。看了这个帖子,跟着代码操作了一遍,终于明白了事件委托。推荐理由一步一步,渐进式分析来说明事件委托。为签收快递,有两种办法一是三个人在公司门口等快递二是委托给前台代为签收。 前言:之前不太明白事件委托。 看了这个帖子,跟着代码操作了一遍,终于明白了事件委托。所以转载。 推荐理由:一步一步,渐进式分析来说明事件委托。 什么叫事件委托呢?它还有一个名字叫事件代理 ...

    Wuv1Up 评论0 收藏0
  • 我所理解的JavaScript 事件委托

    摘要:当初学时,学到委托概念的时候,有点不知所措,在工作后运用了很多后才发现真的好用。事件的冒泡,所以才可以在父元素来监听子元素触发的事件。事件的冒泡这个要讲一下,在的时候我们可以设置事件模型事件冒泡事件捕获,一般来说都是用事件冒泡的模型。 当初学C#时,学到委托概念的时候,有点不知所措,在工作后运用了很多后才发现真的好用。在JavaScript里面也有事件委托的概念,那在JavaScrip...

    vvpvvp 评论0 收藏0
  • 我所理解的JavaScript 事件委托

    摘要:当初学时,学到委托概念的时候,有点不知所措,在工作后运用了很多后才发现真的好用。事件的冒泡,所以才可以在父元素来监听子元素触发的事件。事件的冒泡这个要讲一下,在的时候我们可以设置事件模型事件冒泡事件捕获,一般来说都是用事件冒泡的模型。 当初学C#时,学到委托概念的时候,有点不知所措,在工作后运用了很多后才发现真的好用。在JavaScript里面也有事件委托的概念,那在JavaScrip...

    wushuiyong 评论0 收藏0
  • 简单说 JavaScript中的事件委托(上)

    摘要:说明这篇文章说中的事件委托,这次先说一些比较基本的知识。第一段绑定了两次事件,第二段绑定了一次事件也就是说,原来在上绑定的事件,现在委托在了父元素上,而在上只需要绑定一次就可以了。我们用事件委托的方式,再来改改。 说明 这篇文章说JavaScript中的事件委托,这次先说一些比较基本的知识。 事件委托 是什么 先来看看事件委托的概念 事件委托就是利用事件冒泡,只指定一个事件处理程序,就...

    yankeys 评论0 收藏0
  • 简单说 JavaScript中的事件委托(上)

    摘要:说明这篇文章说中的事件委托,这次先说一些比较基本的知识。第一段绑定了两次事件,第二段绑定了一次事件也就是说,原来在上绑定的事件,现在委托在了父元素上,而在上只需要绑定一次就可以了。我们用事件委托的方式,再来改改。 说明 这篇文章说JavaScript中的事件委托,这次先说一些比较基本的知识。 事件委托 是什么 先来看看事件委托的概念 事件委托就是利用事件冒泡,只指定一个事件处理程序,就...

    fireflow 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<