事件代理与事件处理流程
1.事件代理(事件委托)
定义:当我们要对多个元素添加事件时,可以将事件添加给它们的父节点,而将事件委托给父节点来触发函数。
<ul id="parent-list"> <li id="post-1"><a href="#">我是第1</a></li> <li id="post-2"><a href="#">我是第2</a></li> <li id="post-3"><a href="#">我是第3</a></li> <li id="post-4"><a href="#">我是第4</a></li> <li id="post-5"><a href="#">我是第5</a></li> <li id="post-6"><a href="#">我是第6</a></li> </ul>
如以上代码,要给li下的a注册事件,我们一般会将所有的a都注册事件,这样就非常麻烦。
##从最底层的标签开始找,所以找到的是a,不是li.
我们可以使用更简单的事件代理机制,当事件触发时,事件会被抛到上层父节点,我们通过检查事件目标对象target,来判断并获取事件源li。
##事件监听:通过addEventListener注册事件监听函数
// 获取父节点,并为它添加一个click事件 var list=document.getElementById("parent-list"); list.addEventListener("click",function(e) { // 检查事件源e.target是否为A //e.target意思是表示获取事件目标 console.log(e.target.tagName); //,如果e.target存在且e.target的标签名是A(a要大写) if(e.target && e.target.tagName == "A") { // 真正的处理过程在这里 alert("注册成功"); } });
jquery中使用事件代理:
$("#parent-list").on("click","a",function(){ alert("注册成功"); }
2.事件处理流程
事件处理流程有3个阶段:
a.事件捕获阶段
当某个元素触发事件时,顶层对象document会发出一个事件流,沿着DOM节点树流向并直到到达事件真正发生的目标元素。事件捕获阶段,事件监听函数是不会触发的。
b.事件目标阶段
当到达目标元素以后,执行目标元素触发该事件相应的执行函数,如果没有绑定事件监听函数,那就不执行。
c.事件冒泡阶段
从目标元素开始,一直往顶层传播,途中如果有节点绑定了相应的事件处理函数,都会被执行。
如果要阻止事件冒泡,chrome和火狐使用e.stopPropagation() ,IE则使用window.event.cancelBubble = true。
js代码执行阻止事件冒泡,兼容ie火狐。
function myFn(){
window.event ? window.event.cancelBubble = true : e.stopPropagation();
}
##在ie浏览器中,window.event是全局变量,在非ie中,就需要自己传入一个参数(比如e)来获取event啦,所以就有了var e = e||window.event,同时兼容IE与谷歌.
3.阻止浏览器默认行为
谷歌的方法:e.preventDefault()
IE的方法:window.event.returnValue=false ;
function stopFn(){ window.event ?window.event.returnValue=false : e.preventDefault() ; }
4.return false
javascript中return false只能阻止默认行为,不会阻止事件冒泡。
在jquery中,return false既可以阻止默认行为,又可以阻止事件冒泡。
转载于:https://www.cnblogs.com/sharkJan/p/7442354.html
事件代理与事件处理流程相关推荐
- 【DOM系列】你真的理解事件委托(事件代理)吗?
目录 1. 基本概念 1.1 原理 2. 事件冒泡和事件捕获 代码演示 3. addEventListener的第三个参数 4. 事件委托阶段案例 4.1 事件冒泡案例 4.2 事件捕获案例 5. 经 ...
- android应用框架 平台结构 源代码结构 事件处理流程 Framework层收到事件的处理过程 电话处理流程
android应用框架 平台结构 第1层: Linux操作系统及驱动 C语言实现 第2层: 本地框架和Java运行环境 C和C++实现 第3层: Java框架(framework) Java实现 第4 ...
- JS的事件处理机制以及事件代理(事件委托)
一.先记个小知识点.cssText cssText 本质:设置 HTML 元素的 style 属性值. 用法:document.getElementById("d1").style ...
- JavaScript事件代理和委托
2019独角兽企业重金招聘Python工程师标准>>> 浏览器的事件冒泡 当事件发生后,这个事件就要开始传播.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处 ...
- 事件链、事件代理、页面的渲染过程、style的操作、防抖与节流【DOM(四)】
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 目录 文章目录 1.事件链(冒泡目标捕获) (1)事件链原理 (2)阻止冒泡和默认事件 2.事件代理(面试笔试题重点) 3. ...
- JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理 什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
- js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- [CommunityServer]事件代理
在我们添加到数据库时要验证数据是否符合我们所要求的格式.但我们又不知道有多少数据后数据验证的方法,这样我们举可以用代理来完成,以达到我们的目的.在CommunityServer中的代理易于扩展,值得我 ...
- 事件模型、事件流(冒泡与捕获)、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
- js事件委托或事件代理
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
最新文章
- Android studio Merge 标签 显示错乱
- Cocoa如何应用设计模式
- LeetCode House Robber II(动态规划)
- mac安装hadoop2-client
- 将excel转为python的字典_python读取excel表并把数据转存为字典
- Caused by: javax.xml.stream.FactoryConfigurationError: Provider com.ctc.wstx.stax.WstxInputFactory n
- Java-优先级队列(堆)
- 【lucene】lucene高亮显示
- ActiveMQ 即时通讯服务 入門指南及淺析
- 一道c++小编程题,
- idea中加入git版本控制
- revit二次开发之插件安装包制作
- Matlab的对角阵、三角阵,矩阵变换:矩阵的转置、旋转、翻转、求逆、方阵的行列式、矩阵的秩求解
- ERP实施中需掌握的基本财务基础知识
- win10无限重启_安装 Win10+Ubuntu双系统,让迷你掌上电脑更具生产力
- python写打飞机游戏
- C#合并两个(多个)集合
- 04.TFT_RGB接口时序分析
- 【LSTM新闻数据集分类代码】
- html文件是一种使用超文本标记语言,超文本标记语言HTML HTML(Hyper Text Markup Language,.ppt...