javascript-委托事件(事件代理)

最新推荐文章于 2024-08-09 16:54:24 发布
最新推荐文章于 2024-08-09 16:54:24 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： javascript

1.什么是委托事件？

委托事件也叫做事件代理意思是一样的,就好像精灵图也叫 雪碧图!!!只是不同叫法.
试想一下:假设公司里每次收快递的时候员工都跑到公司门口去收自己的快递,如果同时多个人也同样去收自己快递这样公司就秩序混轮了!如果委托给前台妹子去收快递然后由妹子去派发快递这个过程就叫委托事件!(备注:冒泡思想也有点相仿只不过是由父节点往子节点传递信息)

2.javascript委托事件的例子

1.通过冒泡事件来形象理解委托思想

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委托事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>添加节点</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        //引发冒泡事件
        elm.onclick=function(eve){
        let evevts=eve||window.event;
        let ev=events.target||events.srcElements;
            alert(ev.nodeName.toLowerCase())
        }
    </script>
</html>

2.IE兼容:window.event.srcElement而其他浏览器使用window.event.target

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委托事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>添加节点</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        elm.onclick=function(event){
            var eve=event||window.event;
            //获取到用户点击中的dom结构体
            var targer=event.target||event.srcElement;
            //targer.nodeName.toLowerCase()获取到节点
            if(targer.nodeName.toLowerCase()=='li'){
                alert(targer.innerHTML);//获取结构里面的参数
            }   
        }
    </script>
</html>

3.委托事件存在的问题

如果从dom中新增节点会出现问题,使用getElementsByTagName先进行对li遍历然后对遍历过的li进行了事件绑定然后再生成新的li节点然后发现这些新增的节点会没有绑到事件.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委托事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>添加节点</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        var oBtn=document.getElementById('oBtn');
        var val=0;
        //新增元素
        var  lis=elm.getElementsByTagName('li');
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.style.background='red';
            }
            lis[i].onmouseout=function(){
                this.style.background='blue';
            }
        }
        //新添加的节点没触发到鼠标移动事件
        oBtn.onclick=function(){
            val++;
            var oLi=document.createElement('li');
            oLi.innerHTML=666+val;
            elm.appendChild(oLi);
        }
    </script>
</html>

3.1解决方法

1.给公共的事件起个方法名字,当谁想要用到它就调用这个公共方法名

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委托事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>添加节点</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        var oBtn=document.getElementById('oBtn');
        var val=0;
        //新增元素
        var  lis=elm.getElementsByTagName('li');
        function hover(){
            for(var i=0;i<lis.length;i++){
                lis[i].onmouseover=function(){
                    this.style.background='red';
                }
                lis[i].onmouseout=function(){
                    this.style.background='blue';
                }
            }
        }
        //新添加的节点也触发了鼠标移动时的事件了
        oBtn.onclick=function(){
            val++;
            var oLi=document.createElement('li');
            oLi.innerHTML=666+val;
            elm.appendChild(oLi);
            hover();//老子调用hover方法了
        }
    </script>
</html>

2.将事件都变成一个个小小的功能模块自己专职去做自己的事情

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委托事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>添加节点</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        var oBtn=document.getElementById('oBtn');
        var val=0;
        //新增元素
        var  lis=elm.getElementsByTagName('li');
        elm.onmouseover=function(event){
            var ev=event||window.event;
            var eve=ev.target||ev.srcElement;
            if(eve.nodeName.toLowerCase() == 'li'){
                eve.style.background='red';
            }
        }
        elm.onmouseout=function(event){
            var ev=event||window.event;
            var eve=ev.target||ev.srcElement;
            if(eve.nodeName.toLowerCase() == 'li'){
                eve.style.background='blue';
            }
        }
        //新添加的节点没绑定委托
        oBtn.onclick=function(){
            val++;
            var oLi=document.createElement('li');
            oLi.innerHTML=666+val;
            elm.appendChild(oLi);

        }
    </script>
</html>

4.场景

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
不适合委托:focus，blur之类的，本身就没用冒泡的特性

5.JQuery

1.on(绑定事件),off(用来移除事件绑定)
1.1on

function myHandler(event) {  
alert(event.data.foo);  
}  
$('p').on('click', {foo: 'bar'}, myHandler)

1.2off

$('body').off('click', 'p', foo);

2.live(方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。)
地址:http://www.w3school.com.cn/jquery/event_live.asp
3.bind(同时绑定多个事件类型,同时绑定多个事件类型/处理程序,)
4.delegate(为了突破单一.bind()方法的局限性，实现事件委托)

$('#info_table').delegate('td','click',function(){/*显示更多信息*/});

