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 ... ...");
});