JavaScript事件模型

本章学习目标：

--事件模型介绍

--事件流

--事件处理程序

--事件处理程序的返回值

--event对象

--事件类型

 

事件的顺序即事件流。

不同的浏览器有不同实现事件流的方法。

事件冒泡(IE)。

事件捕获(NetsCape)。

DOM事件流(FireFox)。

 

事件冒泡：

事件捕获：

 

 

 

DOM事件流

 

 

事件处理程序

 

传统事件处理程序指派方法

–被广泛支持

现代事件处理程序指派方法。

–只被现代浏览器支持。

–浏览器之间存在不兼容的问题。

 

传统事件处理程序指派方法。

一、取得id = div1的元素节点。

var div1 = document.getElementById("div1"); 

//设置元素节点的onclick属性

div1.onclick = function(){alert("div1 被点了");}

或

function divClick(){alert(‘点中’);}

div1.onclick=divClick;

注意：

1、绑定事件处理程序时，后面不能加括号

2.必须确保在元素之后设置事件处理程序。

3.可在window.onload中指定处理程序。

二、在事件属性中指定

<div id="div1" onclick="alert("div1 被点了.");" ></div>

现代事件处理程序指派方法。

一、IE浏览器

var div1 = document.getElementById("div1");

//添加事件处理程序

div1.attachEvent("onclick",click1);//("事件处理程序的名称",函数)

//删除事件处理程序

div1.detachEvent("onclick",click1); 

function click1(){

  alert("div1 is click...");

} 

提示：可以在一个事件上添加多个事件处理函数。

二、DOM

var div1 = document.getElementById("div1");

//添加事件处理程序,true:捕获阶段; false:冒泡阶段

div1.addEventListener("click",click1,false);//("事件名称",函数,冒泡或捕获阶段)

//删除事件处理程序

div1.removeEventListener("click",click1,false);

function click1(){

  alert("div1 is click...");

}

提示：删除事件处理程序时，阶段要相同。

传统事件处理程序是在冒泡阶段添加的。

兼容性问题的解决

function myaddEvent(obj,event,fn){//对象 ,事件,函数,
    if(document.all){
        obj.attachEvent('on'+event,fn);
    }else{
        obj.addEventListener(event,fn);//第三个参数默认为false（冒泡）
    }
}

事件处理程序的返回值

利用事件处理程序的返回值，可以影响事件的默认行为。

–submit按钮默认行为是提交表单。

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

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

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

-keydown用户按下按钮。

-mousedown鼠标按下。

......

表单验证例子...

超链接例子。

<a href="a.html" onclick="return confirm('要跳转吗？')">a.html</a>

注意：是根据返回结果是true或false来确定是否执行默认行为。

event对象

事件发生时产生的对象。

封装了跟事件相关的信息。

–鼠标信息

–键盘信息

IE和DOM具有不同的实现方式

 

IE 得到事件对象；

div1.onclick = function(){

  var e = window.event;

}

DOM得到事件对象

div1.onclick = function(ev){

  var e = ev;

}

兼容性问题：

div1.onclick = function(ev){

  var e = windo.event||ev;

}

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  失去焦点