4.1 undelegate(移除delegate的绑定)
5.one(只执行一次)

原生出自博客:http://www.cnblogs.com/liugang-vip/p/5616484.html
jquery出自博客:http://www.jb51.net/article/57827.htm

lucas-gz
关注
专栏目录
js事件委托（代理）
RoddyLD的博客
05-30 265
js事件委托（代理）一、什么叫事假委托二、事件委托的原理三、事件委托举例四、事件委托优缺点 一、什么叫事假委托 事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。 二、事件委托的原理 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行 三、事件委托举例 <ul id="ul1"> <li>1</li
JavaScript之事件委托和事件代理
low666的博客
03-13 711
JavaScript之事件委托和事件代理 事件委托概念： 事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。 简单的说就是原本需要一个一个去处理的事件，现在只需要一个总的事件去管理他们即可 （自己理解的，可能有偏差） 用事件委托的意义 在JavaScript中，添加到页面上的事件处理次数将关系到页面的整体运行性能，访问do...
js事件委托(事件代理)
weixin_45740510的博客
03-16 2597
事件委托的使用以及原理
JS【详解】事件委托
最新发布
朝阳39的博客
08-09 317
事件委托（Event Delegation）是 JS 处理事件的一种技术：不直接在目标元素上设置事件监听器，而是在其父元素或祖先元素上设置监听器，然后利用事件冒泡机制来捕获和处理事件。
js 事件代理详解
aichixiangcaia的博客
12-02 4866
事件代理就是基于js的事件流产生的，事件流有2中类型，即冒泡和捕获。 冒泡：当子元素触发某个事件的时候后，该事件会依次向上触发父元素的同类事件 捕获：和冒泡类似，只不过事件的顺序相反，即是从上级节点传递到下级节点 事件委托利用事件冒泡，将事件加载父元素或者祖元素上，触发该事件。e.target <body> <div id="big"> <div id="center"> <div id=...
JS事件委托
YuHang6686的博客
04-10 8468
作用：事件委托主要用来减少内存消耗，不用处理多次循环绑定 使用方法： var target = document.getElementsById("获取元素") //元素调用 target.addEventListener(type, listener, options); type：必选参数,需要绑定的事件名称，"不要带on" listener:必选参数，回调函数，你需要绑定的方法； options：可选参数，默认为false；表示"事件冒泡"，设置为true后为"事件捕获" 1、捕获阶段：事件从win
JS什么是事件代理
m0_70977782的博客
03-24 182
事件代理,又称之为事件委托,是JS中绑定事件的常用技巧,顾名思义,事件代理就是把原本需要绑定在子元素上的事件委托给父元素,事件代理的原理是冒泡机制。
JavaScript事件代理和委托详解
11-23
JavaScript事件代理 事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。 这主要得益于浏览器的事件冒泡...
浅析JavaScript的事件代理和委托
02-25
首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于...
Javascript事件流（事件捕获、事件冒泡）,事件委托（代理）
01-08
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
javascript事件代理
过客如期的博客
04-02 2069
一，事件介绍 1.事件用来实现js和html之间交互，网页中的每个元素都有一些事件属性可以触发 JavaScript 函数(下文的事件处理函数）。 2.一个完整的事件包含: 事件源 (html元素） 事件类型 (click,mouseover……) 事件处理程序-侦听器 (js回调函数) 二，事件流 1.事件流分为三种：事件冒泡，事件捕获，dom事件流。 2.事件冒泡：事件开始时由最具体的元素 (...
js之事件代理/事件委托
辽辽无期的博客
02-24 630
使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素节点（如：a、span等），我们不必再一次循环给每一个元素绑定事件，直接修改事件代理的事件处理函数即可。：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；事件代理也叫事件委托，原理：利用DOM元素的事件冒泡，指定一个事件的处理程序就可以管理某一类型的所有事件。：在目标节点上触发，称为“目标阶段”
js事件代理
wanbiaoTT的博客
01-05 142
事件代理 使用的event的target属性 <div class="box"> <div>123</div> <div>456</div> <div>789</div> <div>471</div> <div>741</div> </div> <script&gt
JS事件代理
马优晨
01-17 590
为什么要用事件委托： 一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？ 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的
JS事件代理（事件委托）
lplovewjm的博客
11-25 1032
本文详细讲解JavaScript中关于事件代理技术相关的内容以及源码实例的讲解。那么好，本文正式开始事件代理作为JavaScript中一种常用的技术，它主要价值是在于允许将子元素的事件处理程序绑定在父元素中，比如表格中的每一条数据对应表格就是子对父，而当我们想通过一个事件来绑定旗下所有条数据时，我们就可以通过调用table表格来实现这个功能，从而简化代码并且提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值