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 ...
随机推荐
- 习课省市区的三级联动（cxselect的使用）
1,api:http://www.jq22.com/jquery-info32382,demo:http://blog.csdn.net/luo201227/article/details/38844 ...
- WEBPACK开始
这是一个非常简单的例子,通过这个例子你将学习到 1.How to install webpack 2.How to use webpack 3.How to use loaders 4.How to ...
- wampserver配置域名
装载自http://blog.csdn.net/znb26/article/details/51204313
- vs2012安装Microsoft.AspNet.WebApi.WebHost
工具---库程序包管理器---程序包管理器控制台:输入下面命令: Install-Package Microsoft.AspNet.WebApi.WebHost
- Jquery.cookie.js 源码和使用方法
jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...
- Datasnap Image
delphi用,不能与java.c#互相识别. procedure TServerMethods.UpdateDoc(ItemID : integer; doc : TStream); delphi用 ...
- javascript知识点总结----函数内部属性
在函数内部,有两个特殊的对象:argumengs和this 1.函数的参数 ECMAScript函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,也就是说:你定义的函数只接收2个参数, ...
- Winform 窗体控件随窗体自动（等比例）调整大小
新建窗体程序了,添加窗体事件Load(加载窗体时).Resize(调整控件大小时).自定义方法setTag(获取控件的width.height.left.top.字体大小等信息的值).setContr ...
- javascript对象引用与赋值
avascript对象引用与赋值 <script type="text/javascript"> //例子一: 引用 var myArrayRef = new Arra ...
- SQL Server 临时表的删除
--临时表与一般的表不同,它是保存到tempDb表中.临时表的表名与你所建的表名也不一样,因为他要为不同人的相同操作创建不同的临时表. --1.错误的删除操作: --错误的临时表删除操作,因为所在数据 ...