1<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JS事件</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
div{
width:300px;
border:1px solid blue;
padding:10px;
}
</style>
</head>
<body>
<!-- 事件代理 -->
<ul id="nav">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<!-- 测试事件冒泡 -->
<div id="div1" style="height:100px;">
<div id="div2" style="width:280px;height:80px;">
<div id="div3" style="width:260px;height:60px;">
<input id="btn1" type="button" value="事件冒泡" />
</div>
</div>
</div>
<br />
<!-- 测试事件捕获 -->
<div id="div4" style="height:100px;">
<div id="div5" style="width:280px;height:80px;">
<div id="div6" style="width:260px;height:60px;">
<input id="btn2" type="button" value="事件捕获" />
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
事件代理,听起来有点高大上,其实比较屌丝.
*/
/*
每注册一个事件,都会需要耗费一点内存,理论上注册的事件越多,可能会越卡.
根据事件的冒泡特性,给目标元素的父元素注册事件,这种方式就是事件的代理.
*/
var ul = document.getElementById("nav");
//给ul绑定事件
ul.onclick = function(evt){
evt = evt || event;
//currentTarget始终是监听事件者,而target是事件的真正响应元素
var ele = evt.target;
var text = ele.innerHTML;
//只要再这里根据获取到不同的li,做不用的处理,就可以通过一个事件处理多个元素事件.
console.log(text);
}
/*
简单的事件代理就这样了,通常需要用事件代理的元素有ul,table等.
比起事件代理,更有意思的是js事件的捕获,冒泡原理.
js的事件并不是点击某个地方,然后某个地方就响应事件,js事件是以事件流的形式存在的.
就是说当你点击了某个地方,网页的最外层document或者window会先捕获到事件,
然后根据元素的父子层级一级一级网上捕获,直到点击的目标元素,
然后从目标元素一级一级再往回冒泡,直接最外层document或者window.
不同浏览器捕获事件的最外层对象不一致,这不要紧,因为网页的可视范围都是body内.
所以接下来我们都当做事件都是从body开始(这是错的哈,理解就好).
*/
//给所有的div都注册点击事件
var div = document.getElementsByTagName("div");
for(var i = 0,len = div.length; i < len; i++){
div[i].onclick = function(evt){
evt = evt || event;
var ele = evt.currentTarget;
var id = ele.id;
ele.style.border = "1px solid red";
//alert可以暂停js运行进程,可以更直观的看到事件冒泡流程.
alert("暂停一下,点击事件冒泡到了" + id);
};
}
//注册按钮点击事件
var btn1 = document.getElementById("btn1");
btn1.onclick = function(evt){
evt = evt || event;
var ele = evt.currentTarget;
ele.style.border = "1px solid red";
alert("暂停一下,目标按钮响应了事件.");
}
/*
点击事件冒泡按钮,事件先后响应了btn -> div3 -> div2 -> div1.
这就是事件冒泡的过程,从目标对象根据层级关系一级一级往外冒泡.
这也从侧面反应了一个问题,直接在属性上绑定是事件是响应的冒泡阶段.
*/
/*
事件捕获流程
*/
//给所有的div都注册在捕获阶段响应事件
var div = document.getElementsByTagName("div");
for(var i = 0,len = div.length; i < len; i++){
if(document.addEventListener){
div[i].addEventListener("click",function(evt){
evt = evt || event;
var ele = evt.currentTarget;
var id = ele.id;
ele.style.border = "1px solid red";
//alert可以暂停js运行进程,可以更直观的看到事件冒泡流程.
alert("暂停一下,点击事件被" + id + "捕获到了.");
},true);//传入true,响应捕获事件
}
}
//注册捕获按钮点击事件
var btn2 = document.getElementById("btn2");
if(document.addEventListener){
btn2.addEventListener("click",function(evt){
evt = evt || event;
//阻止事件冒泡
//evt.stopPropagation();
var ele = evt.currentTarget;
ele.style.border = "1px solid red";
alert("暂停一下,目标按钮响应了事件.");
},true);
}
/*
点击事件捕获按钮,事件先后响应了div4 -> div5 -> div6 -> btn2.
但是事件并没有停,会继续响应冒泡过程btn2 -> div6 -> div5 -> div4.
这就是js事件流的整个过程,先是目标元素最外层的元素/对象捕获到事件,然后一级一级往内捕获,
直到目标元素,然后从目标元素在一级一级的往外冒泡到最外层元素/对象.
事件代理就是利用了事件的冒泡过程,给目标元素父元素注册事件,然后通过子元素冒泡到父元素.
*/
/*
如果要阻止事件的冒泡过程,不同的浏览器方法不同.
标准的w3c使用event.stopPropagation().
ie使用event.cancelBubble = true;就可以了.
需要区分一下preventDefault()和stopPropogation()的区别,
preventDefault()是用来阻止浏览器的默认行为,比如点击a会跳转,滚动鼠标滑轮页面会滚动等.
在ie下return false = stopPropagation() + preventDefault().
*/
/*
知识点:
1.事件流就是事件的捕获->目标->冒泡整个过程.
2.需要绑定大量事件对象的对象,可以使用事件代理优化效率.
3.事件流是可以阻止的.
*/
</script>
相关推荐
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
JavaScript（简称JS）...总的来说，JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念，开发者能够创建出更加丰富、响应迅速的Web应用程序。
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
JAVASCRIPT 实现OPTION的事件触发
JavaScript事件是网页中发生的特定情况，例如鼠标点击、键盘按键或者页面加载完成。通过事件监听器，我们可以在这些事件发生时执行相应的代码。常见的事件包括： 1. click：鼠标点击事件 2. keydown/keyup：键盘...
JS事件触发大全是指在 JavaScript 中各种事件的触发机制，这些事件可以在不同的元素上触发，例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理，以便执行特定的操作。 事件类型 1. 鼠标...
这个实例主要涉及的关键词是“js”（JavaScript）、“ASP”（尽管在这个上下文中并不直接相关，但可能是用户提及的一个相关技术栈）、“web”（Web开发）以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...
如何给javascript js事件传递参数.zip
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
无论是实现基于事件的动画效果、验证用户输入、还是其他依赖于事件触发的场景，了解如何在JavaScript中模拟触发这些事件都是一个非常有用的技能。 通过本文提供的示例和详细说明，相信读者能更好地理解JavaScript中...
本篇文章将深入探讨如何使用JavaScript来监听和处理键盘事件，以及如何结合jQuery库（如`jquery-1.2.6.js`）和第三方插件（如`jquery.hotkeys.js`）来增强键盘控制的功能。 一、原生JavaScript键盘事件 1. `...
全面，直观javascript的事件
### 知识点详解：JS捕获后台事件 #### 一、概述 在现代Web开发中，JavaScript（简称JS）是实现网页动态交互的核心技术之一。通过JavaScript，开发者可以为网站添加各种各样的功能和效果，提升用户体验。本文将重点...
Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4
"simplecalendar.js"是一款轻量级、易用且功能丰富的JavaScript日历插件，专为开发者设计，用于快速集成到各种Web应用中，实现事件记录与展示的功能。本文将深入探讨其核心特点、使用方法以及如何自定义和扩展。 一...
5. **事件处理**：事件驱动是JavaScript编程的重要特征，Ext JS3提供了丰富的事件模型，包括组件事件、数据事件等，通过事件监听和处理，可以实现组件间的通信和应用逻辑。 6. **表单处理**：Ext JS3的表单组件功能...
3. **发布事件**：当需要触发事件时，使用`fire`方法，可以传递数据到订阅者的回调函数： ```javascript myEvent.fire('myCustomEvent', { someData: 'Hello, World!' }); ``` 4. **解除订阅**：为了释放资源，...
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...