JavaScript--事件模型
1、HTML事件处理程序
1.直接在HTML中定义事件处理程序及动作：
<input type="button" value="Click" onclick="alert('click')">
2.在HTML定义事件处理程序，调用其他地方的执行函数：
<script>
function show(){
alert("hello world！");
}
</script>
<input type="button" value="Click" onclick="show()">
-
- 局部变量event就是指事件对象，onclick="alert(event.type)"弹出click事件
- this值等于时间目标元素，比如onclick="alert(this.value)",可以得到input的value值。
2、DOM0级事件处理程序
优势：简单、跨浏览器的
弱点：每次只能绑定一个事件，多次绑定会覆盖前面的事件。
<script>
var btn= document.getElementById("btn");
btn.onclick= function () {
alert("hello world！");
}
</script>
<input type="button" value="Click" id="btn">
删除DOM0级事件程序：
btn.onclick=null
3、DOM2级事件处理程序
定义了两个方法添加和删除事件处理程序：addEventListener()和removeEventListener();
都接受三个参数：事件名，事件处理程序的函数，布尔值
布尔值：参数是true，表示捕获阶段调用事件处理程序；参数是false，表示在冒泡阶段调用事件处理程序。
使用DOM2方法添加两个事件处理程序。
var btn=document.getElementById("btn");
btn.addEventListener("click", function () {
alert("helllo world");
},false);
btn.addEventListener("click", function () {
alert(this.id);
},false);
<input type="button" value="hello" id="btn"/>
通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除；移除的时候传入的参数与添加事件处理程序的参数相同。
var btn=document.getElementById("btn");
btn.addEventListener("click", function () {
alert("hello");
},false);
btn.removeEventListener("click", function () {//没有效果
alert("hello");
},false);
上面removeEventListener()中的参数，看似和addEventListener()所用的相同，实际不同。
var btn=document.getElementById("btn");
var handler=function () {
alert("hello");
}
btn.addEventListener("click",handler ,false);
btn.removeEventListener("click",handler,false);//有效
4、IE事件处理器
IE中也定义两个方法添加和删除事件处理程序：attachEvent( )和detachEvent( );
两个相同参数：事件名，事件处理程序函数
-
- IE11只支持addEventListener()和removeEventListener();和DOM的的弹出顺序一样。
- IE9和IE10对attachEvent( )和addEventListener( )都支持//下面的代码可以尝试
<input id="btn" type="button" value="click"/>
var btn=document.getElementById("btn"); btn.addEventListener("click",function () { alert("hello"); } ,false); btn.addEventListener("click",function () { alert("world"); } ,false);
使用attachEvent( )和detachEvent( )
<input id="btn" type="button" value="click"/>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function () {
alert("hello");
});
btn.attachEvent("onclick", function () {
alert("world");
});
删除事件处理程序：attachEvent添加的事件处理程序，必须通过detachEvent删除，参数必须一致。
同DOM一样，匿名函数无法删除，删除事件处理程序，代码可以这样：
var btn=document.getElementById("btn");
var handler= function () {
alert("hello world");
};
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick",handler);
作用域：在IE中的attachEvent()和DOM中的addEventListener( )主要区别也正于，作用域。
-
- DOM2或DOM0级的方法作用域在元素内部，this、值为目标元素。
- attachEvent( )方法，事件处理程序是在全局作用域，this==window
<input type="button" value="click" id="btn">//只能在IE10及以下才能运行
var btn=document.getElementById("btn");
var handler= function () {
alert(this==window);
};
btn.attachEvent("onclick", handler)
5、事件对象
bubble 表明时间是否冒泡
cancelable 表示是否可以取消事件冒泡的默认行为
currentTarget 其实事件处理程序当前正在处理时间的那个元素
defaultPrevented 为true表示已经调用了preventDefault( )(DOM3级事件中新增)
detail 与事件相关的细节
eventPhase 表示事件处于程序阶段：1、表示捕获阶段，2、表示“处于目标阶段，3、表示冒泡阶段
preventDefault( ) 取消事件默认行为。如果cancelable是true，则可以使用这个方法
stopImmediatePropagation( ) 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件新增）
stopPropagation( ) 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
target 事件目标
trusted 为true表示浏览器生成，为false表示事件由开发人员通过javascript创建(DOM3级事件中新增)
type 被触发的事件类型
view 与事件关联的抽象视图，等同于事件的window对象
dom.dispatchEvent():模拟事件中触发事件
6、DOM 事件流
DOM2级事件规定事件流包括三个阶段： 事件捕获阶段、处于目标阶段和事件冒泡阶段
这里借了个图。
假设我们点击了<div>元素，我们会按上图中的顺序触发事件 。
捕获阶段从document到<html>再到<body>后结束
然后就是“处于目标”阶段，最后一次返回document(冒泡阶段)
http://runjs.cn/detail/le6kbt1r //查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
#parent{
border: solid 1px black;
200px;
height: 200px;
}
#child{
border: solid 1px yellowgreen;
}
</style>
</head>
<body>
<div>
<ul>
<li id="parent">
我是parent
<span id="child">
我是child
</span>
</li>
</ul>
</div>
<script>
window.onload= function () {
var p=document.getElementById("parent");
var c=document.getElementById("child");
p.addEventListener("click", function () {
alert("parent捕获")
},true);
p.addEventListener("click", function () {
alert("parent冒泡")
},false);
c.addEventListener("click", function () {
alert("child捕获")
},true);
c.addEventListener("click", function () {
alert("child冒泡")
},false);
};
</script>
</body>
</html>
-
- 点击parent，先在document上，然后到parent上捕获到事件，处于目标阶段event.target==parent触发捕获事件，就是current.Target==target,理解为到底开始冒泡
- 点击child，从document到parent再到child事件目标，就会先触发parent捕获事件，child捕获事件，然后冒泡从child到parent再到document，依次触发，child冒泡，parent冒泡。