js事件模型

来源：互联网发布：java 方法是什么编辑：程序博客网时间：2024/06/07 05:04

一、事件流：

事件流意味着页面上不止一个元素可响应相同的事件。

如：当我们点击页面上的按钮时，实际上我们是点击了按钮，以及按钮的容器——整个页面。

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

1，事件冒泡(IE)。

2，事件捕获(NetsCape)。

3，DOM事件流(FireFox)。事件处理

二、事件处理程序：

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

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

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

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

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

或

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

div1.onclick=divClick;

注意：

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

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

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

二、在事件属性中指定

2、现代事件处理程序指派方法：

一、IE浏览器

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

//添加事件处理程序

div1.attachEvent("onclick",click1);

//删除事件处理程序

div1.detachEvent("onclick",click1);

function click1(){

alert("div1is click...");

}

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

二、DOM

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

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

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

//删除事件处理程序

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

function click1(){

alert("div1is click...");

}

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

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

三、事件类型：

一、鼠标事件

1，常见事件

–click

–dbclick

–mousedown

–mouseout

–mouseover

–mouseup

–mousemove
2，页面上所有元素均支持鼠标事件。

3，事件发生顺序

–单击：mousedown,mouseup,click

–双击：mousedown,mouseup,click,mousedown,mouseup,click,doubleclick

二、键盘事件：

1，常见事件

–keydown

–keypress

–keyup
2，通常在输入框上实现键盘事件。

3，返回false表示不响应该事件
4，事件发生顺序

–字符键：keydown,keypress,keyup

–非字符键：keydown,keyup
三、HTML事件：

1，常见事件

–load,unload

–abort,error

–select

–change

–submit

–reset

–resize

–scroll

–focus

–blur

0 0