-
Notifications
You must be signed in to change notification settings - Fork 52
事件代理
LYF edited this page Sep 7, 2016
·
4 revisions
把事件代理到父元素上，当点击特定元素或特定元素的子元素时，触发handler
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试事件代理</title>
<style>
div{
font-size: 30px;
color:black;
}
.d{
width:600px;
height: 600px;
background-color: red;
}
.d2{
width: 500px;
height: 500px;
background-color: green;
}
.d3{
width: 400px;
height: 400px;
background-color: yellow;
}
.d4{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="d">
d1
<div class="d2">
d2
<div class="d3">
d3
<div class="d4">d4</div>
</div>
</div>
</div>
<script>
var addEvent = function(ele, type, handler, capture){
ele.addEventListener(type, handler, capture);
}
var isDelegate = function(e, selector){
var
ArrayClass = Array,
elements,
element,
i = 0,
target = e.target,
currentTarget = e.currentTarget,
makeArray = function(ele){
return typeof ArrayClass.from === 'function'? ArrayClass.from(ele):ArrayClass.prototype.slice.call(ele);
};
if(
typeof selector === 'string' // selector
){
elements = makeArray(currentTarget.querySelectorAll(selector));
}else if(
selector && selector.nodeType // element
){
elements = [ selector ];
}
else // dom数组/NodeList/HTMLCollection
{
elements = makeArray(selector);
}
while(element = elements[i++]){
if(element === target || element.contains(target)){
return true;
}
}
return false;
}
addEvent(document, 'click', function(e){
if(isDelegate(e, document.querySelectorAll('div.d3'))){
alert('代理到d3的事件触发了。实际点击的是:'+e.target.className);
}
});
</script>
</body>
</html>