JavaScript的事件代理和委托实例分析


Posted in Javascript onMarch 25, 2015

在JavaScript中,经常会碰到要监听列表中多项li的情形,假设我们有一个列表如下:

<ul id="list">

  <li id="item1">item1</li>

  <li id="item2">item2</li>

  <li id="item3">item3</li>

  <li id="item4">item4</li>

</ul>

如果我们要实现以下功能:当鼠标点击某一li时,alert输出该li的内容,我们通常的写法是这样的:

当列表项比较少时,直接给每个li添加onclick事件
列表项比较多时,在onload时就给每个列表项调用监听
第一种方法比较简单直接,但是没有顾及到html与JavaScript的分离,不建议使用,第二种方法的代码如下:

window.onload=function(){

  var ulNode=document.getElementById("list");

  var liNodes=ulNode.childNodes||ulNode.children;

  for(var i=0;i<liNodes.length;i++){

    liNodes[i].addEventListener('click',function(e){

      alert(e.target.innerHTML);

    },false);

  }

}

由上可以看出来,假如不停的删除或添加li,则function()也要不停的更改操作,易出错,因此推荐使用事件代理,在使用事件代理之前,我们先来了解一下事件阶段(event phase):

事件阶段:

当一个DOM事件被触发的时候,他并不是只在它的起源对象上触发一次,而是会经历三个不同的阶段。简而言之:事件一开始从文档的根节点流向目标对象(捕获阶段),然后在目标对向上被触发(目标阶段),之后再回溯到文档的根节点(冒泡阶段)如图所示(图片来自W3C):

JavaScript的事件代理和委托实例分析

事件捕获阶段(Capture Phase)

事件的第一个阶段是捕获阶段。事件从文档的根节点出发,随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达时间的目标节点。捕获阶段的主要任务是简历传播路径,在冒泡阶段,时间会通过这个路径回溯到文档根节点。

element.removeEventListener(<event-name>, <callback>, <use-capture>);

我们通过上面的这个函数来给节点设置监听,可以通过将;设置成true来为事件的捕获阶段添加监听回调函数。在实际应用中,我们并没有太多使用捕获阶段监听的用例,但是通过在捕获阶段对事件的处理,我们可以阻止类似click事件在某个特定元素上被触发。

var form=document.querySeletor('form');

form.addEventListener('click',function(e){

  e.stopPropagation();

  },true);

如果你对这种用法不是很了解的话,最好还是将设置为false或者undefined,从而在冒泡阶段对事件进行监听。

目标阶段(Target Phase)

当事件到达目标节点时,事件就进入了目标阶段。事件在目标节点上被触发,然后逆向回流,知道传播到最外层的文档节点。

对于多层嵌套的节点,鼠标和指针事件经常会被定位到最里层的元素上。假设,你在一个div元素上设置了click的监听函数,而用户点击在了这个div元素内部的p元素上,那么p元素就是这个时间的目标元素。事件冒泡让我们可以在这个div或者更上层的元素上监听click事件,并且时间传播过程中触发回调函数。

冒泡阶段(Bubble Phase)

事件在目标事件上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,直到到达最外层的根节点。也就是说,同一事件会一次在目标节点的父节点,父节点的父节点...直到最外层的节点上触发。

绝大多数事件是会冒泡的,但并非所有的。具体可见:规范说明

由上我们可以想到,可以使用事件代理来实现对每一个li的监听。代码如下:

window.onload=function(){

  var ulNode=document.getElementById("list");

  ulNode.addEventListener('click',function(e){

       if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判断目标事件是否为li*/

         alert(e.target.innerHTML);

       }

     },false);

};

以上所述就是本文的全部内容了,希望能够对大家熟悉javascript事件的委托和代理能够有所帮助。

请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持!

Javascript 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
vue实现购物车加减
May 30 Javascript
JS实现简易图片轮播效果的方法
Mar 25 #Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 #Javascript
JavaScript动态添加列的方法
Mar 25 #Javascript
javascript实现复选框选中属性
Mar 25 #Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 #Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 #Javascript
jQuery使用post方法提交数据实例
Mar 25 #Javascript
You might like
PHP安全性漫谈
2012/06/28 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
JS的replace方法介绍
2012/10/20 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
Python学习小技巧之列表项的拼接
2017/05/20 Python
python sys.argv[]用法实例详解
2018/05/25 Python
使用python3实现操作串口详解
2019/01/01 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python 进程池pool使用详解
2020/10/15 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
售后主管岗位职责
2013/12/08 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
食品采购员岗位职责
2014/04/14 职场文书
党务公开方案
2014/05/06 职场文书
创先争优一句话承诺
2014/05/29 职场文书
校园文明标语
2014/06/13 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
复兴之路展览观后感
2015/06/02 职场文书
婚礼答谢词范文
2015/09/29 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书