js 实现一些跨浏览器的事件方法详解及实例

Posted 2023-02-27

参考技术A js实现一些跨浏览器的事件方法
　　用javascript实现事件的绑定，移除，以及一些常用的事件属性的获取，时常要考虑到在不同浏览器下的兼容性，下面给出了一个跨浏览器的事件对象：
var
EventUtil
=

on:
function(element,
type,
handler)
/*
添加事件
*/
if
(element.addEventListener)

element.addEventListener(type,
handler,
false);

else
if
(element.attachEvent)
//IE
注意：此时事件处理程序会在全局作用域中运行，因此用attachEvent绑定的事件，此时在事件处理函数里的this
等于window，使用时要注意
element.attachEvent("on"
+
type,
handler);

else

element["on"
+
type]
=
handler;

,
off:
function(element,
type,
handler)
/*
移除事件
*/
if
(element.removeEventListener)

element.removeEventListener(type,
handler,
false);

else
if
(element.detachEvent)

element.detachEvent("on"
+
type,
handler);

else

element["on"
+
type]
=
null;

,
getEvent:
function(event)
/*
返回对event对象的引用
*/
return
event
?
event
:
window.event;
,
getTarget:
function(event)
/*
返回事件的目标
*/
return
event.target
||
event.srcElement;
,
preventDefault:
function(event)

/*
取消事件的默认行为
*/
if
(event.preventDefault)

event.preventDefault();

else

event.returnValue
=
false;

,
stopPropagation:
function(event)
/*
阻止事件冒泡
*/
if
(event.stopPropagation)

event.stopPropagation();

else

event.cancelBubble
=
true;

,
/*
mouseover
和mouserout
这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
getRelatedTarget:
function(event)

if
(event.relatedTarget)

return
event.relatedTarget;

else
if
(event.toElement)
//IE8
mouserout事件
return
event.toElement;

else
if
(event.fromElement)
//IE8
mouseover事件
return
event.fromElement;

else

return
null;//其他事件


;
调用如下：
EventUtil.on(document,
"click",
function(event)//为document元素绑定click事件
event
=
EventUtil.getEvent(event);//获取event事件对象
alert("Screen
coordinates:
"
+
event.screenX
+
","
+
event.screenY);
);
文章参考自《JavaScript高级程序设计第三版》
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

js 跨浏览器实现事件

我们知道不同的浏览器实现事件是不同的，就比如说我们常见的有三种方法：

1，dom0处理事件的方法，以前的js处理事件都是这样写的。

  (function () {
       var p=document.getElementById("huchao1");
       //dom0处理方法
     p.onclick=function (a) {
      console.log(a.type);
      // body...
  }
  //移除方法如下：
   p.onclick=null;

      // body...
  })()
 

2，dom2 处理时间的方法 如下：可以同时添加两个相同的事件类型，移除这个时间的时候，函数必须不是匿名函数，否则不起作用

 (function () {
     var  a=document.getElementById("huchao1");
     a.addEventListener("click",function () {
         console.log(this.id);
         // body...
         // false 表示在冒泡阶段
     },false);
     a.addEventListener("click",function () {
         console.log("alll");
         // body...
     },false);
     //这样移除不起作用，函数必须不是匿名函数
     a.removeEventListener("click",function () {
         // body...
     },false);
     // body...
 })()

 

3，ie处理事件，删除事件detachEvent 注意此处是onclick ,不是click

       (function () {
           var btn=document.getElementById("huchao1");
           btn.attachEvent("onclick",function () {
           alert("dd");
               // body...
           })
           // body...
       })()

如何写一个跨浏览器的事件处理程序呢：综上所述如下：

   (function () {
       var EventUtil={
           addHandler:function (element,type,Handler) {
               //此处dom2事件
               if (element.addEventListener) {
                   //false表示冒泡阶段
                   element.addEventListener(type,Handler,false);
               }else if(element.attachEvent){
                   //ie处理事件
                   element.attachEvent("on"+type,Handler);

               }else{
                   //dom0处理事件
                   element["on"+type]=Handler;

               }
               // body...
           },
           removeHandler:function (element,type,Handler) {
               // body...
               if (element.addEventListener) {
                   element.removeEventListener(type,Handler,false);
               }else if(element.attachEvent){
                   element.removeEvent("on"+type,Handler);

               }else{
                   element["on"+type]=null;

               }
           }
       }
       var  btn=document.getElementById("huchao1");
   var handler=function () {
       alert("huchao");
       // body...
   }
   EventUtil.addHandler(btn,"click",handler);
    EventUtil.removeHandler(btn,"click",handler);
       // body...
   })()

 

  (function () {  var p=document.getElementById("huchao1");  //dom0处理方法     p.onclick=function (a) {  console.log(a.type);  // body...  }  //移除方法如下：   p.onclick=null;
  // body...  })()