学习JavaScript事件流和事件处理程序
本文全篇介绍了JavaScript事件流和事件处理程序，分享给大家供大家参考，具体内容如下
一、事件流
事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。
二、事件冒泡
即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div>Click</div> </body> </html>
当点击了页面中的div元素，那么这个click事件会按照如下顺序传播：
- div元素
- body元素
- html元素
- document对象
三、事件捕获
事件捕获的思想是最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达目标之前捕获它。
当点击了页面中的div元素，那么这个click事件则会按照如下顺序传播：
- document对象
- html标签
- body标签
- div标签
虽然规范要求事件应该从document对象开始传播，但浏览器一般都是从window对象开始捕获事件的。因为老版本浏览器不支持，所以一般都使用事件冒泡。
四、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
在DOM事件流中，实际的目标在捕获阶段不会接收事件。就是说在捕获阶段，事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段，于是事件在div中发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生。IE8及更早的版本不支持DOM事件流，浏览器在捕获阶段触发事件对象上的事件，结果就是有两个机会在目标对象上面操作事件。
五、事件处理程序
事件就是用户或浏览器自身执行的某种动作；事件处理程序（或事件侦听器）就是响应某个事件的函数。事件处理程序的名字以“on”开头，如onload、onclick等。
六、HTML事件处理程序
若要在按钮被单击时执行一些js代码，可以这样编写：
<div onclick="alert('Clicked')">Click</div>
注意：不能在其中使用未经转义的HTML语法字符。
也可以调用在页面中其他地方定义的脚本：
<script>
function showMessage () {
document.write("fdas");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。
这样使用会创建一个封装着的元素属性值的函数。这个函数有一个局部变量event，也就是事件对象：
<input type="button" value="Click Me" onclick="alert(event.type)" />
其中，this值等于事件的目标元素，如：
<input type="button" value="Click Me" onclick="alert(this.value)" />
HTML事件处理程序存在众多问题，所以应该使用js指定的事件处理程序
七、DOM0级事件处理程序
要使用js指定事件处理程序，首先必须取得一个要操作的对象的引用。
每个元素都有自己的事件处理程序属性，这些属性通常全部小写，如onclick。如：
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log("hello");
}
</script>
使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行的；也就是this引用当前元素：
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log(this.type);
}
</script>
以上述这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除通过DOM0级方法指定的事件处理程序：
btn.onclick = null;
八、DOM2级事件处理程序
addEventListener()
该方法接收三个参数：要处理的事件名、事件处理程序函数和布尔值；布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。如：
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
还可以为该按钮添加多个事件处理程序，如：
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
btn.addEventListener("click", function () {
console.log(this.value);
})
removeEventListener()
var btn = document.getElementById("btn");
function info () {
console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样就可以最大限度地兼容各种浏览器。
以上就是关于JavaScript事件流和事件处理程序的全部内容，希望对大家的学习有所帮助。
相关推荐
-
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
在设计ExtJS应用程序时最常做的事情就是注册事件处理程序,因为在ExtJS的世界里,几乎完全由时间组成.因此,ExtJS的设计者使注册事件变得非常容易(同时还提供了非常不容易的方式任你选择)--on/un,也就是上与下两种方式,或是addListener与removeListener,Element的所有子类都可以使用.例如有一个<div/>希望在用户按下时能够给予简单的反馈: <divid="happyDiv"class="happyStyle"
-
js使用函数绑定技术改变事件处理程序的作用域
第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程
-
JavaScript Event学习第三章 早期的事件处理程序
这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发明的.因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走,所以这里没有兼容性的问题.所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件. 注册事件处理程序 在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如: <A HREF="somewhere.html" onCli
-
Javascript 事件流和事件绑定
事件流 浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件.而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的. 冒泡型事件(Dubbed Bubbling) IE上的解决方案就是冒泡型事件(Dubbed Bubbling).冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 示例(1):点击我触发冒泡型事件流 示例(1)的XHTML代码结构:<span id="cnt0
-
详解JavaScript中的事件流和事件处理程序
事件流:分两种,IE的是 事件冒泡流 ,事件开始时从最具体的元素接收,逐级向上传播到较为不具体的节点(Element -> Document).与之相反的是 Netscape 的 事件捕获流 . DOM2级事件规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 大多数情况下都是将事件处理程序添加到事件流的冒泡阶段.一个 EventUtil 的栗子: var EventUtil = { addHandler: function(element, type, handler){ if
-
javascript下对于事件、事件流、事件触发的顺序随便说说
1.首先我们来了解几个概念,"事件","事件流","事件名称","事件处理函数/事件监听函数,也许是"老生常谈",知道的朋友可以越过. 事件: 事件是用户自身或浏览器进行的特定行为.如:用户点击 也就是常用的click事件 事件流:多个事件 按一定顺序触发 形成了事件流 事件名称:如上面所讲的click就是事件名 事件处理函数/事件监听函数(Dom的叫法)就是 事件触发后的处理函数,如obj.onclick=fn;函
-
轻松创建nodejs服务器（5）：事件处理程序
为了对不同请做出不同的反馈,我们引入一个事件处理器的模块. 该模块命名为 requestHandlers,我们先添加start() 和 upload()两个占位函数. requestHandlers.js 代码如下: 复制代码 代码如下: function start() { console.log("访问/star时调用这个."); } function upload() { console.log("访问/upload时调用这个."); }
-
javascript 事件处理程序介绍
1.DOM0级事件处理程序 将一个函数值给一个事件处理程序属性. 例如: 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" } 删除事件,btn.onclick = null; -----------------------------------------------------------------
-
JavaScript实现为指定对象添加多个事件处理程序的方法
本文实例讲述了JavaScript实现为指定对象添加多个事件处理程序的方法.分享给大家供大家参考.具体如下: 如果你希望对象点击的时候同时处理多个事情,可以使用下面的代码 /* Start of the multihandle Object...*/ function MultiHandle(owner){ var my_handlers = new Array(); var my_owner = owner; this.append = function(handler){ my_handle
-
浅谈Javascript事件处理程序的几种方式
事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q
-
js事件处理程序跨浏览器解决方案
本文实例为大家分享了js事件处理程序跨浏览器解决方案,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <input type="button" id="button1" va
-
JavaScript事件处理程序(事件侦听器)
我们知道,javascript与HTML之间的交互是通过事件来实现的,事件就是用户或浏览器自身执行的某种动作,比如click.mounseover.load--,而响应事件的函数就叫做事件处理函数(或事件侦听器). event util test var eventUtil = { addListener: function(element, type, hander) { if (element.addEventListener) { element.addEventListener(type
-
详解javascript跨浏览器事件处理程序
本文为大家分享了javascript跨浏览器事件处理机制,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨浏览器的事件处理程序</title> </head> <body> <input type="button" value=