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按钮默认行为是提交表单。

–超链接的默认行为是向指定资源发起请求。

-reset按钮默认行为是重置。。

-click单选按钮或复选框点击设置。

-keydown用户按下按钮。

-mousedown鼠标按下。

阻止默认动作：

事件处理程序可以通过返回false来阻止浏览器的默认行为

特例：对超链接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：事件发生时产生的对象。封装了跟事件相关的信息。

–鼠标信息

–键盘信息

　　IE得到的事件对象

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属性和方法

Dom和IE的event相同点。

–获取事件类型：e.type

–获取键盘码：keydown/keyup

–检测是否按下e.shiftKey,e.altKey,e.ctrlKey

–获取客户坐标:e.clientX,e.clientY

–获取屏幕坐标：e.screenX,e.screenY

Dom和IE的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;

}

 

事件类型：

 

鼠标事件

常见事件

–click  点击

–dbclick  双击

–mousedown  鼠标按下时

–mouseout  当光标在一个元素上，并且用户将其移出元素边界时

–mouseover 鼠标移入时

–mouseup 释放鼠标按钮时

–mousemove  当光标在你一个元素上时 重复发生

页面上所有元素均支持鼠标事件。

 

键盘事件

常见事件

–keydown  当用户在键盘上按下一个键时发生，如果用户按键不放，就会重复发生

–keypress  当用户在键盘上按下一个字符键（不包括shift和Alt键等）时发生，如果用户按键不放，也会重复发生

–keyup   当用户释放一个键时发生

通常在输入框上实现键盘事件。

返回false表示不响应该事件

事件发生顺序

–字符键：keydown,keypress,keyup

–非字符键：keydown,keyup

 

HTML事件

常见事件

–load,unload

–select

–change  失去焦点并且值被改变

–submit

–reset 

–resize 窗口或框架尺寸调整

–scroll 有滚动条时

–focus  获得焦点

–blur  失去焦点

 

 

兼容性问题：

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（冒泡）
    }
}