JavaScript, JQuery事件委托

2022-09-20 12:43:56

1、引言

现实当中，前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。(公司也不会容忍那么多员工站在门口就为了等快递);

这种事件委托还有个好处，就是即便公司又来很多员工，前台MM照样可以签收新员工的快递，新员工即便刚来但一样拥有拿自己快件的方法；

2、概念

通俗来讲：事件有：onclick、onmouseover、onmouseout等等；委托呢，就是让别人来做，这件事情本身是加在元素上，然而你却加载别人身上来做，完成事件；

3、原理

利用冒泡原理，将事件加在父级上触发，执行效果；

4、好处

提高性能；
新添加元素，可以直接拥有事件；

5、事件源

跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的。

6、使用情景

　　* 为DOM中的很多元素绑定相同事件；
　　* 为DOM中尚不存在的元素绑定事件；

7、举栗子

需要触发每个li来改变他们的背景颜色
```html

111111111

22222222222

33333333

44444444444

js一般写法：

window.onload = function(){

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

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

    for(var i=; i<aLi.length; i++){

     aLi[i].onmouseover = function(){

         this.style.background = 'red';

     }

     aLi[i].onmouseout = function(){

         this.style.background = ' ';

     }

 }  

}

事件委托的js写法：

window.onload = function(){

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

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

　　/*这里用到事件源：event对象， 事件源，不管在哪个事件中，只要你操作的那个元素就是事件源

　　ie： window.event.srcElent

　　标准下： event.target

　　nodeName: 找到元素的标签名；

　　*/

　　oUl.onmouseover = function(ev) {

　　var ev = ev||window.event;

　　var target = ev.target || ev.srcElement;

　　// console.log(target.innerHTML);

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

       target.style.background = 'red';

    }

}

　　oUl.onmouseout = function(ev) {

    var ev = ev || window.event;

    var target = ev.target|| ev.srcElement;

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

       target.style.background = ' ';

    }

　　}

}

事件委托的jq写法

    $(function(){

        $("#ul").on('click','li',function(){

            if(!$(this).attr('s')){

                $(this).css('background','red');

                $(this).attr('s',true);

            }else{

                $(this).css('background','#fff');

                $(this).removeAttr('s');

            }

        })

    })

码农公寓