一 介绍
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>
三 运行结果
相关推荐
事件委托是一种优化事件处理的技术，其核心思想是不直接为每个子元素绑定事件处理器，而是将事件处理器绑定到父元素上，利用事件冒泡机制来处理子元素的事件。这种方式可以减少事件处理器的数量，提高性能。 ```...
`bind()`方法允许开发者为指定的DOM元素绑定一个或多个事件处理器，并且支持事件委托和自定义命名空间事件绑定等功能。 #### 二、基本语法与用法 `bind()`的基本语法如下： ```javascript $(selector).bind...
2. 在右侧的“Event Listeners”页签中，可以看到该元素上所有绑定的事件及其对应的处理器。 3. 对于原生绑定的事件，可以点击“Show Function Definition”查看源码位置。 4. 对于jQuery绑定的事件，可以查看...
本文将深入探讨如何解决"Virtual-dom-event-binding-issue"，即如何使虚拟DOM的事件绑定正常工作。 一、虚拟DOM的基本原理 虚拟DOM是一种轻量级的数据结构，它代表了实际DOM的结构。当状态改变时，虚拟DOM会计算出...
然而，在某些场景下，比如动态添加元素到DOM中并给这些元素绑定事件时，我们可能会遇到事件绑定多次的情况，即同一个事件处理器被重复执行多次。这通常是因为DOM元素在绑定事件时已经存在，且之前的事件处理器仍然...
这是Jquery中的一个非常重要的方法，它确保了绑定事件的代码只会在DOM完全加载后执行，避免了因文档未完全加载而导致的脚本错误。 在总结上述知识点的同时，我们还应该注意一些常见的开发实践。例如，为了提高代码...
这样的好处是，无论未来有多少新的子元素被添加到父元素中，都不需要额外为它们绑定事件处理器，因为事件会冒泡到父元素然后由父元素统一处理。 事件委托的优点是明显的：它减少了事件处理器的数量，降低了内存消耗...
对于事件绑定，Vue.js会自动根据组件的状态和模板渲染出正确的事件处理器，并且在组件销毁时自动解绑这些事件处理器。 在实际开发中，动态生成DOM和自动绑定事件是一个常见的需求，尤其是在处理动态表单、列表或...
在后续的开发过程中，为了添加新的功能，再次为同一按钮绑定了相同的事件处理器。这种情况下，当用户点击该按钮时，警告信息会被连续弹出两次，显然这不是期望的结果。 ```javascript // 第一次绑定 button....
当页面上有父子关系的DOM元素分别绑定了多个事件处理器，且这些事件处理器分别在捕获阶段和冒泡阶段时，其执行顺序可能会让人困惑。因此，理解DOM事件的传播机制以及如何控制事件监听的执行顺序对于进行有效和正确的...
1. **事件绑定**: 可以使用`addEventListener`方法将事件处理器绑定到DOM元素，例如：`element.addEventListener('click', function() { /* 执行代码 */ })`。 2. **事件冒泡与事件捕获**: 事件通常会从最深的节点...
使用v-on:click可以为元素绑定事件处理器，从而在用户与页面交互时执行相应的函数。在Vue中处理点击事件时，我们常常需要获取被点击的DOM元素或者事件对象，以进行进一步的操作或数据处理。 在上述提供的内容中，...
在Angular4中，事件绑定是通过小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上。例如：(click)="onClickButton($event)">按钮绑定事件 属性绑定 在Angular4中，属性绑定是通过方括号将HTML标签的...
2. **事件处理器**：在Vue中，`v-on`指令用于绑定DOM事件监听器。当事件触发时，Vue会调用与之关联的方法。例如，`v-on:click`监听元素的点击事件，`v-on:keyup`监听键盘按键事件。在示例代码中，多个`<input>`元素...
随着Jquery版本的演进，live()和delegate()方法已经被on()方法所取代，因为on()方法提供了更灵活的方式来绑定事件处理器，尤其是对动态内容的处理。 2. 动态生成元素的事件绑定问题： Jquery在处理动态生成的元素时...
此外，还需要处理DOM0级事件处理程序的情况，即直接通过`element.onclick = handler`这样的方式绑定事件。修正这个问题后，封装的事件处理方法将在所有浏览器中都能正确执行。 为了确保代码的健壮性和跨浏览器兼容...
`bind()`方法是jQuery提供的一种事件绑定功能，它可以将一个或多个事件处理器函数绑定到选择器匹配的元素上。当指定的事件发生时，这些函数将会被调用。`bind()`的基本语法如下： ```javascript $(selector).bind...
然而，在实践中，有时候我们会遇到一些挑战，比如如何有效地绑定和解除匿名函数作为事件处理器的问题。 #### 匿名函数绑定事件的挑战 匿名函数因其简洁性而在事件绑定中被广泛使用，但同时也带来了一些问题。最典型...
- 绑定事件处理器：可以使用`.on()`方法来绑定事件处理器，也可以使用`.click()`等直接绑定。 - 删除事件处理器：使用`.off()`方法来移除绑定的事件处理器。 - 事件对象：在事件处理函数中，jQuery传递一个事件对象...