attachEvent方法可以动态的为网页内的元素添加一个事件．通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用attachEvent则不必这样做．你把写好的事件准备好，在需要的时候给元素绑定上再执行．而且attachEvent支持为某个元素绑定多个事件．执行顺序是，后绑定的先执行．
那么我在什么时候使用该方法呢，当然在你需要时．不过如今的Web2.0追求的是分离式开发技术．也就是说你在网页内看不到一句JavaScript语句，却在该页中使用了大量JavaScript技术．这就是高手们所谓的分离式开发技术．让前端的显示和程序逻辑分离开来．
如果想删除事件请使用detachEvent
attachEvent方法只支持IE浏览器．与其功能相同的指令是addEventListener,该指令支持FF等浏览器，并且是W3C标准
具体请参看下面实例．

语法：Element.attachEvent(Etype,EventName)

返回值：[tag:return_value /]
参数Element:要为该元素动态添加一个事件．
Etype:指定事件类型．比如：onclick,onkeyup,onmousemove等．．
EventName:指定事件名称．也就是你写好的函数．

attachEvent实例

<html>
<head>
<title>attachEvent方法使用实例</title>
</head>
<body>
<input id="a" type="button" value="点我" />注意该按扭没有任何事件<br/>
<input id="b" type="button" value="点我绑定事件" onclick="att_Event()" />点击该按扭为上面的按扭添加一个事件．
<center><h3>重点提示:你可以尝试多次点击绑定事件，最上面的那个按扭就会绑定多个事件．比如你点击三次绑定．你再点击最上面的按扭，他就会执行三次弹出框．这就是我说的attachEvent方法支持为某个元素绑定多个事件．当然在实际开发中，你可以根据实际情况，来为他绑定多个不同的事件！
<script language="javascript">
function att_Event(){
var a = document.getElementById("a");
a.value = "点我有事件";
a.attachEvent("onclick",Hello_ok);
}

function Hello_ok(){
alert("您好，欢迎来到jiang_yy_jiang的技术空间！本空间的发展离不开您的支持，谢谢您光临！");
}
</script>
</body>
</html>

接下来：addEventListener

addEventListener方法与attachEvent方法功能相同．但是addEventListener是W3C标准，而attachEvent非W3C标准，且只支持IE浏览器．
虽然addEventListener属于标准方法，但依然无法在IE下运行．IE不支持该方法．
addEventListener带有三个参数．必须设置．缺一不可．
addEventListener可以为网页内某个元素动态绑定一个事件．事件类型可随意指定．如:click,mousemove,keyup等．
通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用addEventListener则不必这样做．你把写好的事件准备好，在需要的时候给元素绑定上再执行．而且addEventListener支持为某个元素绑定多个事件．执行顺序是，先绑定的先执行．
那么我在什么时候使用该方法呢，当然在你需要时．不过如今的Web2.0追求的是分离式开发技术．也就是说你在网页内看不到一句JavaScript语句，却在该页中使用了大量JavaScript技术．这就是高手们所谓的分离式开发技术．让前端的显示和程序逻辑分离开来．
如果想删除事件请使用removeEventListener
经过我测试该方法支持FireFox(火狐浏览器)．不支持IE,具体请参看下面实例．

语法：Element.addEventListener(Etype,EventName,boole)返回值：[tag:return_value /]
参数Element:要为该元素绑定一个事件．可以是任意的html元素．
Etype:事件类型.比如：click,keyup,mousemove.注意使用addEventListener绑定事件时，设置参数事件类型时不必写on．否则会出错．
EventName:要绑定事件的名称．也就是你写好的函数．
boole:该参数是一个布尔值：false或true必须填写．false代表支持浏览器事件捕获功能，true代表支持浏览事件冒泡功能．
addEventListener实例<html>
<head>
<title>addEventListener方法使用实例</title>
</head>
<body>
<input id="a" type="button" value="点我" />注意执行网页时该按扭并没有事件<br/>
<input id="b" type="button" value="点我绑定事件" onclick="add_Event()" />点击该按扭为上面的按扭绑定事件<br/>
<h3>注意该实例必须在FireFox(火狐浏览器下运行).你可以根据实际情况，来为他绑定多个不同的事件！addEventListener与<a href="http://hi.baidu.com/jiang_yy_jiang">attachevent</a>不一样的是，该方法不可以把同一事件绑定多次，但支持把不同的事件绑定到一个元素．请使用非IE浏览器测试该例。</h3>
<script language="javascript">
function add_Event(){
var a = document.getElementById("a");
a.value="点我有事件";
a.addEventListener("click",Hello_ok,false);
}

