1、事件三要素:
事件目标(event target)
事件处理程序(event handler)
事件对象(event object)
2、事件流
事件冒泡
事件捕获
DOM事件流
事件捕获->直接事件本身处理程序->事件冒泡
3、事件绑定机制
1)html事件处理程序绑定
优点:绑定目标元素定位准确
缺点:代码耦合;事件处理程序声明的位置问题
<div onclick = "alert('hello')"></div>
2)DOM0级事件绑定
缺点:重新绑定事件时,之前的绑定事件被覆盖
var dom = document.getElementById('first');
dom.onclick = function(){
alert(1)
}
//事件解绑,此方法可以实现对应效果,但不太严谨
dom.onclick = null;
3)DOM2级事件绑定
优点:可以在不影响之前绑定的事件基础上,再绑定其他事件
缺点:IE8及以下浏览器不支持
var myFun = function(){
alert(1)
}
var dom = document.getElementById('first');
dom.addEventListener('click',myFun);
addEventListener()
事件绑定
参数:
要绑定的事件名
作为事件处理的函数
布尔值:true在捕获阶段调用事件处理程序;false在冒泡阶段调用
removeEventListener()
事件删除
参数:
要删除的事件名
作为事件处理的函数
布尔值:true在捕获阶段调用事件处理程序;false在冒泡阶段调用
例如:
//事件绑定
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id); //该函数在其依附的元素的作用域中运行。
},false);
//事件移除
var btn = document.getElementById("btn");
var handler = function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);//移除
可以添加多个事件处理程序,并且按照添加她们的顺序触发。移除事件传入的参数与添加处理程序时使用的参数相同,添加事件时如果使用匿名函数将无法删除
4、事件对象
event.target // 事件处理程序触发的源元素
event.currentTarget //事件处理程序执行的元素
this === event.currenTarget =>true
event.stopProgation() //阻止事件冒泡
event.preventDefault() //阻止事件的默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件绑定</title>
<style>
.parent {
width: 400px;
height: 300px;
background-color: cadetblue;
overflow: hidden;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: chocolate;
margin: 10px;
}
</style>
<script>
function myfun() {
alert('点击')
}
window.onload = function() {
// 1.获取需要绑定事件的dom节点
var parent = document.getElementById('parent')
// 2.给当前dom节点绑定事件
parent.onclick = function(event) {
console.log('this',this);
console.log('目标源元素',event.target);
console.log('当前触发事件元素',event.currentTarget);
console.log(this === event.currentTarget);
// console.log('点击了parent');
}
}
</script>
</head>
<body>
<div class="parent" id="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child">three</div>
</div>
</body>
</html>
<script>
window.onload = function() {
// 1.获取绑定事件的dom节点
var outer = document.getElementById('outer')
var center = document.getElementById('center')
var inner = document.getElementById('inner')
// 2.给目标节点绑定点击事件
var num = 0
outer.onclick = function(event) {
num = 3
// 阻止事件冒泡
event.stopPropagation();
console.log(num);
}
center.onclick = function(event) {
num = 2
// 阻止事件冒泡
event.stopPropagation();
console.log(num);
}
inner.onclick = function(event) {
num = 1
// 阻止事件冒泡
event.stopPropagation();
console.log(num);
}
}
</script>
<script>
window.onload = function() {
// 1.获取需要阻止默认行为的dom节点
var a = document.getElementsByTagName('a')[0]
var form = document.getElementsByTagName('form')[0]
// 绑定点击事件
a.onclick = function(event) {
// 阻止事件默认行为
event.preventDefault()
}
form.onclick = function(event) {
// 阻止事件默认行为
event.preventDefault()
}
}
</script>
5、事件代理(底层逻辑:事件冒泡)
父元素代替子元素执行事件
优点:
- 减少内存的使用(减少函数的使用)
- 可以监听动态元素