js事件处理 —— 详解
对于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事件处理 —— 详解的更多相关文章
- iOS开发——实用技术OC篇&事件处理详解
事件处理详解 一:事件处理 事件处理常见属性: 事件类型 @property(nonatomic,readonly) UIEventType type; @property(nonatomic ...
- js对象详解(JavaScript对象深度剖析，深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- Node.js npm 详解
一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...
- JavaScript之事件处理详解
一.事件传播机制 客户端JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型.当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web浏览器就会产生事件(event).如果Jav ...
- Vue.js项目详解
还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...
- JS 面向对象详解
面向对象详解1 OO1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 开胃小菜——impress.js代码详解
README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- 值得收藏的js原型详解
从虚无到Object 起初,地是空虚混沌,渊面黑暗:这时候一切还是null 神说,要有原型,于是就有了prototype 原型从凭空产生,于是需要一个指向于null的特征,人们把这种特征叫做隐式原型, ...
随机推荐
- 开源存储之ceph
小记,曾经的很多单骑,赵子龙,杨再兴,..............为大将者所应用的胆识和气度,值得敬仰! 名师出高徒啊, 周侗北宋末年之武术大师,相传为三国姜维的传人(真实性ruiy哥就不考察了哈), ...
- Linux下安装 TestLink常见问题解决方法
Read/write permissions For security reason we suggest that directories tagged with [S] on following ...
- Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable 这里讲一下如何实现PS调色板中的透明度 ...
- ExtJs4学习（四）：Extjs 中id与itemId的差别
为了方便表示或是指定一个组件的名称,我们一般会使用id或者itemId进行标识命名. (推荐尽量使用itemId.这样能够降低页面唯一标识而产生的冲突) id: id是作为整个页面的Comp ...
- 亿图图示专家v7.7破解版
软件简介 亿图图示专家是一款综合矢量绘制软件,新颖小巧,功能强大,可以很方便的绘制各种专业的流程图.组织结构图.网络拓扑图.思维导图.商业图表.科学设计图等.轻轻松松绘制各种专业流程图,网络图,思维导 ...
- iOS-设置状态栏白色以及覆盖状态栏
iOS-设置状态栏白色以及覆盖状态栏 将状态栏设置为白色 首先, 在info.plist中添加一个标记. View controller–based status bar appearance键值设置 ...
- Java基础知识强化之集合框架笔记21：数据结构之 数组 和 链表
1. 数组 2. 链表
- 一次优化web项目的经历记录（二）
一次优化web项目的经历记录 这段时间以来的总结与反思 前言:最近很长一段时间没有更新博客了,忙于一堆子项目的开发,严重拖慢了学习与思考的进程. 开水倒满了需要提早放下杯子,晚了就会烫手,这段时间以来 ...
- LINUX启动顺序
Linux 启动顺序: 1. BIOS自检 (服务器硬件启动的第一步,坑定的啦) 2. 运行系统内核并检测硬件(这个是看系统了,redhat等相关版本是通过/boot/vm进行启动 vmlinuz) ...
- 第七篇: python高级之多线程
21 interest=0.05 22 count=amount+amount*interest 23 24 self.withdraw(count) 25 26 27 def transfer(_f ...