js学习-11（addEventListener事件监听）
发布时间
阅读量：
阅读量
事件绑定方式一：
都以点击事件为例
element.onclick = function(){
}例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>按钮</button>
<script type="text/javascript">
var btn = document.querySelector("button");
btn.onclick = function(){
var h1 = document.createElement("h1");
h1.innerHTML = "helloworld";
document.body.appendChild(h1);
}
//这样写的话，下面这个onclick事件就会替换上面的onclick事件，导致上面的onclick里面的操作不被执行
btn.onclick = function(){
document.body.style.backgroundColor = "skyblue";
}
</script>
</body>
</html>注意：
利用这种事件绑定的方式会导致之后的onclick事件会将之前的事件层叠。
事件绑定方式二：addEventListener事件监听
addEventListener是事件监听器，原事件在执行的时候，后面绑定的事件照样被执行。
这种事件绑定的方式不会出现层叠。（更适合团队开发）
语法：
element.addEventListener(事件，操作，true/false)
//true或者false代表的是冒泡或者捕获参数解释：
参数1：事件名（注意：点击事件是click，并不是onclick）
参数2：事件名（执行函数）
参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认）【重要！】
冒泡：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="parent">
<div class="child">
<button>
按钮
</button>
</div>
</div>
<script type="text/javascript">
var btn = document.querySelector("button");
var child = document.querySelector(".child");
var parent = document.querySelector(".parent")
var body = document.querySelector("body");
var html = document.querySelector("html");
//冒泡 addEventListener的第三个参数默认为false
btn.addEventListener("click",function(event){
console.log("btn listen");
event.xlTag = "btnEvent";
})
child.addEventListener("click",function(event){
console.log("child listen");
console.log(event);
})
parent.addEventListener("click",function(){
console.log("parent listen");
})
body.addEventListener("click",function(){
console.log("body listen");
})
html.addEventListener("click",function(){
console.log("html listen");
})
</script>
</body>
</html>捕获：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="parent">
<div class="child">
<button>
按钮
</button>
</div>
</div>
<script type="text/javascript">
var btn = document.querySelector("button");
var child = document.querySelector(".child");
var parent = document.querySelector(".parent")
var body = document.querySelector("body");
var html = document.querySelector("html");
//捕获 从下到上 addEventListener的第三个参数默认为false,改为true之后就变成了捕获
btn.addEventListener("click",function(event){
console.log("btn listen");
event.xlTag = "btnEvent";
},true)
child.addEventListener("click",function(event){
console.log("child listen");
console.log(event);
},true)
parent.addEventListener("click",function(){
console.log("parent listen");
},true)
body.addEventListener("click",function(){
console.log("body listen");
},true)
html.addEventListener("click",function(){
console.log("html listen");
},true)
</script>
</body>
</html>全部评论 (0)
还没有任何评论哟~