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 ...
随机推荐
- js中join函数的使用方法(js输出html标签)
var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>' + arr.join('</li ...
- 易语言5.6 精简破解版[Ctoo]
说明:本易语言5.6破解版 加入了[E剑终情]大神制作的完美通杀补丁,本人还修复了静态编译的问题. 关于静态编译失效的问题,大家解压之后会看到易语言根目录有一个"易言语静态编译配置工具&qu ...
- FreeMark学习（二）
(1)用户定义指令 宏和变换器变量是两种不同类型的用户定义指令,它们之间的区别是宏是在模板中使用macro指令定义,而变换器是在模板外由程序定义,这里只介绍宏 基本用法 宏是和某个变量关联的模板片断, ...
- 基于纹理的图片检索及demo（未启动）
基于纹理的图片检索及demo(未启动)
- C--变量的命名规则
规则1.标识符最好采用英文单词或其组合,不允许使用拼音. 规则3.当标识符由多个词组成时,每个词的第1个字母大写,其余全部小写: int CurrentVal; 规则5.对在多个文件之间共同使用的 ...
- pdo 整套类的封装，保存修改查询
<?php /** * */ class Db{ private $host = ''; private $port = ''; private $user = ''; private $pas ...
- [JS]Ext最新GPL版
https://www.sencha.com/legal/gpl/ Sencha Ext JS.Sencha Touch.Sencha GXT http://cdn.sencha.com/ext/gp ...
- 01HTTP服务&AJAX编程
HTTP服务&AJAX编程 一.服务器 1. 什么是服务器? 能够提供某种服务的机器(计算机)称为服务器. 2.服务器的分类: 1.按系统分类:Lin ...
- Apache 的ab压力测试工具
ab.exe -n 请求次数 -c 并发人数
- ubuntu文本模式/终端中文乱码解决
ubuntu文本模式/终端中文乱码解决 1.Alt+Ctrl+F1 进入第一个终端tty1,发现中文乱码. 2.安装zhcon. sudo apt-get install zhcon3 输入下面命令, ...