function Hello_ok(){
alert("您好！欢迎来到jiang_yy_jiang的技术空间！本空间的发展离不开您的支持，谢谢您光临！");
}
</script>
</body>
</html>

请注意说明哈！那个很重要，开发人员要注意细节！

看了上面的你在想，这两个方法浏览器不兼容，咋办，当然！老办法咯！！先判断是IE还是火狐嘛，这个简单看下面代码：

<script type="text/javascript">
        function att_Event() {
            var a = document.getElementById("a");
            a.value = "点我有事件";
            if (document.all) {//IE
                a.attachEvent("onclick", Hello_ok);
            }
            else {//FF,Chrome，Safari
                a.addEventListener("click", Hello_ok, false);
            }
        }
        function Hello_ok() {
            alert("您好，我测试attachEvent时间方法！");
        }
    </script>

attachEvent和addEventListener详解的更多相关文章

  1. addEventListener详解

    为什么需要addEventListener? 先来看一个片段: html代码 <div id="box">追梦子</div> 用on的代码 window.o ...

  2. (转)addEventListener()与removeEventListener()详解

    转自:http://www.111cn.net/wy/js-ajax/48004.htm addEventListener()与removeEventListener()用于处理指定和删除事件处理程序 ...

  3. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  4. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  5. ****基于H5的微信支付开发详解[转]

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  6. javascript event（事件对象）详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  7. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  8. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  9. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

随机推荐

  1. 第四节　Code 39 码 / 三九码

    39码是西元1974年发展出来的条码系统,是一种可供使用者双向扫瞄的分散式条码,也就是说相临两资料码之间,必须包含一个不具任何意义的空白(或细白,其逻辑值为0),且其具有支援文数字的能力,故应用较一般 ...

  2. java实现电脑远程控制完整源代码（转）

    Java JDK1.4 的Robot对象,该对象可以完成屏幕图像截取操作,控制鼠标,键盘,如此便可以轻而易举地实现远程服务器的控制.本文向大家介绍如何用Java Robot对象实现远程服务器的控制,并 ...

  3. python概要

    python与r语言接口Rpy,统计 科学计算,数值拟合:numpy,scipy 可视化2d:matplotlib,Pylab 可视化3d:mayaviz 复杂网络:networkx 交互终端: bs ...

  4. Windows SDK笔记（经典--一定要看）

    Windows SDK笔记(一):Windows程序基本结构 一.概述 Windows程序具有相对固定的结构,对编写者而言,不需要书写整个过程,大部分过程由系统完成.程序中只要按一定的格式填写系统留给 ...

  5. Spring (一) IOC ( Inversion Of Control )

    前序 现在小米手机很火就还拿小米手机来举例子,上一篇写的关于SSH框架搭建是从小米手机公司内个整个流程方面来考虑,如何提高效率生产效率,这篇博客主要从公司外部环境说明如何提高生产效率,那么怎么才能提高 ...

  6. Shell脚本运行hive语句 | hive以日期建立分区表 | linux schedule程序 | sed替换文件字符串 | shell推断hdfs文件文件夹是否存在

    #!/bin/bash source /etc/profile; ################################################## # Author: ouyang ...

  7. iOS7支持九宫格

    Beta4支持九宫格 还没试,等最终版把,现在的有很多bug还比较费电 看网上有人说虽然终于出来了但是还是不如百度搜狗等输入法方便 前几个月在weiphone上还有人问支不支持结果回帖的都说没戏 这算 ...

  8. ASP.NET身份验证的几种方式

    1.windows身份验证 2.  Forms验证 3.Passport验证 4.none http://www.jb51.net/article/30510.htm

  9. 【Oracle】不安装Oracle客户端直接用PL/SQL连接数据库

    1.下载 instantclient_11_2.zip PL/SQL2.解压instantclient_11_2.zip到相应文件夹,比如:E:\oracleclient\instantclient_ ...

  10. iOS UISearchBar UISearchController

    搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 交,O2O还是在线教育等都会有一个搜索栏的实现,不过彼此实现效果是 ...