对于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. oracle中多表查询优化笔记

    ORACLE有个高速缓冲的概念,这个高速缓冲呢就是存放执行过的SQL语句,对应已经执行过的sql语句,第二次执行的时候速度会比第一次块,用的就是高速缓冲.ORACLE的高速缓冲是全字符匹配的,如果sq ...

  2. jsp文件中的alert等等

    <script type="text/javascript"> alert("aa: ${message}") </script>

  3. HDU 3078 Network LCA

    题意:n个点 m个询问,下面一行是n 个点的权值 再下面n-1行是双向的边 然后m个询问:k u v 若k==0,则把u点的权值改为v,否则回答u->v之间最短路经过点的权值中  第k大的值是多 ...

  4. JavaWeb学习总结(1-53)

    本文转自孤傲苍狼 博客,JavaWeb学习总结 专题,一共53集,讲解简洁清晰,适合入门,链接和截图如下 http://www.cnblogs.com/xdp-gacl/category/574705 ...

  5. poj1691绘画板

    1 7 0 0 2 2 1 0 2 1 6 2 2 0 4 2 1 1 2 4 4 2 1 4 3 6 1 4 0 6 4 1 3 4 6 6 2 #include<stdio.h> #i ...

  6. java web实现 忘记密码（找回密码）功能及代码

    java web实现 忘记密码(找回密码)功能及代码 (一).总体思路 (二).部分截图 (三).部分代码 (一).总体思路: 1.在 找回密码页面 录入 姓名.邮箱和验证码,录入后点击[提交]按钮, ...

  7. sql server 获取每一个类别中值最大的一条数据

    /* 数据如下: name val memo a 2 a2(a的第二个值) a 1 a1--a的第一个值 a 3 a3:a的第三个值 b 1 b1--b的第一个值 b 3 b3:b的第三个值 b 2 ...

  8. 【iOS】iOS之Button segue弹出popOver消除（dismiss)问题

    如图.由于程序须要,点击Button Ctrl+Dragging加入了一个UITableViewController,当然其余的Controller也能够,这样我们在方法 -(void)prepare ...

  9. 无需Cygwin，如果没有在命令行，Eclipse编NDK

    此链接    http://blog.csdn.net/xiaodongrush/article/details/28908829 參考链接    http://www.cnblogs.com/che ...

  10. QT QObject：：connect函数的学习

      从Qobject(QObject.h)源码中可以看到QObject::connect的定义是这样的: static bool connect(const QObject *sender, cons ...