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. TensorFlow Slim 的常用操作

    https://blog.csdn.net/mzpmzk/article/details/81706379

  2. js 截屏保存图片

    html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas. 这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能: 核心代码如 ...

  3. CentOS -- RocketMQ HA & Monitoring

    RocketMQ Architecture NameServer Cluster Name Servers provide lightweight service discovery and rout ...

  4. 转载 江南一点雨 一键部署docker

    一键部署 Spring Boot 到远程 Docker 容器,就是这么秀!   不知道各位小伙伴在生产环境都是怎么部署 Spring Boot 的,打成 jar 直接一键运行?打成 war 扔到 To ...

  5. Codeforces 1058 D. Vasya and Triangle 分解因子

    传送门:http://codeforces.com/contest/1058/problem/D 题意: 在一个n*m的格点中,问能否找到三个点,使得这三个点围成的三角形面积是矩形的1/k. 思路: ...

  6. poj 3468 A Simple Problem with Integers（原来是一道简单的线段树区间修改用来练练splay）

    题目链接:http://poj.org/problem?id=3468 题解:splay功能比线段树强大当然代价就是有些操作比线段树慢,这题用splay实现的比线段树慢上一倍.线段树用lazy标记差不 ...

  7. Atcoder E - Meaningful Mean（线段树+思维）

    题目链接:http://arc075.contest.atcoder.jp/tasks/arc075_c 题意:问数组a有多少子区间平均值为k 题解:一开始考虑过dp,但是显然不可行,其实将每一个数都 ...

  8. codeforces 284 E. Coin Troubles（背包+思维）

    题目链接:http://codeforces.com/contest/284/problem/E 题意:n种类型的硬币,硬币的面值可能相同,现在要在满足一些限制条件下求出,用这些硬币构成t面值的方案数 ...

  9. CF937B Vile Grasshoppers

    Vile Grasshoppers time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  10. php preg_match pcre回溯绕过

    原理需要知识:正则NFA回溯原理,php的pcre.backtrack_limit设置. 正则NFA回溯原理正则表达式是一个可以被"有限状态自动机"接受的语言类."有限状 ...