addEventListener() 方法,监听事件,向一个元素添加多个事件处理程序。
第一个参数是事件的类型(比如 “click” 或 “mousedown”)。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。
事件冒泡
多个元素嵌套并调用同一个事件时,由内部子元素先触发事件,再触发父元素的事件。
<body>
<div id="box">
<button type="button" id="btn">按钮</button>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var btn = document.getElementById("btn");
// 事件冒泡,嵌套元素,子元素先触发,之后触发父元素,以此类推
btn.addEventListener("click",function(){
console.log("btn-------");
});
document.addEventListener("click",function(){
console.log("document-------");
});
box.addEventListener("click",function(){
console.log("box-------");
});
//使用外部函数时,嵌套元素,触发事件冒泡
/*
btn.onclick = function() {
console.log("btn-------");
}
box.onclick = function() {
console.log("box-------");
}
document.onclick = function() {
console.log("document-------");
}
*/
</script>
</body>
事件捕获
多个元素嵌套并调用同一个事件时,由父元素先触发事件,再内部子父元素的事件。
<body>
<div id="box">
<button type="button" id="btn">按钮</button>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var btn = document.getElementById("btn");
// 事件捕获,嵌套元素,父元素先被触发,之后触发子元素,以此类推
btn.addEventListener("click",function(){
console.log("btn-------");
},true);
document.addEventListener("click",function(){
console.log("document-------");
},true);
box.addEventListener("click",function(){
console.log("box-------");
},true);
</script>
</body>
阻止事件冒泡
使用event.stopPropagation()方法,终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。
<body>
<div id="box">
<button type="button" id="btn">按钮</button>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var btn = document.getElementById("btn");
btn.addEventListener("click", function(event) {
var event = event || window.event; //兼容性处理
//跨浏览器的事件对象
if (event.stopPropagation) {
//阻止事件冒泡
event.stopPropagation(); //非IE
} else {
//阻止事件冒泡
event.cancelBubble = true; //IE
}
console.log("btn-------");
});
box.addEventListener("click", function() {
//未使用event.stopPropagation()方法阻止事件冒泡
console.log("box-------");
});
document.addEventListener("click", function() {
console.log("document-------");
});
</script>
</body>
取消默认事件
方法一:使用event.preventDefault()方法
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。
<body>
<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a1">a1取消默认事件</a>
<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a2">a2未取消默认事件</a>
<script type="text/javascript">
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
// 取消默认事件:方法1 event.preventDefault()
a1.onclick=function(event){
var event = event || window.event; //兼容性处理
//跨浏览器的事件对象
if(event.preventDefault){
// 取消默认事件
event.preventDefault(); //非IE
}else{
// 取消默认事件
event.returnValue=false; //IE
}
console.log("a1-------取消了默认事件");
}
</script>
</body>
方法二:return false;
阻止事件继续传播,事件冒泡和默认行为都被阻止。
<body>
<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a1">a1删除</a>
<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a2">a2删除</a>
<script type="text/javascript">
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
// 取消默认事件:方法2 return false
a1.onclick = function() {
console.log("a1-------取消了默认事件");
return false; //事件处理函数会取消事件,不再继续向下执行。比如表单将终止提交。(阻止事件继续传播,事件冒泡和默认行为都被阻止。)
}
</script>
</body>