一 介绍
DOM提供了一种事件绑定机制，它提供的事件绑定方法是addEventListener(event, function, useCapture)，该方法三个参数
event：必需。描述事件名称的字符串。注意：不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
function:必需。描述了事件触发后执行的函数。当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认。事件句柄在冒泡阶段执行。
二 代码
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> DOM事件机制 </title>
</head>
<body>
<!-- 将测试的div元素 -->
<div id="test">
<!-- div元素的子元素：按钮 -->
<input id="testbn" type="button" value="单击我" />
</div>
<hr />
<div id="results"> </div>
<script type="text/javascript">
// 事件处理函数
var gotClick1 = function(event)
{
// 该事件处理函数简单输出事件的当前对象
document.getElementById("results").innerHTML +=
"事件捕获阶段: " + event.currentTarget + "<br />";
}
// 事件处理函数
function gotClick2(event)
{
// 该事件处理函数简单输出事件的当前对象
document.getElementById("results").innerHTML +=
"事件冒泡阶段：" + event.currentTarget + "<br />";
}
// 为testbn按钮绑定事件处理函数（捕获阶段）
document.getElementById("testbn")
.addEventListener("click" , gotClick1 , true);
// 为test对象绑定事件处理函数（捕获阶段）
document.getElementById("test")
.addEventListener("click" , gotClick1 , true);
// 为testbn按钮绑定事件处理函数（冒泡阶段）
document.getElementById("testbn")
.addEventListener("click" , gotClick2 , false);
// 为按钮所在的div对象绑定事件处理函数（冒泡阶段）。
document.getElementById("test")
.addEventListener("click" , gotClick2 , false);
</script>
</body>
</html>
三 运行结果
相关推荐
用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开源Javascript 书签，能提供绑定在DOM元素上的事件调试信息。Visual Event能显示如下信息： 1、哪一个元素有事件绑定 ...
3.可以通过绑定给函数传递参数，还可以传递通过变量$event给函数传递原生DOM事件。 <button v-on:click=counter += 1>增加1</button> 这个按钮被点击了{{counter}} <button v-on:click=great>...
最近在用svg的点击事件做...SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序（比如谷歌地图） •复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） •不适合游戏应用 做出的网页在
我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法： var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: ...
我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法： var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: ...
因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到朋友，如有不妥之处，希望指出、...
因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到各位朋友，文中如有不当之处，还望...
传统的js事件不支持多事件处理器绑定，尽管DOM level2提供了addEventListener方法，但是有些浏览器还不支持（IE），写了个支持多绑定的eventRouter，用起来很方便。
2、无须在JS里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。 3、当一个ViewModel被销毁时，所有的事件处理器都会自动被删除，无须担心自己如何清理它们。 事件处理步骤 1. 绑定...
可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。 hover是css中的选择器，用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接...
• 把所有事件处理函数置于文档就绪事件处理器中 • 把 jQuery 代码置于单独的 .js 文件中 • 如果存在名称冲突，则重命名 jQuery 库 jQuery 事件 下面是 jQuery 中事件方法的一些例子： Event 函数 绑定函数至 $...
jQuery事件处理 ready(fn) 代码： $(document).ready(function(){// Your code here…})； 作用：它可以极大地提高web应用程序的响应...作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到
书中的主题为XML基础，包括DTD、命名空间（namespace）、XML Schema和数据格式转换（Transformation） SAX应用程序编程接口，包括处理器接口、过滤器接口和写出接口 DOM应用程序编程接口，包括DOM第2层、第3层和DOM ...
书中的主题如下： XML基础，包括DTD、命名空间（namespace）、XML Schema和数据格式转换（Transformation） SAX应用程序编程接口，包括处理器接口、过滤器接口和写出接口 DOM应用程序编程接口，包括DOM第2层、第3层...
• 9.5.htm 简单的JavaScript事件绑定 • 9.6.htm 事件处理器的作用域 • 9.7.htm 事件处理器的作用域之二 • 9.8.htm 事件处理器的返回值 • 9.9.htm 自动触发事件 • 9.9...
提升DOM绑定代码的性能是困难的，因为问题通常来自布局和绘制成本，而不是实际的脚本执行开销。 Task Worklet尝试定义一种高度符合人体工程学的方式来卸载应用程序需要执行的，不依赖DOM的所有工作，同时使在UI线程...
书中的主题如下： *XML基础，包括DTD、命名空间（namespace）、XML Schema和数据格式转换 （Transformation） *SAX应用程序编程接口，包括处理器接口、过滤器接口和写出接口 *DOM应用程序编程接口，...
• 9.4.htm 简单的JavaScript事件绑定 • 9.5.htm 简单的JavaScript事件绑定 • 9.6.htm 事件处理器的作用域 • 9.7.htm 事件处理器的作用域之二 • 9.8.htm 事件处理器的...
6.3.htm 事件处理器绑定 6.4.htm 使用函数 6.5.htm 直接在表单上调用事件 第7章（\cha07） 代码说明：本章代码只能在Mozilla Firefox中运行。 7.1.htm 事件流 7.2....
45DOM事件处理器120 46基于DOM的模板121 习惯烦琐的语法121 ngRepeat和多个DOM元素122 不能在运行时修改的元素和属性123 自定义HTML元素与IE的老版本124 47使用过滤器处理模型变换124 内置过滤器125 格式化...