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 事件冒泡、事件捕获及事件委托

简介

最新文章

热门文章