1、引言
现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。(公司也不会容忍那么多员工站在门口就为了等快递);
这种事件委托还有个好处,就是即便公司又来很多员工,前台MM照样可以签收新员工的快递,新员工即便刚来但一样拥有拿自己快件的方法;
2、概念
通俗来讲: 事件有:onclick、onmouseover、onmouseout等等;委托呢,就是让别人来做,这件事情本身是加在元素上,然而你却加载别人身上来做,完成事件;
3、原理
利用冒泡原理,将事件加在父级上触发,执行效果;
4、好处
- 提高性能;
- 新添加元素,可以直接拥有事件;
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‘); } }) })
原文地址:https://www.cnblogs.com/ning123/p/10624674.html
时间: 2024-10-07 11:59:17