事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
</head>
<body>
<div id="mydiv">click me</div>
</body>
</html>
点击div,click事件会沿着div,body,html,document 的顺序传播
ie 的 事件流
事件捕获
事件捕获的处理办法和事件冒泡正好相反的。
点击div,click事件会沿着document,html, body,div的顺序传播
jquery 不支持事件捕获,也不建议在事件中添加事件捕获。
DOM事件流
DOM事件流包括三个阶段:
事件捕获,处于目标事件,事件冒泡的阶段
事件处理程序
方式一:
<div id="mydiv" onclick="alert('mydiv')">click me</div>
方式二:
<div id="mydiv" >click me</div>
<script>
var div = document.getElementById('mydiv');
div.onclick=function(){
alert('click me ');
}
</script>
方式三
var body = document.getElementsByTagName('body');
body[0].addEventListener('click',function(){
alert('body click');
},false)
注意点:
1. 智能通过removeEventListener 函数移除
2. 要移除的是同一个函数,如果添加的是匿名函数,那么无法移除(传一个函数名进去,在外面定义函数)
3. 第三个参数,false代表冒泡阶段,true代表捕获阶段
4.添加两个事件,按添加顺序执行
ie中的方式
body[0].attachEvent('onclick',function(){
alert('body click');
})
注意点:
1. 事件智能添加到冒泡阶段,
2. 参数onclick,不是click
3. 添加的函数有全局作用域
4. 必须用detachEvent()移除
5. 要移除的是同一个函数,如果添加的是匿名函数,那么无法移除
事件对象
body[0].addEventListener('click',function(event){
alert('body click');
alert(event.eventPhase);
},true)
传event,获取事件对象。
preventDefault(),取消事件的默认行为
stopPropagation(),阻止事件流
事件委托
绑定那么多事件在不同的对象上面,处理起来很困难,事件委托,就是为了解决这个问题,只指定一个事件处理程序,就可以管理某一个类型的所有事件。在事件内做判断。
事件移除
如果一个事件绑定在dom上,这个dom被销毁,很可能这个事件还在内存中,所以要在确定事件不用的时候手动消除事件
btn.onclick = null //就可以
模拟事件
模拟用户的事件,比如form表单的自动提交之类的。模拟用户行为