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

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...  })()

js 跨浏览器实现事件的更多相关文章

  1. js 跨浏览器获取事件信息模块

    var EventUtil = { addHandler: function(element, type, handler) { if (element.addEventListener) { ele ...

  2. js实现一些跨浏览器的事件方法

    用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...

  3. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  4. Javascript跨浏览器的事件对象

    一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...

  5. JS跨浏览器的事件处理

    1. 事件流 事件:用户或浏览器自身执行的某种动作.如click(点击事件).mouse***(鼠标事件). 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. DOM事件流包括三个阶段 ...

  6. 跨浏览器的事件对象-------EventUtil 中的方法及用法

    什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...

  7. js关闭浏览器窗口事件

    js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script typ ...

  8. JavaScript跨浏览器绑定事件函数的优化

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

  9. EventUtil——跨浏览器的事件对象

    . 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...

随机推荐

  1. YCSB-mapkeeper

    首先 https://github.com/brianfrankcooper/YCSB/issues/885 最终是使用ycsb-0.1.4 版本进行,这个版本自带jar包 https://githu ...

  2. flume 日志收集单节点

    flume 是 cloudera公司研发的日志收集系统,采用3层结构:1. agent层,用于直接收集日志;2.connect 层,用于接受日志; 3. 数据存储层,用于保存日志.由一到多个maste ...

  3. python 基础之第十二天(re正则,socket模块)

    In [14]: 'hello-wold.tar.gz'.split('.') Out[14]: ['hello-wold', 'tar', 'gz'] In [15]: import re In [ ...

  4. haproxy小结(一)基础概念篇

    HAProxy是法国人Willy Tarreau个人开发的一个开源软件,目标是应对客户端10000以上的同时连接,为后端应用服务器.数据库服务器提供高性能的负载均衡服务.HAproxy可以实现基于TC ...

  5. moco实例

    一.moco模拟接口响应json moco的下载地址见虫师博客园:https://www.cnblogs.com/fnng/p/7511539.html foo.json文件内容如下 [ { &quo ...

  6. su命令,sudo命令,visudo命令

    一.命令su 语法 : su [-] username后面可以跟 ‘-‘ 也可以不跟,普通用户su不加username时就是切换到root用户,当然root用户同样可以su到普通用户. ‘-‘ 这个字 ...

  7. Python批量操作Linux服务器执行命令

    #-*- coding: utf-8 -*- #!/usr/bin/python import paramiko import threading def ssh2(ip,username,passw ...

  8. java一些jar包的bug(不定期更新)

    c3p0-0.9.5.jar 连接池jar包,常用于web项目,关闭连接池时,没有注销所有的driver 解决:可声明一个ServletContextListener的子类并设置监听,重写contex ...

  9. SSH框架搭建的时候遇到的问题

    1.spring-web.jar包问题:使用user libaries方式,识别不到,于是出现了下面问题 java.lang.ClassNotFoundException: org.springfra ...

  10. HDU1010 Tempter of the Bone【小狗是否能逃生----DFS奇偶剪枝(t时刻恰好到达)】

    Tempter of the Bone Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...