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("-_-!!");
? ?