对于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. cmd的copy命令合并多个文件

    1.1个a.jpg文件:1个b.php文件(一句话木马)

  2. Parallel.Foreach的全部知识要点【转】

    简介 当需要为多核机器进行优化的时候,最好先检查下你的程序是否有处理能够分割开来进行并行处理.(例如,有一个巨大的数据集合,其中的元素需要一个一个进行彼此独立的耗时计算). .net framewor ...

  3. Linux下对后台进程通过kill传递信号不起作用的问题

    在阅读APUE信号一章时,我遇到Linux下对后台进程通过kill传递信号不起作用的问题 具体情形与如下链接中的老兄一致: http://bbs.csdn.net/topics/390335913?p ...

  4. mac下versions 提交提示 SVN Working Copy xxx locked

    终端进入工程目录,执行 find . | grep ".svn/lock" | xargs rm

  5. oracle中 sql%rowcount 使用方法

    sql%rowcount用于记录改动的条数,必须放在一个更新或者删除等改动类语句后面运行,select语句用于查询的话无法使用, 当你运行多条改动语句时,依照sql%rowcount 之前运行的最后一 ...

  6. Debian自启动知识 2015-03-31 20:23 79人阅读 评论(0) 收藏

    Debian6添加了insserv用来代替update-rc.d.update-rc.d 就不多做介绍. Debian6里边要添加一个自动启动的服务需要先将启动脚本放在/etc/init.d,然后使用 ...

  7. Nubia Z5S(高通公司MSM8974) QHSUSB_BULK砖的方法节省模式(随着win7在恢复recovery分区案例)

    Nubia Z5S在某些异常情况或按组合键进入QHSUSB_BULK状态, 这种模式的现象, 猜想windows(实例win7)即使在数据线, 它会出现在计算机n载,甚至会提示要格式化某些分区(这里要 ...

  8. MYSQL 调优系列

    http://www.cnblogs.com/digdeep/p/4847484.html

  9. qt 学习之路 ：QML 语法

    前面我们已经见识过 QML 文档.一个 QML 文档分为 import 和对象声明两部分.如果你要使用 Qt Quick,就需要 import QtQuick 2.QML 是一种声明语言,用于描述程序 ...

  10. JDK5-可变参数

    如:public void function(int arg, int... args) 注意: 可变参数必须出现在参数列表的最后,否则使用数组 可变参数隐式地创建一个数组 如下程序: public ...