JS动态添加移除事件 和 获取Event (兼容IE和Firefox)
今天小弄了一下JS事件，主要说一下FF和IE兼容的问题
对象名.addEventListener(“事件名（不带ON）”，函数名，true/false);(FF下)
对象名.attachEvent(“事件名”，函数名);(IE下)
说明：
事件名称，要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”。
函数名，记住不要跟括号最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。 userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="点击" /> </div>
js代码
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触发") }
自己体验一下，如果userCapture是true则test1先触发，如果userCapture是false则test2先触发。
下面来说一下，attachEvent
这个没啥好说的，相信大家也都用的挺熟的，主要是传参那块，等我用到 再说吧，哈哈哈
示例：
创建绑定方法：
if (typeof document.addEventListener != "undefined") {
document.addEventListener("mousedown",_lhlclick,true);
} else {
document.attachEvent("onmousedown",_lhlclick);
}
删除事件：
if (typeof document.addEventListener != "undefined") {
document.removeEventListener("mousedown",_lhlclick,true);
} else {
document.detachEvent("onmousedown",_lhlclick);
}
下面给出一个实际代码
var handler = function () {
alert('ddddd');
};
var obj = document.getElementById("fff");
if(window.addEventListener){ // Mozilla, Netscape, Firefox
t.addEventListener('click', handler, false);
} else if(window.attachEvent) { // IE
t.attachEvent('onclick', handler);
} else {
t.onclick= handler;
}
//删除事件
if(window.addEventListener){ // Mozilla, Netscape, Firefox
t.removeEventListener('click', handler, false);
} else if(window.attachEvent) { // IE
t.detachEvent('onclick', handler);
} else {
t.onclick= "";
}
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的时间名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
下面是详解
•其中element是要绑定函数的对象。
•type是事件名称，要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”。
•listener当然就是绑定的函数了，记住不要跟括号
•最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
要在按钮上为click事件添加事件处理程序，可以使用下列代码：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.addEventListener("click", function () {
alert("Hello World");
}, false);
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
alert(this.id);
}, false);
在这个例子中，我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用了相同的函数。
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。
发表评论