zoukankan      html  css  js  c++  java
  • js 事件冒泡、事件捕获及事件委托

    简介

    事件冒泡:从触发事件的节点一直到document,自下而上的去触发事件。
    事件捕获:从document到触发事件的节点,自上而下的去触发事件。
    事件委托:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件(一般dom节点是父子关系)。
    阻止事件委托和冒泡:判断浏览器,ie浏览器设置event.cancelBubble=true,其他浏览器在事件函数中执行event.stopPropagation()

    事件冒泡

    html:

    <div id="parent" style="background:blue;300px;height:300px;">
        <div id="child" style="background:red;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;300px;height:300px;">
        <div id="child" style="background:red;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 ... ...");
    });
  • 相关阅读:
    轻重搭配
    EF的优缺点
    使用bootstrap-select有时显示“Nothing selected”
    IIS发布 HTTP 错误 500.21
    js添加的元素无法触发click事件
    sql server查看表是否死锁
    sql server把一个库表的某个字段更新到另一张表的相同字段
    SQLSERVER排查CPU占用高的情况
    SQL server中如何按照某一字段中的分割符将记录拆成多条
    LINQ to Entities does not recognize the method 'System.DateTime AddDays(Double)' method, and this method cannot be translated into a store expression.
  • 原文地址:https://www.cnblogs.com/blazeZzz/p/9255581.html
Copyright © 2011-2022 走看看