javascript事件委托和jquery事件委托-js教程-PHP中文网

首页

web前端

js教程

javascript事件委托和jquery事件委托

hzc

Jul 01, 2020 am 09:46 AM

javascript

元旦过后，新年第一篇。
初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查看，也同时为现在找工作的前端小伙伴提供一个看似更全方位的解读事件委托的地方来认识了解他的原理，本篇文章汇总了两个版本的事件委托：javascript、jquery;

事件委托的定义:

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

事件委托的优势：

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

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

<body>
    <p id="nodes">
      <P class="node_p">第一个p</P>
      <P class="node_p">第二个p</P>
      <P class="node_p">第三个p</P>
      <p id="childp">
          <p>这是子集菜单</p>
          <p>我是子集的p
              <p>我是子集的p</p>
          </p>
      </p>
    </p>
    <button>点击加一</button>
  </body>

一、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<ps.length;i++){
        ps[i].onclick= function(){
            this.style.background = &#39;red&#39;
        }  
    }

这时候在浏览器中运行之后进行测试，发现如图一所示的结果；

那么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 < ps.length; i++) {
            ps[i].onclick = function () {
                this.style.background = &#39;red&#39;
            }
        }
    }
    addEvent() //先执行一遍循环

这时候浏览器中运行如图二所示:

这时候虽然解决了为新增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;
        }
    }

这时候浏览器中运行的结果如图三所示：

二、jquery事件委托：

相较于js事件委托，jquery事件委托的优势：执行事件委托的时候只有子元素会触发事件函数，而代为执行的父元素不会触发事件函数，因此不用去判断元素节点的名称；(注意这里的事件委托用的方法on,如果用bind方法父元素会触发事件函数）
这里nodes节点下所有标签为p的子节点都被赋予事件处理函数；这里的子节点还可以是多个类似' p,span',需要注意这里面也不可以写同nodes一样的标签，否则点击元素之间的间隔会给nodes下的p赋予事件处理函数；如例二：
例一:

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++;
        $('#nodes').append($('<p>我是新增加的p标签'+inner+'</p>'))
    })

浏览器运行的效果如图四所示：

例二:

<body>
    <p id="nodes">
        <P class="node_p">第一个p</P>
        <P class="node_p">第二个p</P>
        <P class="node_p">第三个p</P>
        <span class="node_p">span</span>
        <p id="childp">
            <p>这是子集菜单</p>
            <p>我是子集的p
                <p>我是子集的p</p>
            </p>
        </p>
    </p>
    <button>点击加一</button>
</body>
<script>
let inner =33;
$('#nodes').on('click','p,p,span',function(e){
        let target = $(e.target)
        target.css('backgroundColor','red')
    })
    $('button').click(()=>{
        inner++;
        $('#nodes').append($('<p>我是新增加的p标签'+inner+'</p>'))
    })
</script>

浏览器运行效果如图五所示：

事件委托不仅仅只是为处理一种dom操作类型，他可以进行增删改查等功能：

js事件委托：不同操作

<body>
    <p id="events">
        <input type="button" id=&#39;addHandle&#39; value=&#39;增加&#39;>
        <input type="button" id=&#39;deleteHandle&#39; value=&#39;减少&#39;>
    </p>
    <p id="content">

    </p>
</body>
<script src=&#39;http://code.jquery.com/jquery-2.1.1.min.js&#39;></script>
<script>
    let events = document.getElementById('events');
    let content = document.getElementById('content');
    events.onclick=function(e){
        let ev = e || window.event;
        let target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase()=='input'){
            switch(target.id){
                case 'addHandle':
                return addEvent();
                break
                case 'deleteHandle':
                return deleteEvent();
                break
            }
        }
    }
    function addEvent(){
        let add = document.createElement('p')
        add.innerHTML = '这是增加按钮'
        content.appendChild(add)
    }
    function deleteEvent(){
        let del = document.createElement('p')
        del.innerHTML = '这是删除按钮'
        content.appendChild(del)
    }
</script>

浏览器中的效果如图六所示：

jquery事件委托：不同操作

$('#events').on('click','input',(e)=>{
        let target = $(e.target);
        switch(target[0].id){
                case 'addHandle':
                return addEvent();
                break
                case 'deleteHandle':
                return deleteEvent();
                break
        }
    })
    function addEvent(){
        $('#content').append($('<p>这是增加按钮</p>'))
    }
    function deleteEvent(){
        $('#content').append($('<p>这是删除按钮</p>'))
    }

浏览器中的效果如图七所示：

本文如有不实之处，还望大神指点一二，欢迎讨论！

推荐教程：《JS教程》

以上是javascript事件委托和jquery事件委托的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：简书。如有侵权，请联系admin@php.cn删除

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr