对于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. TCP协议状态简介

    原文出自:Vimer的程序世界 1.建立连接协议(三次握手)(1)客户端发送一个带SYN标志的TCP报文到服务器.这是三次握手过程中的报文1.(2) 服务器端回应客户端的,这是三次握手中的第2个报文, ...

  2. openstack kilo版本控制节点异常流量分析

  3. sonarQube本机扫描C#项目

    因项目需要,需要使用sonarQube对代码进行扫描并查看,因对sonarQube不熟悉,所以先在本机进行查看. 参考了张老师的博客:http://www.cnblogs.com/danzhang/p ...

  4. 面试题 php随机获取概率结果

    题目:随机输出“苹果”,“橘子”,“香蕉”要求输出“苹果”的概率为50%,“橘子”的概率为30%,“香蕉”的概率为20% 分析 方案一: 最常用rand(1,10)来处理 如果是5以下的输出苹果 6到 ...

  5. c#基础语言编程-按值类型和引用类型传递参数

    引言 在介绍传递参数介绍前,请明白参数类型和传递方式是不同的.传递方式分为按值类型和引用类型传递参数.参数类型有值类型和引用类型,这个和C++是不同的.这里的传递方式对应c++中的深复制和浅复制. 两 ...

  6. C#多线程(下) 分类： C# 线程 2015-03-09 10:41 153人阅读 评论(0) 收藏

    四.多线程的自动管理(线程池) 在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应 这一般使用ThreadPool(线 ...

  7. 【protobuf进阶】通过.proto文件导出C#支持的.cs类文件

    protobuf是一个跨平台的消息交互协议,类似xml.json等. protocolbuffer(以下简称PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.google 提供了多 ...

  8. Codeforces Beta Round #10 D. LCIS（DP&amp;LCIS）

    D. LCIS time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  9. 首页在linux下的哪个文件夹

    /data/mindo/tomcat-live/webapps/ROOT/WEB-INF/templates/default/pages/index.jsp   svn检出地址 https://sif ...

  10. mysql默认用户名和密码

    默认用户名:root 密码:gree..