对于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. [Java] HashMap 导致的高 CPU 使用率

    今天在生产环境遇到一个问题,Java 应用程序的 cpu 使用比例很高,导致整台机器的 cpu 使用率高达 90% ,正常情况下是 20% 左右. 把 Thread dump 导出来,利用 IBM T ...

  2. nyoj 67 三角形面积【三角形面积公式】

    三角形面积 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 给你三个点,表示一个三角形的三个顶点,现你的任务是求出该三角形的面积   输入 每行是一组测试数据,有6个 ...

  3. hdoj 2524 矩形A + B【递推】

    矩形A + B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  4. 【基础】多线程更新窗体UI的若干方法

    一.前言 在单线程中设置窗体某个控件的值很简单的事,只需要设置控件文本的值就可以了,但是有的业务场景很是复杂,界面上的控件也很多,这种情况下当数据量比较多的时候,在单线程中更新UI不可避免地会发生假死 ...

  5. web项目学习之spring-security

    转自<http://liukai.iteye.com/blog/982088> spring security功能点总结: 1. 登录控制 2. 权限控制(用户菜单的显示,功能点访问控制) ...

  6. Javascript触屏手势库-JTouch(更新V1.1)

    作者:痞子|时间:2013-05-21|分类目录:js,javascript,jquery教程|Tag标签: javascript.jTouch|阅读(857) 7 条评论 Javascript触屏手 ...

  7. Delphi中一些常用的组合键值

    Delphi中一些常用的组合键值  CTRL+A: #1  CTRL+B: #2  CTRL+C: #3  CTRL+D: #4  CTRL+E: #5  CTRL+F: #6  CTRL+G: #7 ...

  8. JAVA基于AE调用GP实现泰森多边形

    调用GP实现数据处理是较快捷.较易入手的方法. 使用JAVA语言基于AE调用GP实现泰森多边形的代码例如以下: public void CreatVoronoi(){ try { GeoProcess ...

  9. android 44 SQLiteOpenHelper

    java package com.sxt.day06_10; import java.util.ArrayList; import com.sxt.day06_10.entity.StudentBea ...

  10. systrace跟踪 Android性能优化

    http://blog.csdn.net/oujunli/article/details/8138172 http://blog.csdn.net/oujunli/article/details/50 ...