`
weiweichen1985
  • 浏览: 140958 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

关于attachEvent和addEventListener

    博客分类:
  • AJAX
阅读更多

今天学习了一下attachEvent和addEventListener这两个方法

具体代码如下:

=============================================

<html>
<script language="javascript">
    /*
     页面加载时在页面内放置一个层
 */
    document.writeln("<div id='divMix'>&nbsp;</div>");
</script>
<script language="javascript">
    /*
     创建一个按钮,奖其放在先前放置的层内
  使用attachEvent或者addEventListener方法不其注册事件
 */
 var btn=document.createElement("input");
 btn.setAttribute("type","button");
 btn.setAttribute("id","btnEle");
 btn.setAttribute("value","点击我");
 /*
  判断浏览器类型
  我的机器装了4种浏览器(IE,傲游,火狐,netscape)
  我试验的结果是
  IE,傲游支持attachEvent;而火狐,netscape支持addEventListener
 */
 if(btn.attachEvent){
  btn.attachEvent("onclick",method1);
  btn.attachEvent("onclick",method2);
  btn.attachEvent("onclick",method3); 
  /*
     三个方法调用的顺序是method2>method3>method1
     而很多人的博客上看到的却是method3>method2>method1
     很是奇怪,不知是不是浏览器版本的问题,当前IE6.0
  */
 }
 else if(btn.addEventListener){
  btn.addEventListener("click",method1,true);
  btn.addEventListener("click",method2,true);
  btn.addEventListener("click",method3,true);
 }
 /* 获取先前创建的层对象 */
 var div=document.getElementById("divMix");

 /* 使用typeof运算符判断获取的层对象是否存在
    如果存在则奖创建的按钮放到层里面,反之则提示没有
    找到相关对象
 */
 if(typeof(div)=="object"){
     div.appendChild(btn);
  /*
     火狐,netscape好像不支持appendChild这个方法
     所以在火狐,netscape看不到效果
  */
 }else{
  alert("没有找到相关对象!");
 }
 

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


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


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

</script>
<body>
</body>
</html>

分享到:
评论

相关推荐

    attachEvent和addEventListener 使用方法

    在JavaScript中,`...以上就是关于 `attachEvent` 和 `addEventListener` 的使用方法及其区别的详细介绍,它们在JavaScript事件处理中起着至关重要的作用。正确理解和使用这些方法可以提高代码的健壮性和兼容性。

    javascript attachEvent和addEventListener使用方法

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

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

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

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

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

    浅谈addEventListener和attachEvent的区别

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

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

    `attachEvent`是IE4至IE8特有的事件绑定方式,而`addEventListener`则是一种更通用、更符合W3C标准的方法,被现代浏览器广泛支持。当我们在IE11中尝试使用`attachEvent`时,会发现该方法并不存在。这是因为IE11已经...

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

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

    js绑定事件和解绑事件

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

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

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

    addEventListener 的用法示例介绍

    DOM2级事件还引入了一系列新的事件类型,如`onblur`、`onfocus`、`onchange`等,以及与鼠标和键盘相关的事件,这些事件可以配合`addEventListener`进行处理,使得JavaScript能够更精确地响应用户操作。 总的来说,`...

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

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

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

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

    讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

    在本文中,我们将深入探讨`this`指针的用法以及IE的`attachEvent`与Firefox的`addEventListener`在事件处理上的差异。 首先,让我们来理解`this`的用法。在JavaScript中,`this`通常指向调用函数的那个对象。例如,...

Global site tag (gtag.js) - Google Analytics