http://www.jb51.net/article/49858.htm

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

(要注意的是div必须放到js前面才行)

一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如:

复制代码代码如下:
document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3; 

那么将只有method3生效。

如果是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

如果是ie系列,用attachEvent可以让多个事件按顺序都实现,比如:

复制代码代码如下:
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的使用方式

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 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

DOM2 的进化:

DOM 0 Event DOM 2 Event
onblur() blur
onfocus() focus
onchange() change
onmouseover() mouseover
onmouseout() mouseout
onmousemove() mousemove
onmousedown() mousedown
onmouseup() mouseup
onclick() click
ondblclick() dblclick
onkeydown() keydown
onkeyup() keyup
onkeypress() keypress
onsubmit() submit
onload() load
onunload() unload

新的DOM2 用法可以addEventListener()这个函数来观察到:

复制代码代码如下:
addEventListener(event,function,capture/bubble); 

参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件. 
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:

复制代码代码如下:
window.attachEvent(”submit”,myFunction()); 

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.

如何判断是否支持哪种监听呢?如:

复制代码代码如下:
if (typeof window.addEventListener != “undefined”) { 
window.addEventListener(”load”,rollover,false); 
} else { 
window.attachEvent(”onload”,rollover) 

上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区

window.addeventlistener使用方法的更多相关文章

  1. window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件.这时就要用window.attachEvent和window.addEventLi ...

  2. (转载)JS事件监听 JS:attachEvent和addEventListener使用方法

    (转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...

  3. JS事件监听 JS:attachEvent和addEventListener 使用方法

    attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListene ...

  4. BOM 浏览器对象模型_window 对象的常见 window.属性_window.方法

    1. 常用属性 window.devicePixelRatio        像素比 = css / 物理像素 window.scrollX,window.scrollY    滚动条 卷曲距离 if ...

  5. window.addEventListener('error')监听页面是否更新版本

    因本司更新迭代的速度很快,有时候更改一个BUG就要马上更新版本,就会引起用户在应用当中,页面点击无反应,其实是打包的js和css的包名称更改,找不到以前的包的缘故.我现在用一个小方法,判断js或css ...

  6. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  7. html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

    /** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...

  8. 如何真正重写window对象的方法

    重写window对象的方法不是一件新奇的事,比如我们可能需要改变默认alert的行为,如何安全的重写呢? 小菜看到某知名IT网站是这样的写法: window.alert = function(){}; ...

  9. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

随机推荐

  1. sphinx 全文搜索引擎

    sphinx的安装与配置 --------------------------------------------------------------------------------------- ...

  2. javascript macrotask & microtask

    先看一个 实例 案例 console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Pr ...

  3. leetcode 66. Plus One(高精度加法)

    Given a non-negative number represented as an array of digits, plus one to the number. The digits ar ...

  4. javacpp-FFmpeg系列之3: 像素图像数据转换(BGR与BufferdImage互转,RGB与BufferdImage互转,BufferdImage转Base64编码)

    javacpp-ffmpeg系列: javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片 javacpp-FFmpeg系列之2:通用拉流解码器,支持视频拉流解码并转 ...

  5. 图形化升级单机oracle 11.2.0.1 到 11.2.0.4

    1. 讲补丁包上传到 oracle server ,解压.安装 [root@11g ~]#unzip p13390677_112040_Linux-x86-64_1of7.zip -d /tmp &a ...

  6. poj3013Big Chrismas Tree——树转换spfa

    题目:http://poj.org/problem?id=3013 看似生成树,实则最短路,可以将题意转化为点权*根到此点的边权和(最短路使其最小). 代码如下: #include<iostre ...

  7. bootstrap模版兼容IE浏览器代码嵌入

    1.  bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxc ...

  8. CSharp读取配置文件的类(简单实现)

    Reinventing the wheel 系列 CSharp 读取配置文件的类 简单实现(注意没有写) 本人对CS 不是很熟,库也不熟,所以到网上找个实现,并自己添加了点异常.如果只是读取信息,足够 ...

  9. ICU 是一种说不出的痛啊

    USE [Nursing] GO /****** Object: StoredProcedure [dbo].[P_GetICUVitualSign] Script Date: 05/21/2015 ...

  10. 细说ASP.NET Forms身份认证 别人写的不过很透彻就转来了以后用时再看

    阅读目录 开始 ASP.NET身份认证基础 ASP.NET身份认证过程 如何实现登录与注销 保护受限制的页面 登录页不能正常显示的问题 认识Forms身份认证 理解Forms身份认证 实现自定义的身份 ...