问答详情
源自:5-2 on()的高级用法

事件冒泡不是向上传递么?为什么给div添加事件,a会截停? 这个怎么又像捕获了那? 看完这个案例我又晕了!

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>


提问者:码农吊车尾 2016-10-12 11:25

个回答

  • weibo_猪猪猪惠婷_0
    2016-10-16 17:36:17
    已采纳

    我也是初学者,下面是我的理解

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        .left div,
        .right div {
            width: 500px;
            height: 50px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
        }
        
        .left div {
            background: #bbffaa;
        }
        
        .right div {
            background: yellow;
        }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h2>on事件委托</h2>
        <div class="left">
            <div class="aaron">
                <a>点击这里</a>
                <p>试下点击这里</p>
            </div>
        </div>    
        <script type="text/javascript">
        //给body绑定一个click事件
        //没有直接a元素绑定点击事件
        //通过委托机制,点击a元素的时候,事件触发
        //$('body').on('click', function(e) )
        $('body').on('click','a', function(e) {
           alert(e.target.textContent)
        })
        </script>
    </body>
    
    </html>

    你可以试着运行上面的代码,观察$('body').on('click','a', function(e) )和$('body').on('click', function(e) )的运行结果的不同。你会发现$('body').on('click','a', function(e) )情况下,只有点击<a>才会触发click事件,而在$('body').on('click', function(e) )情况下点击页面内的任何元素都可以促发click事件。认真理解老师给$('body').on('click','a', function(e) )的三句注释:

    • //给body绑定一个click事件

    • //没有直接a元素绑定点击事件

    •  //通过委托机制,点击a元素的时候,事件触发

    我们给body绑定的click事件,为什么只有在点击<a>元素的时候才会触发click事件呢?因为我们把click事件委托了<a>.

    能理解吗

  • qq_迸发激情_0
    2017-12-05 22:25:22

    其实事件委托的关键就是on里面的选择器参数,它决定了事件发生的范围!

  • 猎风的雄鹰
    2016-11-13 16:18:11

    大神,能解答一下:浏览器的默认行为有哪些?有哪些事件可以触发浏览器的默认行为?

  • 码农吊车尾
    2016-10-12 12:07:34

    $("div").on("click","p",fn)
    哪位老师能解释一下,这句话的意思,事件委托的机制的详细顺序是什么?

  • ghgytr3603800
    2016-10-12 11:58:59

    并不是截停,而是委托,依旧向上传递,只是后面的函数的参数委托给了a,即以a为参数。不过还是会向上传递的。