js 事件冒泡、事件捕获及事件委托
简介
事件冒泡:从触发事件的节点一直到document,自下而上的去触发事件。
事件捕获:从document到触发事件的节点,自上而下的去触发事件。
事件委托:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件(一般dom节点是父子关系)。
阻止事件委托和冒泡:判断浏览器,ie浏览器设置event.cancelBubble=true,其他浏览器在事件函数中执行event.stopPropagation()
事件冒泡
html:
<div id="parent" style="background:blue;width:300px;height:300px;">
<div id="child" style="background:red;width:150px;height:150px;">山东张学友</div>
</div>
js:
document.getElementById("parent").addEventListener("click",function(e){
alert("parent," + this.id);
})
document.getElementById("child").addEventListener("click",function(e){
alert("child," + this.id)
})
结果:点击child会由内到外依次触发child和parent的事件。
事件捕获
js:
document.getElementById("parent").addEventListener("click", function(e) {
alert("parent," + this.id);
}, true)
document.getElementById("child").addEventListener("click", function(e) {
alert("child," + this.id)
}, true)
结果:点击child会由外到内依次触发parent和child的事件。
事件委托:
html:(需求:鼠标放到li上,对应的li背景颜色变为灰色)
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
普通实现(给每个li都绑定一个事件让其变灰):
$("li").on("mouseover",function(){
$(this).css("background-color","gray").siblings().css("background-color","white");
})
上面这种普通实现看似没有什么问题,但是如果在这段代码结束以后,我们动态的给ul又增加了一个li,那么新增的这个li是不带有事件的。
使用事件委托实现:(js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素)
利用事件冒泡 只指定ul的事件处理 就可以控制ul下的所有的li的事件
$("ul").on("mouseover", function(e) {
$(e.target).css("background-color", "gray").siblings().css("background-color", "white");
})
第一步:给父元素绑定事件
给元素ul添加绑定事件,绑定mouseover事件设置css(也可通过addEventListener为点击事件click添加绑定) 第二步:监听子元素的冒泡事件
这里默认是冒泡,点击子元素li会向上冒泡 第三步:找到是哪个子元素的事件
通过匿名回调函数的参数e用来接收事件对象,通过target获取触发事件的目标(可以通过判断target的类型来确定是哪一类的子元素对象执行事件)
如何阻止事件冒泡:
<div id="parent" style="background:blue;width:300px;height:300px;">
<div id="child" style="background:red;width:150px;height:150px;">山东张学友</div>
</div>
$("#child").click(function() {
alert("点击内部的div ... ...");
var e = (event) ? event : window.event; //获取IE或非IE浏览器的事件
if(window.event) { //如果是IE浏览器
e.cancelBubble = true; //IE浏览器,设置该属性为true,取消事件冒泡
} else {
e.stopPropagation(); //非IE浏览器,该方法取消事件的进一步捕获或冒泡。
}
});
$("#parent").click(function() {
alert("点击外部的div ... ...");
});
js 事件冒泡、事件捕获及事件委托的更多相关文章
- 事件冒泡与捕获&事件托付
设想这样一种情况 一个div里面有个span元素 ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都允许,事实就是这种, 第二个问题来了,这个事件 ...
- JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- js事件机制——事件冒泡和捕获
概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...
- JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- DOM事件-冒泡、捕获、传播、委托
事件捕获 以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡 根事件捕获截然相反.发生点击事件时,事件会从 ...
- JS 事件冒泡整理 浏览器的事件流
JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- JavaScript事件冒泡与捕获
event.preventDefault(); 如果event.cancelable的值为true,可以取消默认事件 event.cancelable; 元素是否可以取消 ...
随机推荐
- ng 服务
服务的本质是单例对象,封装一些方法和属性的. 单例模式:在实例化变量的时候,如果该变量已经存在,直接返回该变量:如果不存在,就创建一个新的变量再返回 ng自带的服务有很多,常用:$location $ ...
- 你必须知道的495个C语言问题,学习体会四
本文,我们来学习下指针,这是个梦魇啊.无数次折磨着C语言学习者,无数次的内存泄露,无数次的访问失败,无数次的越界溢出, 这些错误造就的仅仅是一个 跟随者,真正的优秀者必须要正视语言的局限,同时在最大限 ...
- SQLServer清空数据库中所有表的数据
今早同事跟进客户反馈的问题时,提了个要求,要求清空数据库中所有表的数据. 记得之前用游标遍历所有的表名 + exec 动态语句 truncate table 表名 实现过这个功能. 网上搜了下,有更简 ...
- HihoCoder 1122二分图二 ---最大匹配之匈牙利算法
二分图二•二分图最大匹配之匈牙利算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上一回我们已经将所有有问题的相亲情况表剔除了,那么接下来要做的就是安排相亲了.因为过 ...
- 设计模式之组合(compose)模式
树形结构在软件中随处可见,比如操作系统中的目录结构,公司组织结构等等,如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题.组合模式通过一种巧妙的设计方案来使得用户可以一致性地处理整个树形 ...
- jstl中的用法
版权声明:本文为博主原创文章,未经博主允许不得转载. 在JSP的开发中,迭代是经常要使用到的操作.例如,逐行的显示查询的结果等.在早期的JSP中,通常使用Scriptlets来实现Iterator或者 ...
- codechef Graph on a Table
codechef Graph on a Table https://www.codechef.com/problems/TBGRAPH 题意 : 一个\(n\times m\)的网格图.\(q\) 个 ...
- netflix vector 系统性能监控安装使用
说明本次安装使用docker 1. vector 安装 docker run -d --name vector -p 80:80 netflixoss/vector:latest 2. 依赖的 ...
- .NET 应用程序域?
为了提升windows系统的稳定性与可靠性,windows通过进程来实现.所有的可执行代码.数据以及其他资源都被包含在进程中,不允许其他进程对它进行访问(除非有足够的权限).对于.NET应用程序,还进 ...
- nginx.conf自己整理的中文解读
自己收集了网上有关conf文件的中文详解,这样以后就不怕看不懂nginx的配置文件啦! #定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数. ...