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 ...
随机推荐
- BigPipe设计原理
高性能页面加载技术--BigPipe设计原理及Java简单实现 1.技术背景 动态web网站的历史可以追溯到万维网初期,相比于静态网站,动态网站提供了强大的可交互功能.经过几十年的发展,动态网站在互动 ...
- HDU 4819 Mosaic D区段树
连接:pid=4819">http://acm.hdu.edu.cn/showproblem.php?pid=4819 意:给出一个800×800下面的矩阵.每次更新一个点的值为以这个 ...
- MySQL多实例配置(两)
MySQL操作和维护一个集中的数据库的.它可以由一个单一的执行MySQL在数据库服务器,部署多MySQL示例.这个功能是由mysqld_multi实现.mysqld_multimysqld的服务进程. ...
- SQL Server 2008性能故障排查(四)——TempDB
原文:SQL Server 2008性能故障排查(四)--TempDB 接着上一章:I/O TempDB: TempDB是一个全局数据库,存储内部和用户对象还有零食表.对象.在SQLServer操作过 ...
- 跳跃Java一些周期,双跳FOR周期
今天写的代码写在一个双层for周期,目前仍在使用Iterator,大致意思是假定在第二个周期在排位赛中给了整个双回路跳. 刚開始,直接使用break.巴拉巴拉的敲了一堆代码,信心满满的就直接执行.等到 ...
- gradle--java入门(转)
7.3.3 项目之间的依赖性 您可以添加项目之间的依赖性在相同的构建,所以,例如,这个一个项目的JAR文件是用来编译另一个项目,在api构建文件我们将添加一个依赖JAR产生的共享项目.由于这种依赖性, ...
- Android APK反编译详解(非常有用)
如何学习最快呢?无疑是通过研究别人的源代码? 但是,获取别人的源代码,比较困难.本文,仅限于用于学习开发. 这段时间在学Android应用开发,在想既然是用Java开发的应该很好反编译从而得到源代码吧 ...
- Nginx+Php-fpm+MySQL+Redis源码编译安装指南
说明:本教程由三部分组成如下: 1. 源码编译安装Nginx 2. 源码编译安装php以及mysql.redis扩展模块 3. 配置虚拟主机 文中所涉及安装包程序均提供下 ...
- Spring AOP在pointcut expression解析表达式 并匹配多个条件
Pointcut 方法是那些需要运行"AOP",由"Pointcut Expression"为了描述叙事. Pointcut以下方法可以通过定义任&&a ...
- hdu 1233(还是畅通project)(prime算法,克鲁斯卡尔算法)(并查集,最小生成树)
还是畅通project Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...