addEventListener 与attachEvent
第一:简单的通用方法(IE && FF)
window.onload = function(){
var oDiv = document.getElementById("J_myDiv"); //找到对象
oDiv.onclick = function(){ //设置事件监听函数
alert("click");
}
}
缺点:1.添加单一事件
2.不能删除事件
第二:IE中监听函数
var oDiv; function fnClick(){
alert("click me");
oDiv.detachEvent("onclick",fnClick);//删除监听函数
} window.onload = function(){
oDiv = document.getElementById("J_myDiv");//找到对象
oDiv.attachEvent("onclick",fnClick); //添加监听函数
}
第三:标准DOM监听函数
var oDiv; function fnClick1(){
alert("click1");
// oDiv.removeEventListener("click",fnClick2,false); //删除监听函数2
} function fnClick2(){
alert("click2");
} window.onload = function(){ oDiv = document.getElementById("J_myDiv"); //找到对象
oDiv.addEventListener("click",fnClick1,false); //添加监听函数1
oDiv.addEventListener("click",fnClick2,false); //添加监听函数2 }
第四:从js实例来看事件监听 参看:http://imethan.com/?p=208
第五:从实例来看JS的事件监听学习笔记(事件监听绑定、ff/IE不同的处理机制兼容总结)参看:http://hi.baidu.com/dou917/blog/item/40219f37e6e3deee1b4cff67.html
第六:代码总结
<script language="javascript">
//Javascript 事件演示
window.onload = function(){
var hideBox = function(event){
document.getElementById('status_show').style.display = 'none';
document.getElementById('status_hide').style.display = 'block';
};
var showBox = function(event){
document.getElementById('status_show').style.display = 'block';
document.getElementById('status_hide').style.display = 'none';
stopEvent(event);
};
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
};
if(document.addEventListener){
document.addEventListener('click', hideBox, false);
document.getElementById('status_hide').addEventListener('click', showBox, false);
document.getElementById('status_show').addEventListener('click', stopEvent, false);
}else {
//For IE
document.attachEvent('onclick', hideBox);
document.getElementById('status_hide').attachEvent('onclick', showBox);
document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);
}
};
</script>
onclick这种写法是DOM0级规范的写法,确实是所有的浏览器支持的,但是这种写法有一些弊端:
这种写法不能同时绑定多个事件
这种写法使代码耦合在了一起
addEventListener() 是DOM2标准中定义的方法,它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序(由这个函数的第三个参数决定true/false),既然这个是DOM2标准中定义的,那么只有支持DOM2级事件处理程序的浏览器才支持这个方法(IE9,Firefox,Safari,Chrome和Opera都支持这个)。
attachEvent()方法并不是DOM标准定义的,而是IE自己实现的,而由于IE8及之前版本只支持事件冒泡,所以可想而知这个方法添加的事件处理程序都只能在冒泡阶段才会被调用,addEventListener()和attachEvent()还有一个区别就是第一个参数——事件类型,attachEvent()的事件类型都是前面带'on'的,比如点击事件 click ,addEventListener()可以传入 "click",而 attachEvent() 却要传入 'onclick';
addEventListener 与attachEvent的更多相关文章
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- 注册事件处理程序onclick和addEventListener、attachEvent
一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
- addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
- addEventListener()、attachEvent()和removeEventListener()、detachEvent()的差别?
addEventListener()和attachEvent()的差别? addEventListener:在HTML元素上绑定事件,FF.chrome.opera.safari及IE9浏览器以上的支 ...
- addEventListener和attachEvent的区别
addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- addEventListener、attachEvent、cancelBubble兼容性随笔
一.前言 1. element.addEventListener(eventType, handler, capture); (1)参数eventType是要注册句柄的事件类型名. (2)参数hand ...
随机推荐
- ASP.NET跨平台
ASP.NET跨平台最佳实践 前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语 ...
- 也可以看看GCD(杭州电2504)(gcd)
也可以看看GCD Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- 使用SQLServer 2008的CDC功能实现数据变更捕获
原文:使用SQLServer 2008的CDC功能实现数据变更捕获 最近由于工作需要,研究了一下2008 CDC功能,觉得还不错,下面整理了一下研究过程,虽然比较粗略,但是基本上能用了,如果有补充请大 ...
- 颜色(color)转换为三刺激值(r/g/b)(干股)
//颜色转换 ##665522 - 三色值 + (UIColor *)setFontColorWithString:(NSString *)color { NSString *cString ...
- 移动端 rem字体的使用demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title ...
- mysql大写和小写问题
曾经做企业项目的时候,用的都是oracle数据库,在新公司项目用的是mysql,有关mysql大写和小写的问题 1 windows下默认mysql是不区分大写和小写的,要想让其支持大写和小写.更改 ...
- SQL Server 性能优化(一)——简介
原文:SQL Server 性能优化(一)--简介 一.性能优化的理由: 听起来有点多余,但是还是详细说一下: 1.节省成本:这里的成本不一定是钱,但是基本上可以变相认为是节省钱.性能上去了,本来要投 ...
- HTML5 获得canvas油漆环境
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32925369 我们用的最主要的画图环境在canvas中画图.通过调用canv ...
- 记录我第一次在Android开发图像处理算法的经历
大概是四月底的时候.有人加我QQ问我是否做能做一些基于图像皮肤检測的算法, 主要是实现对皮肤六项指标: 1. 水分 2. 有份 3. 痤疮与痘痘 4. 色斑与肤 ...
- Android MenuItem 设置文本颜色-TextColor设置
前面一直在寻找 MenuItem文字颜色设置. 我发现API唯一的背景颜色设置. .. 因此,找到下面的方法.在OverFlow看到. 在onCreateOptionsMenu一下. 使MenuIte ...