日期:2014-05-16  浏览次数:20508 次

js事件处理相关

js的事件模型是事件流模型,即意味着页面上不止一个元素响应相同的事件,当我们点击页面上的按钮时,实际上是点击了按钮,以及按钮的容器------整个页面。

对于IE,使用的是事件冒泡技术。其意思是从最内部点击的元素开始,向上触发到最外部(document 对象)。

而对于Netscape来说,使用称为事件捕获的解决方案。

如:

<!DOCTYPE html>

<html>

<head>

? ? <title></title>

</head>

<body>

? ? <input type="button" style="font-size: 18px" value="PLESE PUSH ME" onclick="c()"/>

</body>

</html>

事件冒泡 ?触发路径为:input->body->document

到了IE3.0, ?HTML元素也可以接收冒泡事件。触发路径为:input->body->html->document

Mozilla浏览器支持html元素上的事件。但是,事件也可以上升到不是DOM的一部分的windows对象。

? 触发路径为:input->body->html->document->window

事件捕获

Netscape 触发路径为:document->body->input

?

DOM事件流

DOM同时支持事件的捕获和事件的冒泡, 但是事件捕获先发生。

触发路径:windows->document->body->input->body->document->windows

? DOM事件有一个特色是,文本节点也可以触发事件(IE不行)。

?

事件处理:包括两个方面:传统事件处理和现代事件处理

? 传统事件处理:1、所有浏览器都支持 。2、只会执行最后的绑定事件,即执行单一事件

? (1)js中指定事件处理

? ? ? 匿名函数指定事件

<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME"/>

? ? <script>

? ? ? ? var obtn = document.getElementById("mybtn");

? ? ? ? obtn.onclick = function(){

? ? ? ? ? ? alert("====");

? ? ? ? }

? ?</script>?

?

? ?已有函数名

<script>

? ? function showmsg(){

? ? ? ? alert("-_-!!");

? ? }

</script>

<body>

? ? <input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME"/>

? ? <script>

? ? ? ? var obtn = document.getElementById("mybtn");

? ? ? ? obtn.onclick = showmsg;

?

? ? </script>

</body>

注意:1、绑定事件处理程序到事件属性时,只能引用函数的名称,后面不能加括号。加括号意味着马上执行函数,不用通过点击事件。

? ? ? ? ? ?2、不论函数的定义是怎样的,必须确保在XHTML元素被添加到DOM之前,登记事件处理程序,否则,将因为一个不存在的对象而得到一个错误。即最好不要将事件处理程序写在HTML标签后。

?

(2)XHTML标记中处理事件

<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" onclick="alert('-_-!!');"/>

??

注意:在传统事件处理中不可书写多个相同的事件,事件处理会覆盖,只执行最后绑定的事件:

<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" onclick="alert('-_-!!');"/>

? ? <script>

? ? ? ? var obtn = document.getElementById("mybtn");

? ? ? ? obtn.onclick = function(){

? ? ? ? ? ? alert("0_-!!");

? ? ? ? }

? ? </script>

运行结果只会执行最后绑定的第二个。这就是单一事件处理。

?

现代事件处理程序

1、兼容性不是很好。2、可以为每个事件指派多个事件处理。

(1)IE中

[object].attachEvent("事件处理程序的名称", 函数); // ?添加事件处理程序

[object].detachEvent("事件处理程序的名称", 函数); // 删除事件处理程序

如:

<script>

? ? function showmsg(){

? ? ? ? alert("-_-!!");

? ? ?}

? ? function showmsg2(){

? ? ? ? alert("0_-!!");

? ? }

</script>

<body>

? ? <input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" />

? ? <script>

? ? ? ? var obtn = document.getElementById("mybtn");

? ? ? ? obtn.attachEvent("onclick", showmsg);

? ? ? ? obtn.attachEvent("onclick", showmsg2);

? ? </script>

</body>

?

(2)DOM

[object].addEventListener("事件处理程序的名称", 函数, bCapture); // ?添加事件处理程序

[object].removeEventListener("事件处理程序的名称", 函数,?bCapture); // 删除事件处理程序

第三个参数是指程序是否用在冒泡或捕获阶段。

?

<script>

? ? function showmsg(){

? ? ? ? alert("-_-!!");

? ?