码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript, JQuery事件委托

时间:2019-03-29 23:47:28      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:cti   cas   rip   var   name   自己   委托   存在   颜色   

1、引言

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

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

2、概念

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

3、原理

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

4、好处

  1. 提高性能;
  2. 新添加元素,可以直接拥有事件;

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=0; 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);
            }
        })
    })

 

JavaScript, JQuery事件委托

标签:cti   cas   rip   var   name   自己   委托   存在   颜色   

原文地址:https://www.cnblogs.com/ning123/p/10624674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!