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

1.html事件处理程序

直接添加到HTML结构中

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  
  7.  </head>
  8.  <body>
  9.        <p id="pid">js事件处理程序</p>
  10.        <button id="btn" onclick="demo()">点击</button>
  11.        <script>
  12.            function demo(){
  13.                document.getElementById("pid").innerHTML ="html事件处理程序"
  14.            }
  15.        </script>
  16.  
  17.  </body>
  18.  </html>

2.DOM 0级处理事件

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

解析：

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

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

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  
  7.  </head>
  8.  <body>
  9.  
  10.        <button id="btn">点击</button>
  11.        <script>
  12.            var btn = document.getElementById("btn") //调用ID属性获得button元素
  13.            btn.onclick =function(){        //点击事件1
  14.                alert("DOM 0级处理事件1")
  15.            }
  16.            btn.onclick = function(){        //点击事件2
  17.                alert("DOM 0级处理事件2")
  18.            }
  19.            btn.onclick = null           //清除事件
  20.  
  21.        </script>
  22.  
  23.  </body>
  24.  </html>

DOM2级事件处理程序

  1. DOM2级事件处理程序
  2.  
  3. 解析：
  4.  
  5. DOM2级一个元素用相同的两个事件调用不同方法时不会被覆盖
  6.  
  7. addEvenListener("事件"，“事件处理方法”)
  8.  
  9. e.target.type//获取事件目标的事件类型，返回值事件类型
  10.  
  11. e.target.stopPropagation();//阻止事件的冒泡方法
  12.  
  13. e.preventDefault()//清除元素的默认方法
  14.  
  15. elem.removeEvenlistener("事件","事件处理方法") //清除事件
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          #div1{
  8.              width:100px;
  9.              height:100px;
  10.              border: 1px solid gray;
  11.          }
  12.          #div2{
  13.              width: 50px;
  14.              height:50px;
  15.              border:1px solid gray;
  16.          }
  17.      </style>
  18.  </head>
  19.  <body>
  20.  
  21.       <div id="div1">
  22.           <div id="div2">DOM2级处理事件</div>
  23.       </div>
  24.       <a  id="aid" href="www.baidu.com">连接百度</a>
  25.        <script>
  26.            var div1 = document.getElementById('div1')
  27.            var div2 = document.getElementById("div2")
  28.            var a =document.getElementById("aid")
  29.            div1.addEventListener("click",div1Style)
  30.            div2.addEventListener("click",div2Style)
  31.            div2.addEventListener("click",div3Style)
  32.            a.addEventListener("click",aStyle)
  33.  
  34.            function div1Style() {
  35.                this.style.background = "blue"
  36.            }
  37.            function div2Style(e) {
  38.                alert(e.type)  //获取无素的事件类型
  39.                alert(e.target.id)  //获取事件目标（元素）的ID
  40.                e.stopPropagation()  //阻止父元素的事件冒泡
  41.                this.style.background = "black"
  42.            }
  43.           function div3Style(){
  44.                this.style.color = "red"
  45.            }
  46.            function aStyle(e){
  47.                e.preventDefault()//清除元素的默认方法
  48.            }
  49.            div2.removeEventListener("click",div3Style)//清除事件
  50.  
  51.        </script>
  52.  </body>
  53.  </html>

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

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

detachEvent来清除处理事件

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.       <button id="btn">点击</button>
  9.       <script>
  10.           var btn = document.getElementById("btn")
  11.           if(btn.addEventListener){
  12.               btn.addEventListener("click",demo)
  13.           }else if(btn.attachEvent){    //针对IE8 和 IE8以下的游览
  14.               btn.attachEvent("onclick",demo)
  15.           }else{                      //针对更老版本的游览器
  16.               btn.onclick = demo()
  17.           }
  18.           function demo(){
  19.               alert("hello")
  20.           }
  21.           btn.detachEvent("onclick",demo)  //针对IE8 和 IE8以下的游览 清除事件
  22.       </script>
  23.  </body>
  24.  </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. vijosP1471 教主的游乐场

    vijosP1471 教主的游乐场 链接:https://vijos.org/p/1471 [思路] 递推. 首先找到最左边的可以一步跳到后方的L, 那么L之后的点有两种情况:要么a足以跳到后方步数为 ...

  2. .net code injection

    .NET Internals and Code Injection http://www.ntcore.com/files/netint_injection.htm Windows Hooks in ...

  3. Intersecting Lines - POJ 1269（判断平面上两条直线的关系）

    分析:有三种关系,共线,平行,还有相交,共线和平行都可以使用叉积来进行判断(其实和斜率一样),相交需要解方程....在纸上比划比划就出来了....   代码如下: ================== ...

  4. 408. Valid Word Abbreviation

    感冒之后 睡了2天觉 现在痊愈了 重启刷题进程.. Google的题,E难度.. 比较的方法很多,应该是为后面的题铺垫的. 题不难,做对不容易,edge cases很多,修修改改好多次,写完发现是一坨 ...

  5. Epoll之ET、LT模式

    Epoll之ET.LT模式 在使用epoll时,在函数 epoll_ctl中如果不设定,epoll_event 的event默认为LT(水平触发)模式. 使用LT模式意味着只要fd处于可读或者可写状态 ...

  6. 使用PDO连接数据库 查询和插入乱码的解决方法

    问题:PDO连接数据库后,查询和插入中文到数据库,出现乱码,如图: 解决方法: 法1: try{ $opts_values = array(PDO::MYSQL_ATTR_INIT_COMMAND=& ...

  7. Android之打开闪光灯关键代码

    在AndroidManifest中注册相应的权限: <uses-permission android:name="android.permission.FLASHLIGHT" ...

  8. 【android】ImageView的src和background的区别以及两者的妙用

    一.ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸 .src是图片内 ...

  9. spark 启动job的流程分析

    从WordCount開始分析 编写一个样例程序 编写一个从HDFS中读取并计算wordcount的样例程序: packageorg.apache.spark.examples importorg.ap ...

  10. AlgorithmVisualizer

    http://jasonpark.me/AlgorithmVisualizer/#path=graph_search/floyd_warshall/shortest_paths