美文网首页MST
事件委托,使用事件委托的好处是什么?举个简单的例子?

事件委托,使用事件委托的好处是什么?举个简单的例子?

作者: 晴天的晴q | 来源:发表于2019-02-13 18:49 被阅读0次

事件委托

事件委托就是利用事件冒泡机制指定一个事件处理程序,来管理某一类型的所有事件。

即:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处:

1. 只在内存中开辟了一块空间,节省资源同时减少了dom操作,提高性能

2. 对于新添加的元素也会有之前的事件

例子:ul中触发每个li来改变他们的背景颜色

HTML:

<ul id='ul'>

    <li>111111</li>

    <li>222222</li>

    <li>333333</li>

 </ul>

 <button id='button'>添加元素</button>

JavaScript:

    window.onload = function(){

      let oUl = document.getElementById('ul');

      let aLi = oUl.getElementsByTagName('li');

      let but = document.getElementById('button');

      let now = 3;

      // 事件源:event对象,不管在哪个事件中,只要你操作的哪个元素就是事件源

      // ie:window.event.srcElement

      // 标准:event.target

      oUl.onmouseover = function(e){

        let ev = e || window.event;

        let target = ev.target || ev.srcElement;

        if(target.nodeName.toLowerCase() == 'li'){

          target.style.background = 'red';

        }

      }

      oUl.onmouseout = function(e){

        let ev = e || window.event;

        let target = ev.target || ev.srcElement;

        if(target.nodeName.toLowerCase() == 'li'){

          target.style.background = '';

        }

      }

      but.onclick = function(){

        now ++;

        let newLi = document.createElement('li');

        newLi.innerHTML = 111111 * now;

        oUl.appendChild(newLi);

      }

    }

相关文章

网友评论

    本文标题:事件委托,使用事件委托的好处是什么?举个简单的例子?

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