DOM事件机制进一步理解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
margin: 30px auto;
background: #FDF73F;
}
#div2{
margin: 30px auto;
width: 80%;
height: 50%;
background: #B2FD5E;
}
#div3{
margin: 30px auto;
width: 80%;
height: 50%;
background: #FDA8C1;
}
#text {
width: 300px;
height: auto;
margin: 30px auto;
background: #cecece;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
<div id="div3">
div3
</div>
</div>
</div>
<div id="text">
<h3>DOM事件机制</h3>
<ol>
<li>三个阶段:向下捕获-目标阶段-向上冒泡。</li>
<li>同一DOM元素的捕获、冒泡事件谁先执行，取决与谁先在代码里面定义</li>
<li>事件代理(也叫事件代理)， 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。</li>
<li>javascript规范：addEventListener(event,fn)传入的对象如果有handleEvent则执行，否则没有意义</li>
</ol>
</div>
<script type="text/javascript">
// DOM事件机制
var div1 = document.getElementById('div1'),
div2 = document.getElementById('div2'),
div3 = document.getElementById('div3'),
text = document.getElementById('text');
var c = '';
//向下捕获-目标阶段-向上冒泡, 同一DOM元素的捕获、冒泡事件谁先执行，取决与谁先在代码里面定义，如下面的div3
div1.addEventListener('click', function(e){
console.log('div1-bubbling')
}, false)
div2.addEventListener('click', function(e){
console.log('div2-bubbling')
}, false)
div3.addEventListener('click', function(e){
console.log('div3-bubbling')
}, false)
div1.addEventListener('click', function(e){
console.log('div1-capture')
}, true)
div2.addEventListener('click', function(e){
console.log('div2-capture')
}, true)
div3.addEventListener('click', function(e){
console.log('div3-capture')
}, true)
/*
div1-capture
div2-capture
div3-bubbling
div3-capture
div2-bubbling
div1-bubbling
*/
// 事件代理(也叫事件代理)， 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。利用冒泡
// 对div1进行监听，可以实现对子元素div2、div3点击事件的监听
div1.addEventListener('click', function(e){
console.log(e.target ) // e.target 事件属性可返回事件的目标节点（触发该事件的节点）
console.log(e.currentTarget) // 返回其监听器触发事件的节点
console.log(e.target.getAttribute('id'))
if(e.target.getAttribute('id') == 'div2'){
alert('元素为div2')
}
if(e.target.getAttribute('id') == 'div1'){
alert('元素为div1')
}
if(e.target.getAttribute('id') == 'div3'){
alert('元素为div3')
}
e.stopPropagation();
}, false)
// fn传入了object，作用域为object，具体处理在handleEvent里面
// javascript规范：传入的对象如果有handleEvent则执行，否则没有意义
var obj = {};
obj.a = 'a';
obj.handleEvent = function () {
alert(this.a)
}
document.addEventListener('click', obj)
</script>
</body>
</html>
DOM事件机制进一步理解的更多相关文章
- DOM事件机制
前言 本文主要介绍DOM事件级别.DOM事件模型.事件流.事件代理和Event对象常见的应用,希望对你们有些帮助和启发! 本文首发地址为GitHub博客,写文章不易,请多多支持与关注! 一.DOM事件 ...
- 深入理解DOM事件机制系列第三篇——事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...
- 系统学习DOM事件机制
本文将从以下几个方面介绍DOM事件: 基本概念:DOM事件的级别 DOM事件模型,事件流 描述DOM事件捕获的具体流程 Event对象的常见应用 自定义事件 DOM事件的级别 //DOM0 eleme ...
- DOM事件机制(事件捕获和事件冒泡和事件委托)
内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...
- DOM 事件机制&事件委托
一.事件机制 事件是在编程时系统内发生的动作或者发生的事情,系统会在事件出现的时候触发某种信号并且会提供一个自动加载某种动作的机制(来自MDN).每个事件都有事件处理器(有时也叫事件监听器),也就是触 ...
- DOM事件机制解惑(摘)--事件的传播机制
DOM事件流 为什么是有事件流? 假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button ...
- 从八道面试题看JavaScript DOM事件机制
As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一设置css .test2 { height: 50px ...
- 深入理解DOM事件机制系列第四篇——事件模拟
× 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
随机推荐
- 通过rem编写自适应移动端要点
直接上干货 1,dpr 苹果手机像素是2 普通安卓机是1 也就是说1像素下苹果需要的像素点是安卓机的两倍 所以一个需要15x15显示的图像安卓机仅需要提供15X15即可显示清楚 苹果手机需要要30X3 ...
- 引用对象的使用和易产生bug的示例
本文属原创,转载请注明出处:http://www.cnblogs.com/robinjava77/p/5481608.html (Robin) QuoteTest(引用对象技巧) import ja ...
- 采用TCP协议的PIC32MZ ethernet bootloader
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 趁热打铁,在上一PIC ...
- 逻辑运算符&&和&的区别 ||和|的区别
A:最终结果一样. B:&& 和 || 有短路作用,左边是false ,右边不执行.
- Oracle死锁处理
SELECT s.username,l.OBJECT_ID,l.SESSION_ID,s.SERIAL#, l.ORACLE_USERNAME,l.OS_USER_NAME,l.PROCESS,b.O ...
- 并发读写缓存实现机制(一)：为什么ConcurrentHashMap可以这么快？
大家都知道ConcurrentHashMap的并发读写速度很快,但为什么它会这么快?这主要归功于其内部数据结构和独特的hash运算以及分离锁的机制.做游戏性能很重要,为了提高数据的读写速度,方法之一就 ...
- MVC中Control和View之间数据传递的方式
1:ViewBag和ViewData 具体区别不做讨论,本处只演示ViewData的具体示例: Controler代码:ViewData["Employee"] = emp; Vi ...
- zt：synpify 综合，保持信号，时序处理
http://www.actel.com/kb/article.aspx?id=TT1002 Logic Replication vs. Preserve Attributes in Synplici ...
- Linux 之HTTP服务，APACHE
1.基础知识 HTTP:超文本传输协议,超链接URI:Uniform Resource Identifier,全局范围内唯一命名符MIME:Multipurpose Internet Mail Ext ...
- Solving “Dynamic Web Module 3.0 requires Java 1.6 or newer” in Maven Projects
不一定是在Maven Projects里才有这种情况,但解决方法是一样的. 转自:http://qussay.com/2013/09/13/solving-dynamic-web-module-3-0 ...