addEventListener,attachEvent
addEventListener是js填加事件;用法如下:
target.addEventListener(type,listener,useCapture)
target: 文档节点、document、window 或 XMLHttpRequest。
type:
字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了
EventListener 接口或者是 JavaScript 中的函数。也就是function之类的。
useCapture :是否使用捕捉,一般用 false
。
例如:document.getElementById("testText").addEventListener("keydown", function
(event) { alert(event.keyCode); }, false);
主要理解下第三个参数 useCapture;如果为true则是capture捕获事件,如果是false则是budding冒泡事件,(关于冒泡事件和捕获事件可以参考文章:http://www.cnblogs.com/MissBean/p/4256235.html)
看个例子感受下:
<div id="div_test">
<input type="button" id="btn_test" value="测测" />
</div>
1 <script type="text/javascript">
window.onload=function(){
document.getElementById("div_test").addEventListener("click",test1,false);
document.getElementById("btn_test").addEventListener("click",test2,false);
}
function test1(){
alert("外层div触发")
}
function test2(){
alert("内层input触发")
}
</script>
第三行和第四行都是false。所以是冒泡事件,会先触发子级事件也就是test2,再触发父级,也就是test1.
如果将三四行的false改成true,则是捕获事件,会先触发父级事件再触发子级事件;
但是如果一个是false一个是true呢?此时要看最父级是true还是false,最父级是true则捕获,false则冒泡;此例中,div_test是父级,所以看第三行是true还是false,决定是捕获还是冒泡。
IE中,因为之前IE版本默认都是冒泡事件,所以用target.attachEvent(type, listener); 两个参数即可;
target: 文档节点、document、window 或 XMLHttpRequest。
type:
字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了
EventListener 接口或者是 JavaScript 中的函数。
例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
想要让它兼容所有浏览器,可以做一个判断
<div class="box">
<input type="button" value="按钮1" id="btn1" onclick="showE();" />
<input type="button" value="按钮2" id="btn2" />
<input type="button" value="按钮3" id="btn3" />
</div>
function showE(){
console.log(1111);
}
var eventUntil={
addHandler:function (element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler)
}else{
element['on'+type]=handler;
}
},
removeHandler:function (element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.attachEvent('on'+type,handler)
}else{
element['on'+type]=null;
}
}
}
eventUntil.addHandler(obtn3,"click",showE)
上面6-12行是做判断,这样就兼容了所有浏览器
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
第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_ ...
- 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
一.attachEvent和addEventListener (一)addEventListener addEventListener() 方法用于向指定元素添加事件句柄.使用 removeEvent ...
- addEventListener()、attachEvent()和removeEventListener()、detachEvent()的差别?
addEventListener()和attachEvent()的差别? addEventListener:在HTML元素上绑定事件,FF.chrome.opera.safari及IE9浏览器以上的支 ...
- js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...
随机推荐
- ASP.NET文件的上传下载提交分页
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" Auto ...
- block 实现原理(内存管理详解)(二)
在以前,MRC环境下,使用block很可能会出现内存泄漏问题,并且在以往的面试中,一些接触比较久的程序员都会喜欢问到这个问题,block内存泄漏的问题! 下面,我来介绍一下,MRC下Block内存泄漏 ...
- Hibernate——基础及XML配置
1.入门 hibernate是跟数据库打交道的,一般跟数据库打交道的都不简单 原始.底层直接的一些操作.编码量比较大.费时.用框架高效 把原来一点一点实现的东西,现在给个半成品,不用在这上边发时间,把 ...
- [数据结构与算法]队列Queue 的多种实现
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- CUBRID学习笔记 19 sql语句1
创建 欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650@sohu.com . 过错 create table tableName (字段名 字段类型 pr ...
- MySQL修改约束
添加主键约束: ALTER TABLE tbl_name ADD [CONSTRAINT [symbol索引名]] PRIMARY KEY [index_type] (index_col ...
- CSS笔记(七)列表
CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志. 参考:http://www.w3school.com.cn/css/css_list.asp 实例: <html> ...
- [原]五分钟搭建gitserver
本来在忙一些事情,结果刚才突然收到一个临时的事情,号称很着急. 问了一下,原来是需要在本地搭建一个git库,但其实之前我是有做过gitserver的,不过是在阿里云(部分分布在青云)上,而且目前在使用 ...
- 从输入 URL 到页面加载完的过程中都发生了什么事情?
1) 把URL分割成几个部分:协议.网络地址.资源路径.其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号:协议是从该计 算机获取资源的方式,常见的是HTTP.FTP,不 ...
- Visual Studio 2012 RC 中RC表示什么意思
来自:http://zhidao.baidu.com/question/507233956.html Release Candidate 缩写为 RC ,经常用于计算机软件方面,表示软件的候选发布版. ...