`
jackeysion
  • 浏览: 129575 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

attachEvent和addEventListener方法的使用

阅读更多
Javascript 动态地给元素添加事件,取代在元素上写onclick

一般情况下直接在元素上添加事件的写法如下:

<img id=”zh_img” src=”xxx/xx.gif” onClick=”return method1 (  );” />  

<img id=”zh_img” src=”xxx/xx.gif” onClick=”return method1 (  );” /> 

而在js脚本中也可以动态为这个元素添加事件:
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){
//适用用IE浏览器
  el.attachEvent('onclick', KindDisableMenu);
}
2.
  if (window.addEventListener) {
  window.addEventListener('load', _uCO, false);
  } else if (window.attachEvent) {
//适用用IE浏览器
  window.attachEvent('onload', _uCO);
}

绑定到带参数的方法,比如说直接在元素上添加事件的写法如下:
 <img id=”zh_img” src=”xxx/xx.gif” onClick=”return opentree(id,level);” />  

  <img id=”zh_img” src=”xxx/xx.gif” onClick=”return opentree(id,level);” /> 


使用绑定的方法,先要封装opentree(id,level)这个函数
var newopen = function(id,level)
{
  return function()
  {
    opentree(id,level);   //该函数为外部定义的一个带参数的执行函数
  }
}
绑定时把带数也写入,写法如下:
Var x=document.getElementById(“zh_img”);  // zh_img为元素的id
x.attachEvent("onclick",newopen(id,parseInt(level)+1));
注:调用的是newopen,而不是直接调用opentree



js 中调用attachEvent传参数的问题
在JavaScript中调用attachEvent时,由于JS闭包的问题不能直接将函数HANDLE传递,要经过如下改造

var deleteFile = function(fileName){
     return function(){
        alert(fileName);
     }
   }

imgElement.attachEvent("onclick",deleteFile(fileName));


分享到:
评论

相关推荐

    attachEvent和addEventListener 使用方法

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

    javascript attachEvent和addEventListener使用方法

    在使用 attachEvent 和 addEventListener 方法时,需要注意以下几点: 1. 在 attachEvent 中,最后一个绑定的函数会最先执行,而在 addEventListener 中,绑定的函数按照绑定顺序执行。 2. attachEvent 只能用于 IE8...

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

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

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

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

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

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

    浅谈addEventListener和attachEvent的区别

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

    js绑定事件和解绑事件

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

    JavaScript通过attachEvent和detachEvent方法处理带参数的函数

    在探讨JavaScript中使用attachEvent和detachEvent方法处理带有参数的函数之前,我们先要了解这两个方法分别是什么以及它们的作用。attachEvent和detachEvent是早期IE浏览器特有的,用于为DOM元素添加或移除事件监听...

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

    这时就要用window.attachEvent和window.addEventListener来解决一下。 下面是一个解决方法。至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 代码如下: if (document.all){ window....

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

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

    attachEvent的使用方法与传递参数[IE|firefox]|angluo-javascript-37392.pdf

    `attachEvent`是Internet Explorer浏览器特有的事件处理方法,用于将函数绑定到DOM元素的特定事件上,例如点击、鼠标移动等。与W3C标准的`addEventListener`不同,`attachEvent`并不支持事件捕获阶段,并且它的事件...

    self.attachevent is not a function的解决方法

    总之,解决`self.attachevent is not a function`错误的关键在于理解`attachEvent`和`addEventListener`的区别,并通过条件判断或者使用库来实现跨浏览器的兼容性。同时,对于事件处理的模式选择,应根据实际需求和...

    addEventListener 的用法示例介绍

    在Internet Explorer(IE)浏览器中,由于其使用了不同的事件模型,需要使用`attachEvent`方法来达到类似的效果: ```javascript var btn1Obj = document.getElementById("btn1"); btn1Obj.attachEvent("onclick", ...

    解决使用attachEvent函数时,this指向被绑定的元素的问题的方法

    但在某些场景下,我们希望`this`能够指向触发事件的那个DOM元素本身,这样可以直接访问到元素的属性和方法。 对于现代浏览器,如Chrome、Firefox等,使用`addEventListener`方法时,可以通过`bind`方法轻松地改变...

Global site tag (gtag.js) - Google Analytics