对于JS事件处理分为四部分：

1.html事件处理程序

直接添加到HTML结构中

解析：用html处理程序可以直接在button元素里直接调用，但是维护性不是很方便

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

       <p id="pid">js事件处理程序</p>

       <button id="btn" onclick="demo()">点击</button>

       <script>

           function demo(){

               document.getElementById("pid").innerHTML ="html事件处理程序"

           }

       </script>

 </body>

 </html>

2.DOM 0级处理事件

把一个函数赋值给一个事件处理程序属性

解析：

1.调用ID属性获得事件元素，然后把事件处理程序赋值给——元素点式事件来调用

2.当再次用同样的事件的话，前面调用的处理程序将会被覆盖

3.利用元素.事件 = null ，可以清除事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

       <button id="btn">点击</button>

       <script>

           var btn = document.getElementById("btn") //调用ID属性获得button元素

           btn.onclick =function(){        //点击事件1

               alert("DOM 0级处理事件1")

           }

           btn.onclick = function(){        //点击事件2

               alert("DOM 0级处理事件2")

           }

           btn.onclick = null           //清除事件

       </script>

 </body>

 </html>

DOM2级事件处理程序

DOM2级事件处理程序

解析：

DOM2级一个元素用相同的两个事件调用不同方法时不会被覆盖

addEvenListener("事件"，“事件处理方法”)

e.target.type//获取事件目标的事件类型，返回值事件类型

e.target.stopPropagation();//阻止事件的冒泡方法

e.preventDefault()//清除元素的默认方法

elem.removeEvenlistener("事件","事件处理方法") //清除事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #div1{

             width:100px;

             height:100px;

             border: 1px solid gray;

         }

         #div2{

             width: 50px;

             height:50px;

             border:1px solid gray;

         }

     </style>

 </head>

 <body>

      <div id="div1">

          <div id="div2">DOM2级处理事件</div>

      </div>

      <a  id="aid" href="www.baidu.com">连接百度</a>

       <script>

           var div1 = document.getElementById('div1')

           var div2 = document.getElementById("div2")

           var a =document.getElementById("aid")

           div1.addEventListener("click",div1Style)

           div2.addEventListener("click",div2Style)

           div2.addEventListener("click",div3Style)

           a.addEventListener("click",aStyle)

           function div1Style() {

               this.style.background = "blue"

           }

           function div2Style(e) {

               alert(e.type)  //获取无素的事件类型

               alert(e.target.id)  //获取事件目标（元素）的ID

               e.stopPropagation()  //阻止父元素的事件冒泡

               this.style.background = "black"

           }

          function div3Style(){

               this.style.color = "red"

           }

           function aStyle(e){

               e.preventDefault()//清除元素的默认方法

           }

           div2.removeEventListener("click",div3Style)//清除事件

       </script>

 </body>

 </html>

4.针对IE8和IE8以下的游览器 attchEvent  detachEvent

当IE游览是IE8或者低于IE8时 使用attchEvent2级的DOM处理事件

detachEvent来清除处理事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

      <button id="btn">点击</button>

      <script>

          var btn = document.getElementById("btn")

          if(btn.addEventListener){

              btn.addEventListener("click",demo)

          }else if(btn.attachEvent){    //针对IE8 和 IE8以下的游览

              btn.attachEvent("onclick",demo)

          }else{                      //针对更老版本的游览器

              btn.onclick = demo()

          }

          function demo(){

              alert("hello")

          }

          btn.detachEvent("onclick",demo)  //针对IE8 和 IE8以下的游览 清除事件

      </script>

 </body>

 </html>

js事件处理 —— 详解的更多相关文章

  1. iOS开发——实用技术OC篇&事件处理详解

    事件处理详解 一:事件处理 事件处理常见属性: 事件类型 @property(nonatomic,readonly) UIEventType     type; @property(nonatomic ...

  2. js对象详解(JavaScript对象深度剖析，深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  3. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  4. JavaScript之事件处理详解

    一.事件传播机制 客户端JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型.当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web浏览器就会产生事件(event).如果Jav ...

  5. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

  6. JS 面向对象详解

    面向对象详解1 OO1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. 开胃小菜——impress.js代码详解

    README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...

  8. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  9. 值得收藏的js原型详解

    从虚无到Object 起初,地是空虚混沌,渊面黑暗:这时候一切还是null 神说,要有原型,于是就有了prototype 原型从凭空产生,于是需要一个指向于null的特征,人们把这种特征叫做隐式原型, ...

随机推荐

  1. OpenStack网络的前世今生

    声明: 本文转自OpenStack中国社区,原文链接:http://www.openstack.cn/p353.html,作者Joshua,转载请注明. 在OpenStack世界中,网络组件最初叫no ...

  2. ZOJ 3761 Easy billiards 月赛E DFS

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3761 题目大意:给定n个位置的小球,小球的运动方向只能是水平或者 ...

  3. 天津Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. java对Ldap操作2

    package ldap.pojo;import java.util.List;/** * @author 张亮  * ldap用户属性信息数据类 */public class LdapPersonI ...

  5. BufferedInputStream详解

    BufferedInputStream是一个带有缓冲区域的InputStream,它的继承体系如下:  InputStream  |__FilterInputStream          |__Bu ...

  6. mapreduce实战：统计美国各个气象站30年来的平均气温项目分析

    气象数据集 我们要写一个气象数据挖掘的程序.气象数据是通过分布在美国各地区的很多气象传感器每隔一小时进行收集,这些数据是半结构化数据且是按照记录方式存储的,因此非常适合使用 MapReduce 程序来 ...

  7. [转] npm 模块安装机制简介

    npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...

  8. htmlentities() 函数

    Definition and Usage定义和用法 The htmlentities() function converts characters to HTML entities.htmlentit ...

  9. AS【常用插件】

    安装插件,Settings -->[Plugins]-->搜索-->点击install-->重启AS 禁用插件,右侧面板会显示出已经安装的插件列表,取消勾选即可禁用插件 AS插 ...

  10. ASP.NET 微信支付

    一.在支付前期,我们需要获取用户的OpenId,此块内容只针对于JSAPI(微信中直接支付)才需要,如果生成二维码(NATIVE)扫描支付,请跳过此步骤 思路大致是:获取用户的code值 > 根 ...