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

来源：互联网发布：淘宝网显示不了图片编辑：程序博客网时间：2024/05/18 09:05

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

阅读全文

0 0