1、JS事件详解-事件流
1.1、事件流
1.事件流：
描述的是在页面中接受事件的顺序
2.事件冒泡：
由最具体的元素接收，然后逐级上传播至最不具体的节点（文档）
3.事件捕获：
最不具体的节点先接收事件，而最具体的节点应该是最后接收事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button id="btn"></button>
<!--冒泡的方式
先点击btn第一接收的应该是按钮，
然后应该是包含他的div，再就是html标签，
最后应该就是html文档了 事件的捕获：
最先接收的是文档型接收，然后就是div接收，
最后才是最具体的button接收-->
</div>
</body>
</html>
2、JS事件详解-事件处理
1.HTML事件处理：
直接添加到HTML结构中
2.DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
注：只能添加一个事件处理程序；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){alert("DOM0级事件处理111");}
//第一个事件被覆盖。
// DOM0级事件处理程序只会处理最后一个事件处理程序
btn.onclick = function(){alert("DOM0级事件处理222");} // btn.onclick = null;/*将DOM0级事件处理程序清除*/
</script>
</body>
</html>
3.DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");
true:事件捕获
false:事件冒泡
removeEventListener();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",demo1);
btn.addEventListener("click",demo2);
btn.addEventListener("click",demo3); function demo1(){
alert("DOM2级事件处理程序1");
}
function demo2(){
alert("DOM2级事件处理程序2");
}
function demo3(){
alert("DOM2级事件处理程序3");
}
btn.removeEventListener("click",demo2);
</script>
</body>
</html>
DOM2级事件处理程序处理方便。
4.IE事件处理程序
attachEvent
detachEvent
这两个是比IE8低的版本使用的语句。
使用如下代码可解决问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn"); if(btn.addEventListener){ // alert("1");
// btn.onclick = demo();
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
alert("2");
btn.attachEvent("onclick",demo);
}else{
alert("3");
btn.onclick = demo;
}
function demo(){
alert("111");
} </script>
</body>
</html>
3、JS事件详解-事件对象
3.1、事件对象：
在触发DOM事件的时候都会产生一个对象
3.2、事件对象event
1.type：获取事件类型
2.target：获取事件目标
3.stopPropagation：阻止事件冒泡
4.preventDefault：阻止事件默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn">点击按钮</button>
<a id="aid" href="http://www.baidu.com">百度一下</a>
</div>
<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(){
alert(event.type);//顾名思义
alert(event.target);//顾名思义
event.stopPropagation();//阻止事件冒泡，否则还会触发点击div的事件
}
function showDiv(){
alert("div");
}
function showA(){
event.stopPropagation();
event.preventDefault();//阻止事件的默认行为
} </script>
</body>
</html>