DOM事件代码小结

以下代码出自《DOM Enlightenment》一书
1.三种事件形式

 <body onclick="alert('触发内联属性事件')">

     <div>click me</div>

 </body>

 <script>

 var div = document.querySelector('div');

 div.onclick = function() {

     alert("触发属性事件");

 };

 div.addEventListener('click', function() {

     alert('触发addEventListener');

 }, false);

 </script>

2.事件流程
先捕获后冒泡
捕获：从树主干到分支
冒泡：从树分支到主干

 <html>

     <body>

         <div>click me to start event flow</div>

     </body>

 </html>

 <script>

 // 捕获阶段 window

 window.addEventListener('click', function() {

     alert(1);

 }, true);

 // 捕获阶段 document

 document.addEventListener('click', function() {

     alert(2);

 }, true);

 // 捕获阶段 html

 document.documentElement.addEventListener('click', function() {

     alert(3);

 }, true);

 // 捕获阶段 body

 document.body.addEventListener('click', function() {

     alert(4);

 }, true);

 // 捕获阶段 div

 document.querySelector('div').addEventListener('click', function() {

     alert(5);

 }, true);

 // 冒泡阶段 div

 document.querySelector('div').addEventListener('click', function() {

     alert(6);

 }, false);

 // 冒泡阶段 body

 document.body.addEventListener('click', function() {

     alert(7);

 }, false);

 // 冒泡阶段 html

 document.documentElement.addEventListener('click', function() {

     alert(8);

 }, false);

 // 冒泡阶段 document

 document.addEventListener('click', function() {

     alert(9);

 }, false);

 // 冒泡阶段 window

 window.addEventListener('click', function() {

     alert(10);

 }, false);

 </script>

3.移除事件

 <body>

     <div>click to say hi</div>

 </body>

 <script>

 var sayHi = function() {

     alert('hi');

 };

 document.querySelector('div').addEventListener('click', sayHi, false);

 document.querySelector('div').removeEventListener('click', sayHi);

 document.body.addEventListener('click', function() {

     alert('hello');

 }, false);

 // 不是同一个回调，是不起作用的

 document.body.removeEventListener('click', function() {

     alert('hello');

 });

 </script>

4.事件状态对象

 <body>

     <div>click me</div>

 </body>

 <script>

 document.querySelector('div').addEventListener('click', function(event) {

     console.dir(event);

 }, false);

 window.addEventListener('load', function(event) {

     console.dir(event);

 }, false);

 </script>

5.监听函数this指向
this指向绑定事件的节点，即event.currentTarget属性

 <body>

     <div>click me</div>

 </body>

 <script>

 document.body.addEventListener('click', function(event) {

     alert(this);

     alert(this == event.currentTarget)

 });

 </script>

6.获取事件触发元素（事件源头）

 <body>

     <div>click me</div>

 </body>

 <script>

 document.body.addEventListener('click', function(event) {

     alert(event.target);

 });

 </script>

7.阻止默认事件

 <body>

     <a href="http://www.baid.com">链接</a>

     <input type="checkbox"/>

     <textarea></textarea>

 </body>

 <script>

 // 点击链接时，阻止跳转

 document.querySelector('a').addEventListener('click', function(e) {

     e.preventDefault();

 });

 // 点击复选框时，阻止选中

 document.querySelector('input').addEventListener('click', function(e) {

     e.preventDefault();

 });

 // 在文本框中尝试输入字符时，阻止输入（使用输入法时，不一定会触发keypress事件）

 document.querySelector('textarea').addEventListener('keypress', function(event) {

     event.preventDefault();

 });

 </script>

8.阻止事件冒泡

 <body>

     <div>click</div>

 </body>

 <script>

 document.querySelector('div').addEventListener('click', function(e) {

     alert('div');

     e.stopPropagation();

 });

 document.body.addEventListener('click', function() {

     alert('body');

 });

 </script>

9.阻止冒泡和其他相同事件监听器

 <body>

     <div>click</div>

 </body>

 <script>

 document.querySelector('div').addEventListener('click', function(e) {

     alert(1);

 });

 document.querySelector('div').addEventListener('click', function(e) {

     alert(2);

     e.stopImmediatePropagation();

 });

 document.querySelector('div').addEventListener('click', function(e) {

     alert(3);

 });

 document.body.addEventListener('click', function() {

     alert('body');

 });

 </script>

