DOM模型之事件操作
事件处理程序
. HTML事件处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Js
-</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">
</div>
<script>
function demo(){
alert("hello html
");
}
</script>
</body>
</html>
事件详解 事件处理
按钮</button>
事件处理
优点：书写简单
缺点：⽂件不分离，可复⽤性低
. DOM0级事件处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Js
-</title>
</head>
<body>
<div id="div">
<button id="btn1">
</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function(){alert("Hello DOM0
事件详解 事件处理
按钮
盖掉
btn1.onclick=function(){alert("Hello
</script>
</body>
</html>
级事件处理程序1");}//被覆
DOM0级事件处理程序2");}
优点：代码可分离，服⽤性⾼
缺点：事件会被覆盖
. DOM2级事件处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Js
-</title>
</head>
<body>
<div id="div">
<button id="btn1">
</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1(){
alert("DOM2
1")
}
function demo2(){
alert("DOM2
2")
}
function demo3(){
alert("DOM2
3")
}
btn1.removeEventListener("click",demo2);
</script>
</body>
</html>
事件详解 事件处理
按钮
级事件处理程序
级事件处理程序
级事件处理程序
缺点：格式复杂
优点：事件不会被覆盖
事件类型之⿏标事件
：按下⿏标时触发。
：在同⼀个元素上双击⿏标时触发。
：按下⿏标键时触发。
：释放按下的⿏标键时触发。
：当⿏标在⼀个节点内部移动时触发。当⿏标持续移动时，该事件会连续触发。为了避免
性能问题，建议对该事件的监听函数做⼀些限定，⽐如限定⼀段时间内只能运⾏⼀次。
mouseover：⿏标进⼊⼀个节点时触发
mouseout：⿏标离开⼀个节点时触发
click
dblclick
mousedown
mouseup
mousemove
Event事件对象
事件发⽣以后，会产⽣⼀个事件对象，作为参数传给监听函数。浏览器原⽣提供⼀个Event对象，所有的事件
都是这个对象的实例
<p id="para">Hello <em>World</em></p>
function hide(e) {
console.log(e.target);
}
para.addEventListener('click', hide);