美文网首页
为动态生成的元素添加事件监听

为动态生成的元素添加事件监听

作者: Michael_lpf | 来源:发表于2016-12-30 11:28 被阅读0次

    当我们有一个列表:

    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    

    希望为每个<li></li>添加点击事件监听,我们一般这样做:

    $('li').click(function(){
      // do something...
    });
    

    但是,如果我们的列表不是在页面加载时由浏览器渲染的DOM,而是动态生成的呢,上面的事件监听就会失效了。
    那么如何为页面中动态生成的元素添加事件监听呢?很简单:

    $('ul').on('click', 'li',  function(){
      // do something...
    });
    

    这其实就是我们常说的“事件委托”。
    在类似body>div>span这样的DOM结构中,单击<span>,click事件会一直冒泡到<div><body>,因此发生在<a>上的事件,<div><body>一样会受理。而利用事件传播(这里是事件冒泡,相对应的还有事件捕获)机制,就可以实现事件委托。

    总结来说,事件委托就是事件目标自身不处理事件,而是把事件处理任务委托给父元素或祖先元素。

    [完]

    相关文章

      网友评论

          本文标题:为动态生成的元素添加事件监听

          本文链接:https://www.haomeiwen.com/subject/lukmvttx.html