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="se4.cn技术基地" /> </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()

中用来相同的函数。

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

实验结果是，用户点击button时，每次都会输出"I have been clicked!"，说明removeEventListener()函数没有起到作用。通过查找资料，得出结论。在使用removeEventListener()函数时，handler函数，必须和使用addEventListener()里面的handler函数必须相同。所以上面写的代码是错误的。修正之后的代码应该如下：

<html>
    <head>
    </head>
    <body>
        <input id="info"  type="button" value="Click Me!" />
        <script type="text/javascript">
            //addEventListener()和removeEventListener()中handler函数必须相同，移除事件函数才有效。
            function myhandler(){
                console.log("I have been clicked!");
                document.getElementById('info').removeEventListener('click',myhandler,false);
            }
            var target=document.getElementById('info');
            target.addEventListener('click',myhandler,false);
            
        </script>
    </body>
</html>

1、直接给对象添加事件
document.all.Object.ondblclick=function(){方法};

2、通过监听方式添加事件，多事件可并存，按添加顺序执行。
if(window.addEventListener)
    // Mozilla, Netscape, Firefox
    Object.addEventListener("click", function(){方法}, false);
else if(window.attachEvent)
    // IE
    Object.attachEvent("onclick", function(){方法});
else
    // Other
    Object.onclick= function(){方法};

例子：

function srchtxtAddOnKeyPress()
{
    if(window.addEventListener)
    { 
        //其它浏览器的事件代码: Mozilla, Netscape, Firefox
        //添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件，不用加on 
        document.getElementById('srchtxt').addEventListener('keypress', keyPressEvt, false);
    }
    else
       {
         //IE 的事件代码 在原先事件上添加 add 方法
          document.getElementById('srchtxt').attachEvent('onkeypress',keyPressEvt);
      }
}

3、获取Event

//判斷當事件keyCode值為13時觸發登錄事件
	userLoginPasd.onkeydown = function(e){
		var e = e || window.event;
		if(e.keyCode == 13){
			login();
		} 
	}

下面提供同时兼容IE和Firefox的获得event对象的方法,在需要用到event对象的地方,调用该方法即可.

function getEvent() //同时兼容ie和ff的写法
    { 
        if(document.all)  return window.event;   
        func=getEvent.caller;       
        while(func!=null){ 
            var arg0=func.arguments[0];
            if(arg0)
            {
              if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
              { 
              return arg0;
              }
            }
            func=func.caller;
        }
        return null;
    } //如调用:

document.onclick=function(){

var evt=getEvent();
alert(evt);
}

秒客网

JS动态添加移除事件和获取Event (兼容IE和Firefox)

相关文章

JS动态添加移除事件 和 获取Event (兼容IE和Firefox)

相关文章

JS动态添加移除事件和获取Event (兼容IE和Firefox)