javaScript进阶-事件委派

简介: 这篇文章的原稿来自于 http://www.aqee.net/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/ 对其中的事件委派做一些自己的理解: 当页面上某个元素上的事件触发时,而在 DOM 继承关系上,这个元素的所有子元素也能接收到这个事件,这时你可以使用一个在父元素上的事件处理器来处理,而不是使用一堆的各个子元素上的事件监听器来处理。

这篇文章的原稿来自于 http://www.aqee.net/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/


对其中的事件委派做一些自己的理解:

当页面上某个元素上的事件触发时,而在 DOM 继承关系上,这个元素的所有子元素也能接收到这个事件,这时你可以使用一个在父元素上的事件处理器来处理,而不是使用一堆的各个子元素上的事件监听器来处理。

hrml代码如下

 1  <h2>
2 Great Web resources</h2>
3 <ul id="resources">
4 <li><a href="http://www.zhihu.com">Opera Web Standards Curriculum</a></li>
5 <li><a href="http://sitepoint.com">Sitepoint</a></li>
6 <li><a href="http://alistapart.com">A List Apart</a></li>
7 <li><a href="http://yuiblog.com">YUI Blog</a></li>
8 <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
9 <li><a href="http://oddlyspecific.com">Oddly specific</a></li>
10 </ul>

javascript代码如下

通过循环这些链接,将每个链接上附加一个事件处理器

$(document).ready(function () {
            var resources = document.getElementById("resources");
            var links = resources.getElementsByTagName("a");
            var all = links.length;
            for (var i = 0; i < all; i++) {
                links[i].addEventListener('click', handler, false);
            }
});

  function handler(e) {
    var x = e.target; //Get the link that was clicked The DOM element that initiated the event
    alert(x);
    e.preventDefault();//阻止事件的默认操作
  }

 注意这里:

1 e.target返回的实际是一个dom对象

2 e.preventDefault();//阻止事件的默认操作 上述例子中如果少了这一句设置,点击链接后会跳转到相应的页面

这种方法的好处并不是仅限于把多个事件处理器缩减为一个。你想想,举个例子,你需要动态的往这个链接表里追加更多的链接。

使用事件委托后,你就不需要做其它修改了;否则的话,你需要重新循环这个链接表,重新给每个链接安装事件处理器。

目录
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
3月前
|
JavaScript 前端开发
js事件队列
js事件队列
139 55
|
28天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
2月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
34 2
|
3月前
|
JavaScript 前端开发
javascript中常用的事件
这篇文章列出并演示了JavaScript中常用的DOM事件,包括失去焦点、获得焦点、鼠标点击、键盘事件等,并展示了如何通过直接在HTML标签中使用事件句柄和通过JavaScript为元素添加事件监听器两种方式来注册事件。
|
3月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
37 0
|
16天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
38 6
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
22 5
|
18天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
45 0
|
2月前
|
监控 JavaScript 前端开发