1、事件流:
- 事件流描述的是从页面中接收事件的顺序,“事件冒泡流”由IE提出 ,“事件捕获流”由 Netscape 提出;
- 事件流包括三个阶段:事件捕获阶段、处于目标阶段(即触发事件的元素)和事件冒泡阶段。
- “DOM2 级事件”规范要求事件应该从 document 对象开始捕获阶段,但主流浏览器都是从 window 对象开始。
- “DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标(因为目标阶段被视为为冒泡阶段的一部分),但主流浏览器都会涉及;
2、事件冒泡(event bubbling):
- 由文档中触发事件的元素开始,逐级向上传播到window对象;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">事件冒泡</div>
</body>
<script>
window.addEventListener("click",function(){
console.log("window")
},false);
document.addEventListener("click",function(){
console.log("document")
},false);
document.documentElement.addEventListener("click",function(){
console.log("html")
},false);
document.body.addEventListener("click",function(){
console.log("body")
},false);
document.getElementById("div").addEventListener("click",function(){
console.log("div")
},false);
</script>
</html>
事件触发循序为:div==>body==>html==>document==>window
3、事件捕获(event capturing):
- 则与事件冒泡相反,从window对象逐级向下传播到触发事件的元素;(IE9以下老版本浏览器不支持事件捕获)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">事件捕获</div>
</body>
<script>
window.addEventListener("click",function(){
console.log("window")
},true);
document.addEventListener("click",function(){
console.log("document")
},true);
document.documentElement.addEventListener("click",function(){
console.log("html")
},true);
document.body.addEventListener("click",function(e){
console.log("body")
},true);
document.getElementById("div").addEventListener("click",function(e){
console.log("div")
},true);
</script>
</html>
事件触发循序为:window==>document==>html==>body==>div
4、阻止事件冒泡或事件捕获:
event.stopPropagation();
5、阻止浏览器默认行为:
/*方法一*/
return false;
/*方法二*/
event.preventDefault()
阻止a标签默认跳转行为
<a href="javascript:"></a>
<a href="javascript:void(0)"></a>
<!--void操作符会忽略操作数“0”的值,返回undefined,目的让程序更具语义;-->
阻止选中文字
document.onselectstart=new Function(“return false”)
阻止拖动图片
document.ondragstart=new Function(“return false”);