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 ...
随机推荐
- 这些年正Android - 母亲
记得小时候,在自己写完一篇作文,完成母亲布置的任务后,就会搬走母亲正在使用的大椅子,面朝门前的马路,就这么憧憬的坐着,听着母亲给小孩打针时,小孩哇哇的哭声,努力的幻想着自己以后能做一个顶天立地的男子汉 ...
- linux pam 控制模式
工作类别(type).流程栈(stack)和控制模式(control) Linux-PAM 工作的"类别"(type) PAM 的具体工作主要有以下四种类别(type):accou ...
- js中array的filter用法
function bouncer(arr) { // Don't show a false ID to this bouncer. arr = arr.filter(function(val) { i ...
- java学习第18天（map集合）
Map集合是将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值. 存储的是键值对形式的元素,键唯一,值可以重复,有点类似于数据库中的主键加数据.主要功能有: A:添加功能 put ...
- NodeJs 连接mysql一例。
var mysql = require('mysql'); var connection = mysql.createConnection({ host :'127.0.0.1', user :'ro ...
- 一个C#语法高亮插件
语法高亮对程序员阅读代码来说有着不小的帮助,虽然VisualStudio本身支持C#语法高亮,但也只是对关键字.类名.字符串等少数元素加了标记,而我们代码中主题:变量.函数.属性.事件等都没有进行高亮 ...
- python开发 Day1 python基础
编程语言主要从以下几个角度为进行分类,编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言,每个分类代表什么意思呢,我们一起来看一下. 编译和解释的区别是什么? 编译器是把源程序的每一条 ...
- JavaScript编程总结
1. JS加载放在底部 2. JS和CSS合并,一个页面加载的JS和CSS越少越好 3. 尽量使用变量,页非全局变量. 4. 脚本和DOM交互越少越好,尽量批量修改. 5. 批量修 ...
- 原生js操作dom备忘
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 记录下最近项目中常用到的SQL语句
1 实现对字符串的Spilt功能. 比如查出“I have a dream!”总共有几个单词,需要以' '分割,然后再求出总数. ALTER function [dbo].[fc_SpiltStri ...