Javascript添加事件的addEventListener()及attachEvent()区别分析,事件委托
Mozilla中:
addEventListener的使用方式:
target.addEventListener(type, listener, useCapture);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture
:是否使用捕捉,一般用 false
。例如:document.getElementById("testText").addEventListener("keydown",
function (event) { alert(event.keyCode); }, false);
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);});
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
target.addEventListener(type, listener, useCapture);
target 文档节点、document、window 或 XMLHttpRequest。
type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false
事件触发时,会将一个 Event 对象传递给事件处理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法 按钮onclick IE中使用
addEventListener方法 按钮click fox中使用
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3
ex.on = function (el, ev, fn) {
if (el.attachEvent) {
el.attachEvent("on" + ev, function () {
fn.apply(el, arguments)
});
} else {
el.addEventListener(ev, fn, false)
}
};
委托
jquery live()函数原理及实现
<script type="text/javascript">
function live(targetObject, type, fn){ //元素类型,事件类型,执行函数
document.onclick = function(event){
var e = event ? event : window.event;
addRow();
alert(1);
//解决浏览器兼容的问题,e.srcElement IE,e.target FF
var target = e.srcElement || e.target;
if(e.type == type && target.tagName.toLocaleLowerCase() == targetObject){
alert(3);
fn(); //如果元素类型和事件类型同时匹配,则执行函数
}
}
}
function addRow(){
var x=document.getElementById("tb").insertRow(0);
var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
} //实例:将所有的td(包括后续js添加的)绑定click事件
live("td", "click", function(){
alert("live");
});
</script>
// 获取父节点,并为它添加一个click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
// 检查事件源e.targe是否为Li
if(e.target && e.target.nodeName.toUpperCase == "LI") {
// 真正的处理过程在这里
console.log("List item ",e.target.id.replace("post-")," was clicked!");
}
});
Javascript添加事件的addEventListener()及attachEvent()区别分析,事件委托的更多相关文章
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- Javascript 的addEventListener()及attachEvent()区别分析
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这 ...
- ie和火狐事件addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- addEventListener和attachEvent区别
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome.FireFox.Opera.Safari.IE9.0及其以上版本都支持该函数:但是,IE8.0及其以 ...
- addEventListener与attachEvent区别
DOM2级事件处理程序 DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作: addEventListener removeEventListener 所有的DOM节点都包含这两个方法, ...
- addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- JavaScript之onXXXX事件和addEventListener的区别
JavaScript之onXXXX事件和addEventListener的区别 1.首先介绍两者的用法: 1.1onXXXX的用法:以onclick为例 第一种: obj.onclick = func ...
随机推荐
- Linux下python升级至2.7
1. 下载python源码包 wget http://www.python.org/ftp/python/2.7.3/Python-2.7.3.tgz2. 解压 tar -xjf Python-2.7 ...
- JavaWeb学习总结-09 JDBC 学习和使用
一 JDBC相关概念介绍 1.1 数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...
- RMQ模板
RMQ:范围最小值问题.给出一个n个元素的数组A1,A2,...,An,设计一个数据结构支持查询操作Query(L,R):计算min{AL,AL+1,...,AR}. 每次用一个循环来求最小值显然不够 ...
- java编程思想-java中的并发(二)
二.共享受限资源 有了并发就可以同时做多件事情了.但是,两个或多个线程彼此互相干涉的问题也就出现了.如果不防范这种冲突,就可能发生两个线程同时试图访问同一个银行账户,或向同一个打印机打印,改变同一个值 ...
- js020-JSON
js020-JSON 20.1 语法 JSON的语法可以表示为一下三种类型的值. 简单值 使用与JS相同的语法,可以在JSON中表示字符串.数值.布尔值和null,但是JSON不支持JS中的特殊性Un ...
- 处理字符串-String类和正则表达式
---基本元字符 . [] | () ---限定元字符 +至少匹配一个 *匹配0个或任意多个 ?匹配0个或1个(默认是贪心的) 当?在(*,+,?,{n},{ ...
- 9月19日上午JavaScript数组
数组 一.定义 1.数组的文字定义 广义上说,数组是相同类型数据的集合.但是对于强类型语言和弱类型语言来说其特点是不一样的.强类型语言数组和集合有以下特点. 数组强类型语言:1.数组里面只能存放相同数 ...
- Java 6.15习题
1.定义一个ClassName接口,接口中只有一个抽象方法getClassName();设计一个类Company,该类实现接口ClassName中的方法getClassName(),功能是获取该类的类 ...
- echosp 销量排行 新增实际价格
找到lib_goods.php第147行,代码 $sql = 'SELECT g.goods_id, g.goods_name, g.shop_price,g.goods_thumb, SUM(og. ...
- Session的SqlServer模式的配置
很多时候,由于各种莫名其妙的原因,会导致session丢失.不过ASP.NET还允许将会话数据存储到一个数据库服务器中,方法是将mode属性变成SqlServer. 在这种情况下,ASP.NET尝试将 ...