对js事件委托的了解
2018-07-30 本文已影响0人
于哈哈yhh
事件委托，顾名思义就是本事应该发生在a身上的事件，委托给b来执行。使用该技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器被添加在他们的父元素上，事件监听器会分析从子元素上冒泡上来的事件，并找到是哪个子元素事件。
通俗来讲： 事件有：onclick、onmouseover、onmouseout等等；委托呢，就是让别人来做，这件事情本身是加在元素上，然而你却加载别人身上来做，完成事件；
原理：
利用冒泡原理，将事件加在父级上触发，执行效果；
好处：
提高性能
新添加元素，可以直接拥有事件；
使用情景：
为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；
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 = '#fff';
}
}
}
事件委托的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;
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 = ' #fff';
}
}
}
事件委托的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');
}
})
})
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>这是第一个</li>
<li>这是第二个</li>
<li>这是第三个</li>
</ul>
<script>
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(ev);
console.log(this);
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 = '#fff';
}
}
}
</script>
</body>
</html>
文章由https://www.cnblogs.com/yc8930143/p/7270003.html更改而来，尊重作者的辛苦，在此说明
