网站关键词优化外包服务,在线制作图片的免费软件,三合一网站建设用途,余姚网页设计公司事件冒泡和事件捕获分别由微软和网景公司提出#xff0c;这两个概念都是为了解决页面中事件流#xff08;事件发生顺序#xff09;的问题。 div iddiv1div iddiv2div iddiv3click/div/div
这两个概念都是为了解决页面中事件流事件发生顺序的问题。 div iddiv1div iddiv2div iddiv3click/div/div
/div如上代码三个div标签呈嵌套关系假使三个元素都注册了相同的事件那么他们的触发顺序是怎样的呢 故此为了解决这个事件流问题微软和网景提出了两种几乎相反的概念。
一、事件冒泡(event bubbling)
微软提出了名为事件冒泡的事件流。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。可以想象把一颗石头投入水中泡泡会一直从水底冒出水面。也就是说事件会从最内层的元素开始发生一直向上传播直到document对象。 刚才的例子三个元素间的触发顺序就应该是 div3-div2-div1.我们给上面代码里的三个div元素绑定事件触发一下看看 var div1 document.getElementById(div1);var div2 document.getElementById(div2);var div3 document.getElementById(div3);div1.onclick function () {console.log(this.id);};div2.onclick function () {console.log(this.id);};div3.onclick function (e) {console.log(this.id);};结果如下 这就是事件冒泡。 二、事件捕获(event capturing)
网景提出另一种事件流名为事件捕获。事件从最不精确的对象(document 对象)开始触发然后到最精确(也可以在窗口级别捕获事件不过必须由开发人员特别指定)的对象与事件冒泡相反事件会从最外层开始发生直到最具体的元素。同样形象的比喻一下可以想象成警察逮捕屋子内的小偷就要从外面一层层的进入到房子内。
针对刚才的例子三个元素间的触发顺序应该是div1-div2-div3。 我们给上面代码里的三个div元素绑定事件触发一下看看 var div1 document.getElementById(div1);var div2 document.getElementById(div2);var div3 document.getElementById(div3);div1.addEventListener(click, f1, true);div2.addEventListener(click, f1, true);div3.addEventListener(click, f1, true);function f1(){console.log(this.id)}element.addEventListener(event, function, useCapture)addEventListener方法用来为一个特定的元素绑定一个事件处理函数是JavaScript中的常用方法其传入三个参数分别是‘没有on的事件类型’‘事件处理函数’‘控制事件阶段’第三个参数是boolean类型默认是false表示在事件冒泡的阶段调用事件处理函数像上图中传入true就表示在事件捕获的阶段调用事件处理函数。 结果如下 这就是事件捕获。 三、阻止事件冒泡
① e.stopPropagation() 先前案例的代码如下 var div1 document.getElementById(div1);var div2 document.getElementById(div2);var div3 document.getElementById(div3);div1.onclick function () {console.log(this.id);};div2.onclick function () {console.log(this.id);};div3.onclick function (e) {console.log(this.id);e.stopPropagation();};结果如下图 ② window.event.cancelBubble true 谷歌IE8兼容火狐不支持 代码如下 var div1 document.getElementById(div1);var div2 document.getElementById(div2);var div3 document.getElementById(div3);div1.onclick function () {console.log(this.id);};div2.onclick function () {console.log(this.id);};div3.onclick function () {console.log(this.id);window.event.cancelBubble true;};③ 合并取消return false
在javascript的return false只会阻止默认行为而是用jQuery的话则既阻止默认行为又防止对象冒泡。
问题为什么会在前端加入冒泡事件这种机制,是出于什么问题才考虑加入这样一种机制
答加入冒泡机制是因为存在这个现象子元素存在于父级元素中点击子元素也是相当于点击了父元素冒泡机制可用于事件委托优化性能比如长列表绑定事件如上所说的长列表绑定笨的做法每个li上绑定事件li触发事件如果1kw条数据这种做法肯定是不科学的。所以优化性能的时候将事件绑定在ul上加入冒泡机制代码量变少、性能又好
