javascript事件委托和jquery事件委托

事件委托的定义:

利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件委托的优势：

• 在js中添加到页面上的事件处理程序的个数直接影响到网页的运行性能。因为每个事件处理函数都是一个对象，是对象就会占用内存，而内存中对象越多，导致的结果就是性能越差；而访问dom的次数越多，就会引起结构的重绘或者重排的次数也随之增多，会延迟整个页面的交互就绪时间；

• 对于在页面进行处理过后新增的dom元素，运用事件委托可以为新增的dom元素一并增减事件处理程序；

在下面的代码中p标签要实现的效果是鼠标点击p标签的时候背景色变为红色，以下是js、jq的处理方法

    

      
第一个p
      
第二个p
      
第三个p
      

          
这是子集菜单
          
我是子集的p
              
我是子集的p
          

      

    

    点击加一
  

一、js事件委托

在js中不用事件委托的情况：获取页面中所有的p标签然后用for循环遍历给每一个元素增加事件处理函数

let nodes = document.getElementById("nodes");
    let ps = document.getElementsByTagName("p");
    console.log(ps);
    let btn = document.getElementsByTagName("button")[0];
    let inner = 33;

    btn.Onclick= function() {
      inner++;
      let p = document.createElement("p");
      p.innerHTML = inner + "新增的p标签啊";
      nodes.appendChild(p);
      console.log(ps);
    };
    for (let i= 0;i
这时候在浏览器中运行之后进行测试，发现如图一所示的结果；
那么js不用事件委托怎么给新增加的标签添加事件处理函数呢？解决方案如下：
let nodes = document.getElementById("nodes");
    let ps = document.getElementsByTagName("p");
    console.log(ps);
    let btn = document.getElementsByTagName("button")[0];
    let inner = 33;

    btn.Onclick= function () {
        inner++;
        let p = document.createElement("p");
        p.innerHTML = inner + "新增的p标签啊";
        nodes.appendChild(p);
        addEvent();//将新dom元素增加到页面后再执行循环函数
        console.log(ps);
    };

    function addEvent() {
        for (let i = 0; i 
这时候浏览器中运行如图二所示:
这时候虽然解决了为新增dom元素增加事件处理函数的问题，但是仔细考虑他的性能却是比之前都有所下降，究其原因就是又增加了一个事件处理函数（对象），又一次占用了内存；所以，这个时候就会用到事件委托，这时候事件委托的优势也有所体现出来：
let nodes = document.getElementById("nodes");
    let ps = document.getElementsByTagName("p");
    console.log(ps);
    let btn = document.getElementsByTagName("button")[0];
    let inner = 33;

    btn.Onclick= function () {
        inner++;
        let p = document.createElement("p");
        p.innerHTML = inner + "新增的p标签啊";
        nodes.appendChild(p);
        console.log(ps);
    };
//事件委托，为nodes指定一个事件处理函数，处理nodes下为p标签的所有元素的cilck事件
    nodes.Onclick= function(e){
        let ev = e || window.event
        let target = ev.target || ev.srcElement //srcElement IE浏览器
        //这里要判被处理元素节点的名字，也可以增加相应的判断条件 target.nodeName.toLowerCase() == &＃39;p&＃39;||target.nodeName.toLowerCase() == &＃39;span&＃39;,但是要注意不要使用父级元素的名称，因为再点击子元素之间的空气的时候，由于事件冒泡他会给父级元素也增加相应的事件处理函数；因为返回的节点名称一般都是大写，所以这时要用toLowerCase()处理一下；
        if(target.nodeName.toLowerCase() == &＃39;p&＃39;){ 
            target.style.background = &＃39;green&＃39;
        }
    }
这时候浏览器中运行的结果如图三所示：
例一:
let inner = 33;
//这里nodes节点下所有标签为p的子节点都被赋予事件处理函数；这里的子节点还可以是多个类似&＃39; p,span&＃39;,需要注意这里面也不可以写同nodes一样的标签，否则点击元素之间的间隔会给nodes下的p赋予事件处理函数
$(&＃39;#nodes&＃39;).on(&＃39;click&＃39;,&＃39;p&＃39;,function(e){
        let target = $(e.target)
        target.css(&＃39;backgroundColor&＃39;,&＃39;red&＃39;)
    })
    $(&＃39;button&＃39;).click(()=>{
        inner++;
        $(&＃39;#nodes&＃39;).append($(&＃39;
我是新增加的p标签&＃39;+inner+&＃39;
&＃39;))
    })
浏览器运行的效果如图四所示：
例二:
    

        
第一个p
        
第二个p
        
第三个p
        span
        

            
这是子集菜单
            
我是子集的p
                
我是子集的p
            

        

    

    点击加一

浏览器运行效果如图五所示：
事件委托不仅仅只是为处理一种dom操作类型，他可以进行增删改查等功能：
js事件委托：不同操作
    

        
        
    
    


    


浏览器中的效果如图六所示：
jquery事件委托：不同操作
$(&＃39;#events&＃39;).on(&＃39;click&＃39;,&＃39;input&＃39;,(e)=>{
        let target = $(e.target);
        switch(target[0].id){
                case &＃39;addHandle&＃39;:
                return addEvent();
                break
                case &＃39;deleteHandle&＃39;:
                return deleteEvent();
                break
        }
    })
    function addEvent(){
        $(&＃39;#content&＃39;).append($(&＃39;
这是增加按钮
&＃39;))
    }
    function deleteEvent(){
        $(&＃39;#content&＃39;).append($(&＃39;
这是删除按钮
&＃39;))
    }
浏览器中的效果如图七所示：
本文如有不实之处，还望大神指点一二，欢迎讨论！
推荐教程：《JS教程》
以上就是Javascript事件委托和jquery事件委托的详细内容，更多请关注 第一PHP社区 其它相关文章！