以下代码出自《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事件代码小结的更多相关文章

  1. DOM 事件深入浅出（二）

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  2. DOM 事件深入浅出（一）

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  3. DOM事件

    在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...

  4. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  5. 你真的了解DOM事件么？

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

  6. DOM事件简介－－摘自admin10000

    Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...

  7. DOM事件机制进一步理解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  9. HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户 ...

随机推荐

  1. poj2069

    poj2069 题意 求一个覆盖所有点的最小球体的半径.即求空间内一点到所有点的距离的最大值最小的点. 分析 模拟退火算法,但这道题竟然不用随机函数就能过了,主要体现了算法的渐近收敛性, 起始点随意取 ...

  2. java设计模式之 装饰器模式

    装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构. 这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装 ...

  3. ActionContext、ServletContext、pageContext的区别？

    ActionContext是当前的Action的上下文环境,通过ActionContext可以获取到request.session.ServletContext等与Action有关的对象的引用: Se ...

  4. C++函数调用的反汇编过程及Thunk应用

    x86汇编基础知识 1. 汇编常用寄存器 esp,(Extended stack pointer)栈顶指针.因为x86的栈内存是向下扩展的,因此当push入栈时,esp–.pop出栈时,esp++.e ...

  5. mysql之 MySQL 主从复制概述

    1 .主从复制简介MySQL 主从复制就是将一个 MySQL 实例(Master)中的数据实时复制到另一个 MySQL 实例(slave)中,而且这个复制是一个异步复制的过程.实现整个复制操作主要由三 ...

  6. html5shiv.min.js 和 respond.min.js 作用（bootstrap做IE低版本兼容时需要用到这两个插件）

    1. html5shiv.min.js解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min.js让不支持css3 Media Query的浏览器包括I ...

  7. matplotlib.pyplot.hist

    **n, bins, patches = plt.hist(datasets, bins, normed=False, facecolor=None, alpha=None)** ## 函数说明 用于 ...

  8. 软件开发项目云端All-In-One体验

    如今在软件开发圈里混,Agile,DevOps,Cloud是大家经常挂在嘴边的词,其实大家各自都有在应用层上的经验,但是如何把三者很好的结合起来,这是所有项目管理者困惑和需要的问题. Agile让我们 ...

  9. 关于MyEclipse修改项目名称后，部署到tomcat显示旧的项目名称

    问题:用Myeclipse部署项目的时候,     出现部署到tomcat下的项目是之前的项目,而不是当前的项目.   解决方案:工程名->右键->Properties->MyEcl ...

  10. jquery fadeIn用法

    $("#msgSpan").fadeIn("slow"); setTimeout('$("#msgSpan").hide("slo ...