件流
JavaScript 的事件是以一种流的形式存在的，一个事件会有多个元素同时响应。有时候这不是我们想要的，我们只需要某个特定的元素响应我们的绑定事件就可以了。
事件分类
捕获型事件（非IE）、冒泡型事件（所有浏览器都支持）
捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面我用一个图来直观表示：
冒泡型事件我们在工作中可能会比较多遇到，但捕获型事件怎样才会执行到呢，如果我们想要在非 IE 浏览器中要创建捕获型事件，只需将 addEventListener 的第三个参数设为true就好了。
ID为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数，这样：
- 当点击#div1（蓝色区域）时，应该会alert出”div1″
- 当点击#div2（黄色区域）时，应该会先alert出”div1″，再alert出”div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
冒泡型事件例子：
04 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
06 |
<script type="text/javascript">
|
08 |
function Add(sText,objText)
|
10 |
document.getElementById("Console").innerHTML +=sText + "执行顺序：" + i + "<br />" + "<hr />";
|
17 |
<body onclick="Add('body事件触发<br />','body')">
|
18 |
<div onclick="Add('div事件触发<br />','div')">
|
19 |
<p onclick="Add('p事件触发<br />','p')" style="background:#c00;">点击</p>
|
21 |
<div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div>
|
从这个例子我们可以很清楚的看到事件冒泡是从目标元素 P 一直上升到 body 元素。
阻止事件冒泡
如下有一个函数兼容了 IE 和其它浏览器的阻止事件冒泡
1 |
function stopBubble(e) {
|
3 |
if ( e && e.stopPropagation )
|
8 |
window.event.cancelBubble = true;
|
在 IE 并没有 stopPropagation 方法，但我们可以通过 window.event.cancelBubble 来阻止事件冒泡。
监听函数
IE : attachEvent、detachEvent
非IE: addEventListener、removeEventListener
除了上面四个函数还有一个比较通用的方法是 document.getElmentById(元素ID).onclick = function(){}
事件对象
当触发事件，在监听函数执行函数里怎样才可以获取事件对象呢？在IE 中用window.event.srcElement而在非IE浏览器则用e.currentTarget
例代码：
01 |
btn.onclick = ctdClickEvent; |
03 |
function ctdClickEvent(e)
|
07 |
var readonly = "readOnly";
|
08 |
var obj = window.event.srcElement;
|
13 |
var readonly = "readonly";
|
14 |
var obj = e.currentTarget;
|
17 |
var id = obj.id.replace("btn_","");
|
19 |
if( obj.value=="此项改为不续费" )
|
分享到：
相关推荐
本文将深入解析Backbone.js的事件模型及其原理。 Backbone.Events是实现事件机制的核心，它提供了一套简单的API让任何对象都能具备处理事件的能力。例如，我们可以通过`_.extend({}, Backbone.Events)`创建一个新的...
本文详细介绍了React事件处理的概述、JSX中的事件处理、事件处理函数的创建、事件对象的传递、事件的冒泡机制、阻止事件默认行为、事件委托、事件处理的性能优化、合成事件（SyntheticEvent）、事件处理的高级用法、...
本文将详细解析JavaScript事件的几个关键点：异步回调、事件对象、`this`关键字以及事件冒泡的管理。 1. **异步回调**： 异步回调是JavaScript处理非阻塞操作的方式。例如，当页面加载完成后执行某些操作，我们...
JavaScript事件模型是JavaScript编程中处理用户交互和状态变化的核心机制。事件模型允许程序在特定条件满足时执行预定的代码，比如用户点击按钮、页面加载完成或数据发生变化等。本节将详细探讨JavaScript事件处理...
本文旨在深入探讨JavaScript的运行机制，特别是它的预解析特性、编译过程以及执行过程。 #### 二、预解析 预解析（Hoisting）是JavaScript的一个重要特性，它是指在代码实际执行之前，JavaScript引擎会先进行变量...
以下是对文章【javaScript事件机制兼容【详细整理】】中提及的知识点的详细解析。 首先，我们来了解添加事件监听的兼容性处理。在标准的W3C规范中，事件监听函数是通过addEventListener方法添加的，其语法为...
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段...
三、JavaScript内核解析 JavaScript的内核主要包括解释器和垃圾回收机制。解释器负责将JavaScript代码转化为机器可执行的指令，而垃圾回收则自动管理内存，避免内存泄漏。理解V8引擎的工作原理，如即时编译（JIT）和...
当用户进行特定的操作，如点击按钮、填写表单或滚动页面，JavaScript事件机制会触发预先定义的函数来处理这些行为。 一、事件类型 1. onclick：此事件在用户点击元素时触发，常用于按钮或链接等交互元素上。 2. ...
JavaScript事件循环机制是JavaScript执行模型的关键部分，它解决了单线程环境下异步编程的问题。由于JavaScript是单线程的，所有任务必须在一个线程上依次执行。为了处理异步操作，如网络请求或定时器，JavaScript...
Acorn是一个轻量级且高效的JavaScript解析器，主要用于解析JavaScript源代码。它是开源的，并且在JavaScript开发领域中被广泛用于构建工具链的组件，如编译器、linter（语法检查工具）以及代码分析工具。Acorn的核心...
在本项目中，我们将探讨如何利用FastAPI来实现一个Frida-RPC工具，该工具能够自动解析JavaScript文件并生成对应的API接口。 首先，我们需要了解FastAPI的基本概念。FastAPI是基于Python的ASGI标准构建的，它利用了...
JavaScript主要用于浏览器中的动态交互，例如操纵DOM和处理用户事件，而Java则是一种完全面向对象的编程语言，多用于服务器端开发。 JavaScript的核心特性包括其基于原型的面向对象模型、动态类型、函数作为一等...
理解事件循环机制和事件委托策略，能有效提高性能并避免回调地狱。 此外，JavaScript的异步编程模型，如Promise和async/await，是现代JavaScript开发不可或缺的部分。它们用于处理非阻塞I/O操作，使得代码更加线性...
3. **作用域和闭包**：解析了JavaScript中的变量作用域规则以及闭包的概念，这是解决许多复杂问题的基础。 4. **异步编程**：详述了事件循环、回调函数、Promise、async/await等异步处理方式，帮助开发者应对...
本文将深入解析Vue源码中的事件机制。 首先，当创建一个新的Vue实例（`new Vue()`）时，Vue会执行`initState`函数来初始化实例的各种属性，包括事件。`initState`会调用`initMethods`来初始化实例的方法。在这里，...
### JavaScript源代码：JQuery绑定事件四种实现方法解析 #### 一、`bind` 方法 - **概述**：`bind` 方法是jQuery中用于绑定事件处理程序的基本方式之一。它允许开发者为DOM元素绑定特定类型的事件处理器。这种方法...
通过深入了解**JavaScript** 中的事件处理机制，开发者不仅能够构建具有高度交互性的网页，还能够在不同浏览器之间实现更好的兼容性。掌握事件处理的核心概念和技术细节，对于任何前端开发者来说都是至关重要的技能...