DOM事件，就是浏览器或用户针对页面可以做出的某种动作，我们称这些动作为DOM事件。它是用户和页面交互的核心。当动作发生（事件触发）时，我们可以为其绑定一个或多个事件处理程序（函数），来完成我们想要实现的功能。

　　总结一下，事件有三个要素：事件源（是谁发生了事情），事件类型（发生了什么事），事件处理程序（怎么应对）。

　　为了方便理解下面即将要讲解的内容，在正式开始之前，让我们先来了解一个最常用的事件：click，点击事件：当我们用鼠标点击页面时，如果我们为页面绑定了事件处理程序（一般是一个函数），那么这时该程序将被执行。

　　这里先放一段HTML代码片段供讲解使用：

 <head>

     <style>

         .wrapper{width:400px;height:400px;background-color:red}

         .main{width:300px;height:300px;background-color:yellow}

         .content{width:200px;height:200px;background-color:green}

     </style>

 </head>

 <body>

     <div class="wrapper">

         <div class="main">

             <div class="content"></div>

         </div>

     </div>

 </body>

一 　事件处理程序的绑定和解除

　　1，  句柄

　　绑定：element.on+事件类型（type） = function (e){};

　　　　同一事件类型只能绑定一个事件处理程序，无兼容性问题。

 var wrap = document.getElementsByClassName("wrapper")[0];

 wrap.onclick = function (){

    alert("wrapper");

 };//现在点击红色块将会弹出提示框

　　解除：element.on+type = false/null/’’；

 wrap.onclick = null;

 //现在再点击红色块将不会再弹出提示框了

　　

　　2，  监听

　　绑定：element.addEventListener(事件类型,fn,boolean)

　　　　W3C标准方法，同一事件类型可以绑定一个或多个事件处理程序，IE老版本不兼容

 wrap.addEventListener("click",test,false);

 function test() {

     alert("wrapper");

 }

 //也可以在第二个参数的位置直接使用匿名函数

　　解除：element.removeEventListener(事件类型,fn,false)

wrap.removeEventListener("click",test,false);

//现在点击将不会再弹出提示框了

另外：IE有个独有的方法，obj.attchEvent(‘on’+type,fn),功能和监听方式一样。解除方式是：element.detachEvent(‘on’+type,fn)

注意，如果绑定的是匿名函数，则无法解除。

二 　　事件处理模型

1，事件捕获和冒泡

　　　　事件的触发其实分为两个阶段，捕获阶段和冒泡阶段。我们既可以把事件处理函数绑定在事件捕获阶段，也可以绑定在冒泡阶段。当某一事件被触发时，先执行捕获再执行冒泡。

事件捕获：当父元素的某类型事件被触发时，所有后代元素上绑定的同类型事件均会被层层触发。

         事件冒泡：当子元素的某类型事件被触发时，所有父元素上绑定的同类型事件均会被层层触发。

句柄方式绑定的事件都是在冒泡阶段，监听方式根据提供的第三个参数设置事件捕获或冒泡：true则在捕获阶段，false则在冒泡阶段。

 var main = document.getElementsByClassName("main")[0];

 main.addEventListener("click",function(){

     alert("main");

 },false);
 /*现在点击绿色区域会先弹出main，点击确认后再弹出wrapper。如果wrap和main绑定程序的第三个参数都是true，则会先弹出wrapper，后弹出main。
6 如果同一个元素在两个阶段都绑定了同一类型事件，则按照绑定的先后顺序执行*/

　　

　　2，事件对象

　　每当有事件被触发，浏览器都会记录当前事件触发的详细信息，并把它们封装成一个对象，可以传递给事件处理函数。IE浏览器有一点不同，它是把该对象存储在window.event里面，而不是直接传递给事件处理函数。

 main.onclick = function(e){

     ev = e || window.event;

 };

　　事件对象有许多属性和方法，比如点击事件有反映鼠标坐标的 screenX/screenY、clientX/clientY，键盘事件有检测 Alt、Ctrl 键的 altKey 和 ctrlKey等。 更多属性和方法请在控制台打印查看。

　　

　　3，阻止事件冒泡

　　　　有时候我们并不想让绑定的事件层层向上传递，只想被点击的那个元素执行相关任务，那么我们就需要通过事件对象阻止事件冒泡：　

 main.addEventListener("click",function(e){

   alert("main");

   e.stopPropagation();

 　//e.cancelBubble = true;IE的方法

 },false);

　　4，阻止事件默认行为

诸如点击submit类型的按钮，页面会提交表单、鼠标右键页面会出现右键菜单、点击a标签会跳转页面等等都是事件的默认行为，是浏览器预定义的处理程序，我们可以通过以下几种方式阻止它们。

return false；句柄方式绑定的事件处理程序才能实现。

e.preventDefault();W3C标准方式。

e.returnValue = false;兼容低版本IE浏览器。

 document.oncontextmenu = function (e){

     e.preventDefault();

     alert("现在右键点击不会出现菜单栏了")；

 };

　　5，事件委托

事件对象有两个属性：target或srcElement(IE)，它存储的是事件源对象，即实际触发该事件的对象。不是捕获的，也不是冒泡的。通过事件源对象，可以轻松实现事件委托功能。

