js-事件模型总结
三种事件模型：原始事件模型（DOM0），DOM2事件模型，IE事件模型；
不同点：
事件程序的注册（给HTML元素所对应的JS对象绑定事件）
事件传播的过程
事件模型的注册：
一、原始事件模型（没有兼容性问题）
原始事件模型的特点：
事件类型上面有ON（onclick）
没有事件的传播(事件一旦发生就立刻调用事件句柄)
一个DOM对象只能注册一个类型的事件，如果注册了两个，则会发生覆盖，只执行后一个事件；
注册：
1、将JS代码作为HTML的性质（也就是直接在标签中将HTML元素的性质设置为一段代码）
<input type="button" value="Press me" onclick="alert('thanks');"
2、将事件处理程序作为js对象的属性
<form name="f1"> <input name="b1" type="button" value="Press Me"/> </form>
document.f1.b1.onclick=function()
{
alert('thanks');
};
或者
function plead()
{
window.status="Please Press Me!";
}
document.f1.bi.onmouseover=plead;
（注意没有括号）
或者
显示调用：document.myfrom.onsubmit();
解除：
将null复制给事件函数：
document.getElementById('click'_).onclick = null;
浏览器可以对每个事件执行默认的动作：
–submit按钮默认行为是提交表单。
特例：对超链接mouseover的window.status显示事件的阻挡，是返回true
<a href="help.htm" onmouseover="window.status='help';return true;">help</a>
二：DOM2级（IE8以下不支持）
主要特点：有一个事件的传播过程
事件捕获：事件由document对象一直向下捕捉到目标元素
事件执行：目标对象的事件处理程序执行
事件冒泡：事件从目标元素上升到document
所有事件类型都会经历第一阶段，有的事件不会经历第三阶段（submit）
特点二：
一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。
eg：定义两个盒子，outer包含inner,给inner可绑定两个click事件，添加false表明在冒泡阶段调用函数，则先执行inner的click函数，再执行outer的click函数。
因为点击了里面的div后事件会经历三个阶段（document——outer——inner——document）
<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
<div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
var click = document.getElementById('inner');
click.addEventListener('click',function(){
alert('click one');
},false);
click.addEventListener('click',function(){
alert('click two');
},false);
</script>
注册：
[object].addEventListener('事件名称'，方法名（函数），事件模型（true/false）)
解除：
[object].removeEventListener('事件名称'，方法名（函数），事件模型（true/false）)
true/false决定在那个阶段调用函数
true:捕获
false:冒泡
停止传播：event.stopPropagation()
如果我们给outer和inner都注册了click事件但是我不希望outer执行怎么办呢？
<script>
var click = document.getElementById('inner');
var clickouter = document.getElementById('outer');
click.addEventListener('click',function(event){
alert('inner show');
event.stopPropagation();
},false);
clickouter.addEventListener('click',function(){
alert('outer show');
},false);
</script>
阻止默认动作：event.preventDefault()
由于事件捕获阶段没有可以阻止事件的函数，所以一般都是设置为事件冒泡。
三、IE模型
特点：Event对象不是事件处理程序的函数参数，而是window的全局变量
事件对象event：事件发生时产生的对象。封装了跟事件相关的信息。
div1.onclick = function(){
var e = window.event;
}
DOM得到事件对象
div1.onclick = function(ev){
var e = ev;
}
事件传播过程只有冒泡阶段
注册：
[object].attachEvent("onclick",click1)
解除：
[object].detachEvent("onclick",click1)
停止传播：window.ecent.cancelBubble=true;
event属性和方法
IE DOM
|
获取事件源 |
e.srcElement |
e.target |
|
获取字符码 |
e.keyCode |
e.charCode |
|
阻止默认行为 |
e.returnValue=false |
e.preventDefault() |
|
中止冒泡传播 |
e.cancelBubble=true |
e.stopPropagation() |
div1.onclick = function(e){
var ev = window.event||e;//获取事件对象
var srcObj = ev.srcElement||ev.target;
}
div1.onclick = function(ev){
var e = windo.event||ev;
}
function myaddEvent(obj,event,fn){//对象 ,事件,函数,
if(document.all){
obj.attachEvent('on'+event,fn);
}else{
obj.addEventListener(event,fn);//第三个参数默认为false（冒泡）
}
}