10.自定义事件

 <body>

     <div>click</div>

 </body>

 <script>

 var customEvent = document.createEvent('CustomEvent');

 // 参数是：name,bubble,cancelable,detail

 customEvent.initCustomEvent('hello', true, false,{

     msg: 'hello'

 });

 var div = document.querySelector('div');

 div.addEventListener('click', function() {

     alert('click');

     this.dispatchEvent(customEvent);

 })

 div.addEventListener('hello', function(e) {

     alert(e.detail.msg);

 })

 </script>

11.模拟鼠标点击事件

 <body>

     <div>自动触发</div>

 </body>

 <script>

 var div = document.querySelector('div');

 div.addEventListener('click', function() {

     alert('click');

 })

 var autoClick = document.createEvent('MouseEvent');

 // 参数是: name,bubble,cancelable,view,detail,screenx,screeny,clientx,clienty,ctrlkey,altkey,shiftkey,metakey,button,relatedTarget

 autoClick.initMouseEvent('click', true, true, document.defaultView,0,0,0,0,0,false,false,false,0,null,null);

 div.dispatchEvent(autoClick);

 </script>

12.事件委托

 <p>点击某个单元格</p>

 <table border="1">

     <tr>

         <td>row 1 col 1</td>

         <td>row 1 col 2</td>

     </tr>

     <tr>

         <td>row 2 col 1</td>

         <td>row 2 col 2</td>

     </tr>

     <tr>

         <td>row 3 col 1</td>

         <td>row 3 col 2</td>

     </tr>

     <tr>

         <td>row 4 col 1</td>

         <td>row 4 col 2</td>

     </tr>

 </table>

 <script>

 document.querySelector('table').addEventListener('click', function(event) {

     if (event.target.tagName.toLowerCase() == 'td') {

         alert(event.target.textContent);

     }

 });

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事件简介－－摘自admin10000
Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...
DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
HTML DOM 事件
HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户 ...

随机推荐

C. Friends
C. Friends 题意对于任一点,求到此点距离不超过6的节点数. 分析第一次dfs,形成一个以 1 为根的有向树,设 down[i][j] 为以i为根节点,距离 i 点距离不超过 j 的节点数 ...
Buffer深入分析
Buffer Buffer的类图如下: 除了Boolean,其他基本数据类型都有对应的Buffer,但是只有ByteBuffer才能和Channel交互.只有ByteBuffer才能产生Direct的 ...
深度解析 H.265 视频解决方案
又拍云上线了 H.265 从编码解码到 CDN 分发,完整的端到端的自适应解决方案:提供视频上传.视频存储.视频编码.视频分发适配.视频解码等功能.又拍云希望能以云服务的方式将大公司才能长期支付使用的 ...
IIC协议学习笔记
"移植"的重要性:并非所有的电路都得自己设计,到了一定阶段,"移植"也是一种学习能力.--CrazyBingo 转眼间期末又到了,最近开始了所谓的期末总预习,比 ...
list与Set、Map区别
1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉,(注意:元素虽然无放入 ...
android设计，图标等概述
作者:郦橙锦妖链接:https://www.zhihu.com/question/36813390/answer/87029428 著作权归作者所有,转载请联系作者获得授权. 简单复制,用于记录, ...
C# 中文在URL中的编码
UTF-8中,一个汉字对应三个字节,GB2312中一个汉字占用两个字节. 不论何种编码,字母数字都不编码,特殊符号编码后占用一个字节. //按照UTF-8进行编码 string tempSearc ...
js中替换字符串(replace方法最简单的应用)
replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也 ...
记一次调试串口设备Bug的经历
最近花了差不多1天的时间在折腾一个Bug,该Bug的表象如下: 这个Bug还特别独特,在开发电脑中无提示,在终端用户那里每次使用软件的时候都报这个.仔细思考了一下最近在源码中新添加的功能,没发现有啥特 ...
基于SSE实现的极速的矩形核腐蚀和膨胀（最大值和最小值）算法。
因未测试其他作者的算法时间和效率,本文不敢自称是最快的,但是速度也可以肯定说是相当快的,在一台I5机器上占用单核的资源处理 3000 * 2000的灰度数据用时约 20ms,并且算法和核心的大小是无关 ...

DOM事件代码小结

DOM事件代码小结的更多相关文章

随机推荐

热门专题