事件委托的功能是：当子元素个数很多或不确定，且每个子元素都需要绑定执行类似功能的事件处理函数时，通过在父元素上绑定该事件处理函数，在函数内部获取事件源对象（某子元素），通过事件冒泡机制，确保能让每个子元素在被触发相应事件时，事件处理函数都能被正确执行。

 /*

 <ul>

     <li>1</li>

     <li>2</li>

     <li>3</li>

     <li>4</li>

     <li>5</li>

     <li>6</li>

     <li>7</li>

     。。。

 </ul>

 假如现在有这样一个列表，数目很多，而且还会动态更新，我们要实现的功能是点击每个li都弹出它自己的内容

 */

 var ul = document.getElementsByTagName("ul")[0];

 ul.onclick = function (e){

     var ev = e || window.event;

     target = ev.target || ev.srcElement;

     alert(target.innerText);

 };

 //这样就可以很简单的实现这个功能了，即使后面假如了新的li，点击新的li依然可是弹出正确的内容

三　　　　鼠标事件

　　1，  click：点击事件

　　等同于mousedown+mouseup，不管这两个事件间隔多久，都会触发一次click事件。

　　2，  mousedown：鼠标按下事件

　　3，  mouseup：鼠标弹起事件

　　4，  mouseover/mouseenter：鼠标移入事件

　　5，  mouseout/mouseleave：鼠标移出事件

　　　　注意：ES5添加的mouseenter和mouseleave阻止了事件冒泡。

　　6，  mousemove：鼠标移动事件

　　7，  contextmenu：右键出现菜单事件

　　8，  selectstart：选中文字事件

　　小技巧：通过事件对象的button属性可以判断鼠标左右键，0：左键；1滚轮；2,：右键。另外，click事件只能由左键触发，只有mousedown和mouseup可以触发右键点击事件。

四　　键盘事件

1，keydown：按键按下事件

　　　　可以检测所有按键，但不会返回字符编码。

         2，keypress：按键按下事件

　　　　只能响应字符类按键，可以返回字符的编码，charCode属性。

         3，keyup：按键弹起事件

五　　输入框事件

　

　　1，  input

　　每输入一次就会触发一次，即只要输入框的内容有变化都会触发该事件。

　　2，  change

　　聚焦和失去焦点两个时刻内容不同才触发。

　　3，  focus，获取焦点

　　当输入框获取焦点时触发

　　4，  blur，失去焦点

　　当输入框失去焦点时触发

DOM之事件（一）的更多相关文章

  1. jquery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...

  2. 关于动态生成dom绑定事件失效的原因

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...

  3. javascript 原生方法监听DOM结构改变事件

    js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...

  4. 5事件DOM零级事件跟DOM二级事件

    事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...

  5. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  6. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  7. AngularJS中的DOM与事件

      前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" ...

  8. 节点操作,节点属性的操作及DOM event事件

    ##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.ins ...

  9. jacascript DOM变动事件

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非 ...

  10. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

随机推荐

  1. N个tomcat之间实现Session共享（写的不错，转来的）

    以下文章写的比较不错,转来的. tomcat的session共享设置如此简单为什么很少人去用.这个我说的重点. 1.自身的session如果服务器不在同一个网段会有session失效(本人使用的是阿里 ...

  2. 为了完成这个功能，我竟然用5行代码制作了一个EXE可执行程序

    由于用户访问我们某个网址的路径比较长,最后我们确定了在桌面添加快捷入口的方案,让用户点击快捷入口直接进入直接的网址,而且这个快捷入口要带有指定的logo(排除了新建url快捷方式的方案),所以我决定写 ...

  3. 【转】python爬虫之腾讯视频vip下载

    本文转自如下:作者:jia666666 原文:https://blog.csdn.net/jia666666/article/details/82466553 版权声明:本文为博主原创文章,转载请附上 ...

  4. ASP.NET Core 2.2 : 二十七. JWT与用户授权（细化到Action）

    上一章分享了如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新,本章继续进行下一步,用户授权.涉及到的例子也以上一章的为基础.(ASP.NET Core 系列目录) 一.概述 ...

  5. HashMap原理。图文并茂式解读。这些注意点你一定还不了解

    目录 概述 属性详解 table entrySet size modCount threshold.loadFactor 源码知识点必备 getGenericInterfaces和getInterfa ...

  6. SpringCloud（二）- 服务注册与发现Eureka

    离上一篇微服务的基本概念已经过去了几个月,在写那篇博客之前,自己还并未真正的使用微服务架构,很多理解还存在概念上.后面换了公司,新公司既用了SpringCloud也用了Dubbo+Zookeeper, ...

  7. Keras（四）CNN 卷积神经网络 RNN 循环神经网络 原理及实例

    CNN 卷积神经网络 卷积 池化 https://www.cnblogs.com/peng8098/p/nlp_16.html 中有介绍 以数据集MNIST构建一个卷积神经网路 from keras. ...

  8. HDU5988 - 2016icpc青岛 - G - Coding Contest 费用流（利用对数化乘为加

    HDU5988 题意: 有n个区域,每个区域有s个人,b份饭.现在告诉你每个区域间的有向路径,每条路有容量和损坏路径的概率.问如何走可以使得路径不被破坏的概率最小.第一个人走某条道路是百分百不会损坏道 ...

  9. 用.NET写“算命”程序

    用.NET写"算命"程序 "算命",是一种迷信,我父亲那一辈却执迷不悟,有时深陷其中,有时为求一"上上签",甚至不惜重金,向"天神 ...

  10. Python作业本——第3章 函数

    今天看完了第三章,习题都是一些概念性的问题,就不一一解答了. 实践项目是创建一个Collatz序列,并且加上验证输入是不是一个整数. def collatz(number): if number % ...