JavaScript—事件委托和Event事件监听器
事件委托实现步骤：
1、找到当前节点的父节点或者祖先节点
2、将事件添加到你找到的这个父节点或者祖先节点上
3、找到触发对象，判断触发对象是否是想要的触发对象，进行后续的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.backgroundColor = 'red';
}
}
var obtn = document.getElementById("btn1");
var i = 6;
obtn.onclick = function(){
var newNode = document.createElement("li");
newNode.innerHTML = i++ *1111;
oUl.appendChild(newNode);
}
}
</script>
</head>
<body>
<button id = 'btn1'>新增节点</button>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>
</html>
Event事件监听器
1、传统事件绑定
<1>重复添加，覆盖
<2>不能精确的删除事件上的某一个函数
2、事件监听器
addEventListener()
格式：node.addEventListener("click")
参数：
第一个参数 事件类型
第二个参数 绑定函数
第三个参数 布尔值 true 事件捕获
false 事件冒泡 默认
removeEventListener()
格式：node.removeEventListener
参数：
第一个参数 事件类型
第二个参数 删除函数名字
传统事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
alert("点击1");
}
oBtn.onclick = function(){
alert("点击2");
}
}
</script>
<body>
<button id="btn1">按钮</button>
</body>
</html>
点击按钮只有点击2
事件监听器
上面案列
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.addEventListener("click",function(){
alert("点击1");
},false);
oBtn.addEventListener("click",function(){
alert("点击2");
},false);
}
</script>
传统事件绑定举个列子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
aBtns[1].onclick = function(){
alert("原有的点击函数");
}
//下标为0
aBtns[0].onclick = function(){
aBtns[1].onclick = show;
}
//取消下标1按钮上的函数
aBtns[2].onclick = function(){
aBtns[1].onclick = null;
}
}
function show(){
alert("hello world");
}
</script>
<body>
<button>添加函数</button>
<button>按钮</button>
<button>删除函数</button>
</html>
事件监听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
aBtns[1].addEventListener("click",function(){
alert("原有的函数");
},false);
aBtns[0].onclick = function(){
aBtns[1].addEventListener("click",show,false);
}
aBtns[2].onclick = function(){
aBtns[1].removeEventListener("click",show);
}
}
function show(){
alert("hello world");
}
</script>
<body>
<button>添加函数</button>
<button>按钮</button>
<button>删除函数</button>
</html>
<script>
function addEvent(node, evenType, funcName){
if(node.addEventListener){
node.addEventListener(evenType,funcName,false);
}else{
node.attachEvent("on" + evenType,funcName);
}
}
function removeEventListener(node, eventType, funcName){
if(node.removeEventListener){
node.removeEventListener(eventType,funcName);
}else{
node.detachEvent("on" + eventType, funcName);
}
}
</script>