`
xuantian868
  • 浏览: 31104 次
  • 性别: Icon_minigender_1
  • 来自: 济南
最近访客 更多访客>>
社区版块
存档分类
最新评论

JS注册事件 JS:attachEvent和addEventListener 使用方法

阅读更多
zt:http://www.cnblogs.com/konooo/archive/2008/11/04/1326088.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS</title>
</head>
<body>
    <input id="para" type="text" />
   <script type="text/javascript">
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

window.onload = function(){
         var element =  document.getElementById("para");
         if(element.addEventListener){  // firefox  , w3c
                element.addEventListener("focus",test,false);
    element.addEventListener("focus",pig,false);
         } else {   // ie
    element.attachEvent("onfocus",test);
    element.attachEvent("onfocus",pig);
         }
}
</script>
</body>

</html>

****************实例结束**************************



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

两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)

addEventListener方法 用于 Mozilla系列

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

写成这样:
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

使用实例:
1。 var el = EDITFORM_DOCUMENT.body; 
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}2。 if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
} 


detachEvent和removeEventListener
detachEvent('onclick',func);//ie下使用删除事件func
removeEventListener('click',func);//Mozilla下,删除事件func


分享到:
评论

相关推荐

    attachEvent和addEventListener 使用方法

    在JavaScript中,`attachEvent` 和 `addEventListener` 是两种用于为元素添加事件处理程序的方法,主要在Internet Explorer和非IE浏览器(遵循W3C标准)中使用。它们都是用来监听和响应用户或浏览器的特定行为,如...

    javascript attachEvent和addEventListener使用方法

    本知识点将介绍 JavaScript 中两种常用的方法:attachEvent 和 addEventListener,以及它们在不同浏览器中的应用和区别。 首先,attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法,它的语法是:...

    js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEventListener方法 兼容火狐谷歌,不兼容IE8及以下 ...

    JS在IE和FF下attachEvent,addEventListener学习笔记

    本文将探讨在 Internet Explorer (IE) 和 Firefox (FF) 浏览器中处理事件的方法,特别关注 `attachEvent` 和 `addEventListener` 的使用。 #### 二、事件处理概述 在 JavaScript 中,事件是指由用户或浏览器引发的...

    IE11没有window.attachEvent方法处理方法

    除了上述方法外,还可以考虑直接修改JavaScript代码,使用`addEventListener`方法替代`attachEvent`。这种方式的好处是不仅解决了IE11不支持`attachEvent`的问题,还让代码变得更加标准化和简洁。示例代码如下: ``...

    JavaScript程序设计——事件处理实验报告.docx

    - **JavaScript事件注册**:通过`addEventListener`或`attachEvent`(IE浏览器)为元素添加事件监听器,也可以使用HTML属性直接绑定事件处理函数,如`onclick="functionName()"`。 - **事件处理函数**:定义函数来...

    addEventListener和attachEvent二者绑定的执行函数中的this不相同

    在JavaScript中,`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法,但它们之间存在一些关键差异,特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分,被大多数现代浏览器支持...

    JavaScript事件机制详细研究

    在使用 addEventListener 或 attachEvent 时,需要注意 IE 浏览器的兼容性问题,IE 浏览器使用 attachEvent 方法,而不是 addEventListener 方法。因此,在编写跨浏览器兼容的代码时,需要使用条件语句来判断浏览器...

    javascript动态添加事件.pdf

    综上所述,JavaScript动态添加事件涉及到多种技术,包括`setAttribute`、`attachEvent`、`addEventListener`,以及针对不同浏览器的兼容性策略。在实际开发中,应根据项目需求和浏览器支持情况选择合适的方法。

    javascript事件综合查询

    2. IE事件模型:在IE浏览器中,使用`element.attachEvent`和`element.detachEvent`来绑定和解绑事件。 3. W3C与IE事件模型的融合:现代浏览器普遍支持统一的W3C事件模型,同时为了兼容旧版IE,需要对事件处理进行...

    前端学习笔记,做一个简单的网站-请自定义一个注册事件的兼容函数,要求兼容三种注册事件方法,学习代码

    我们将主要关注三种常见的事件注册方法:`addEventListener`、`attachEvent` 和直接在元素上设置 `on*` 属性。 首先,`addEventListener` 是 W3C 标准推荐的事件处理方式,适用于所有支持 W3C DOM Level 2 的浏览器...

    Javascript 事件 一览表

    3. DOM2级事件处理程序:使用`addEventListener`和`removeEventListener`方法添加和移除事件监听器,支持事件冒泡和捕获,如`element.addEventListener('click', myFunction)`。 三、事件传播 1. 事件冒泡:事件从...

    Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,不含“on”,比如“click”...

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

    可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到[removed]中,但是这样并不是很方便,有时我们需要两个同时用到。这时就要用window....

    浅谈addEventListener和attachEvent的区别

    在JavaScript中,处理DOM事件监听有两个主要的方法:`addEventListener` 和 `attachEvent`。这两个方法在功能上相似,但存在一些关键的区别,特别是在浏览器兼容性和事件处理方式上。 `addEventListener` 是W3C标准...

    NativeJS随记 - 浅析JavaScript Events

    3. **事件传播**:事件传播分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件从最外层元素向目标元素传递(捕获阶段),然后到达目标元素(目标阶段),最后从目标元素向上冒泡到最外层元素(冒泡阶段)。可以通过`...

    JS 事件汇总,js 鼠标事件,网页js大全

    - 事件处理程序主要有两种方式:`addEventListener`和`attachEvent`(IE浏览器特有)。前者是标准方法,支持同时绑定多个事件处理函数,后者只支持一个。 2. **JS鼠标事件** - `click`:鼠标单击元素时触发。 - ...

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    - **IE浏览器支持**:如果检测到不支持标准方法,那么函数会尝试使用`attachEvent`和`detachEvent`来添加和移除事件监听。 - **老旧浏览器**:如果浏览器既不支持`addEventListener`也不支持`attachEvent`,则直接...

Global site tag (gtag.js) - Google Analytics