DOM事件总结
1.DOM事件:
DOM0: element.onclick=function(){}
DOM2: element.addEventListener(‘click’,function(){})
addEventer接受三个参数:
type
:事件名称,大小写敏感。listener
:监听函数。事件发生时,会调用该监听函数。useCapture
:布尔值,表示监听函数是否在捕获阶段(capture),默认为false
(监听函数只在冒泡阶段被触发)。该参数可选。
DOM3: element.addEventListener(‘keyup,function(){}) 与DOM2添加事件的方式一致,知识增加了鼠标、键盘事件
2.DOM事件模型:捕获和冒泡,IE只有冒泡
3.事件流:即事件是怎么触发的,分为三个阶段
- 第一阶段:从
window
对象传导到目标节点(上层传到底层),称为“捕获阶段”(capture phase)。 - 第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。
- 第三阶段:从目标节点传导回
window
对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)
DOM事件的捕获过程:window ->document->html(document.documentElement)->body(document.body)->…
4.event对象的常用方法
event.preventDefault() 阻止默认事件
stopPropagation():阻止事件的传播
stopImmediatePropagation() 如果某个元素有多个相同类的事件监听函数,则当事件触发时,多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 event.stopImmediatePropagation,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
event.target:当前事件目标,即触发事件的节点
event.currentTarget:当前绑定的事件
示例:使用事件代理,点击li标签时,e.target=li 而e.currentTarget始终是ul
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> var ul = document.querySelector('ul'); ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
5.事件代理
由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)
6.自定义事件
var event = new CustomEvent('build', { 'detail': 'hello' });
//也可以用 var event = new Event('build')来自定义事件
document.body.addEventListener('build', function (e) {
console.log(e.detail);
});
document.body.dispatchEvent(event); //触发事件
customEvent API接口https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent
7.IE事件模型和普通事件模型的区别
IE事件模型 | DOM事件模型 | |
监听事件 | element.atachEvent ("on"+type,handler); |
element.addEventListener(type,handler); element["on"+type]=handler; |
取消事件 | element.detachEvent("on"+type,handler); |
element.removeEventListener (type,handler); element["on"+type]=null; |
获取事件对象 | window.event | event |
获取事件目标 | event.srcElement | event.target |
取消事件的默认行为 | event.returnValue=false; | event.preventDefault(); |
取消事件的传播 | event.cancelBubble=true; //IE的event事件,阻止冒泡 | event.stopPropagation(); |
参考资料:http://javascript.ruanyifeng.com/dom/event.html
DOM事件总结的更多相关文章
- DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 你真的了解DOM事件么?
你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- DOM事件简介--摘自admin10000
Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...
- 从click事件理解DOM事件流
事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- [Xcode 实际操作]二、视图与手势-(6)给图像视图添加阴影效果
目录:[Swift]Xcode实际操作 本文将演示给图像视图添加阴影效果 import UIKit class ViewController: UIViewController { override ...
- Java的12个语法糖【转】
本文转载自公众号 Hollis 原创: 会反编译的 Hollis 侵权删 本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学 ...
- hdu 1695 GCD(容斥)
题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline int read() { , ...
- IP服务-6-SNMP
SNMP(简单网络管理协议) SNMP更为正式的说法是互联网标准管理框架(Internet Standard Management Framework).在这个协议架构中.被管理的设备(SNMP代理) ...
- JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果
利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...
- 【loj10064】黑暗城堡
#10064. 「一本通 3.1 例 1」黑暗城堡 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 上传者: 1bentong 提交 ...
- Codeforces Round #541 (Div. 2) B.Draw!
链接:https://codeforces.com/contest/1131/problem/B 题意: 给n次足球比分,求存在平局的机会. 思路: 结构体存储,unique后,判断是否有分数交叉. ...
- 100 Same Tree 相同的树
给定两个二叉树,写一个函数来检查它们是否相同.如果两棵树在结构上相同并且节点具有相同的值,则认为它们是相同的.示例 1:输入 : 1 1 / \ ...
- python学习之队列
import queue task_queue = queue.Queue() #创建队列
- [未读]编写可测试的JavaScript代码