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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php图片上传类 附调用方法
2016/05/15 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
web前端开发也需要日志
2010/12/09 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python3.6实现学生信息管理系统
2019/02/21 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
军训自我鉴定
2014/01/22 职场文书
教师党员承诺书
2014/03/25 职场文书
怎样写离婚协议书
2015/01/26 职场文书
实习协议书
2015/01/27 职场文书
投资意向协议书
2015/01/29 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
自荐信大全
2019/03/21 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android