文档章节

【JS进阶2】attachEvent()/addEventListener() 对象添加触发事件

kevin_pang
 kevin_pang
发布于 2015/03/25 16:49
字数 263
阅读 29
收藏 0

js addEvent 绑定 分析:

function addEvent(elem, eventName, handler){
    if (elem.addEventListener) {
        elem.addEventListener(eventName, handler, userCapture);
    } else if (elem.attachEvent) {
        elem.attachEvent("on" + eventName, handler);
    }
};

FireFox -> addEventListener 第三个参数 userCapture

userCapture若为true,则浏览器采用Capture(捕获)方式,若为false则采用bubbing(冒泡)方式,建议用false。

有时候当某一对象的某一事件被触发时,它所要执行的程序可能是一大串,有可能是要呼叫某一函数,也有可能同时又要呼叫另一函数。

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行

在(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

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

看看gmail的代码

var Ka=navigator.userAgent.toLowerCase(); 
var rt=Ka.indexOf("opera")!=-1; 
var r=Ka.indexOf("msie")!=-1&&(document.all&&!rt); 

function Zl(a,b,c){if(r){a.attachEvent("on"+b,c)}else{a.addEventListener(b,c,false)}}


© 著作权归作者所有

kevin_pang
粉丝 9
博文 49
码字总数 80470
作品 0
深圳
程序员
私信 提问
javaScript事件(二)事件处理程序

javaScript事件(二)事件处理程序 一、事件 二、事件流 以上内容见:javaScript事件(一)事件流 三、事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouse...

蜗牛奔跑
2015/06/24
21
0
attachevent与addEventListener

attachEvent(IE)与addEventListener(FF) Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点、document、window 或 XMLHtt......

xianson
2012/08/11
95
0
理解:javascript中DOM0,DOM2,DOM3级事件模型

理解:javascript中DOM0,DOM2,DOM3级事件模型 javascript中的事件 javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听...

mamadu
2017/10/13
0
0
javascript中DOM0,DOM2,DOM3级事件模型解析

DOM 即 文档对象模型。 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface)借助于它程序能够动态地访问和修改文档内容、结构或显示样式。 DOM3级顾名思义有三...

木头先生
2017/11/15
0
0
多种DOM事件处理程序分析及跨浏览器的事件解决方案

一.HTML事件处理程序 <input id="btn" type="button" value="按钮" onclick="showMsg()"> 缺点:高耦合,修改事件的时候需要同时修改js和HTML页面 二.DOM0级事件 三.DOM2级事件 浏览器支持......

Simon_ITer
2016/08/17
42
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部