attachEvent和addEventListener详解
attachEvent方法可以动态的为网页内的元素添加一个事件.通常你想为某个按扭添加一个单击事件时.你都会在按扭内写上οnclick=事件名称.使用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="点我绑定事件" οnclick="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等.
通常你想为某个按扭添加一个单击事件时.你都会在按扭内写上οnclick=事件名称.使用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="点我绑定事件" οnclick="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>
转载于:https://www.cnblogs.com/smght/p/5390173.html
attachEvent和addEventListener详解相关推荐
- JavaScript 的addEventListener() 事件监听详解!
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- php 工商银行公众号支付代码_微信支付PHP SDK —— 公众号支付代码详解
在微信支付 开发者文档页面 下载最新的 php SDK 这里假设你已经申请完微信支付 1. 微信后台配置 如图 我们先进行测试,所以先把测试授权目录和 测试白名单添加上.测试授权目录是你要发起微信请 ...
- shell中的mput_FTP命令详解 及 shell中的使用
FTP命令详解 FTP的命令格式为:ftp-v-u-d-i-n-g[IP地址]-v显示远程服务器的所有响应信息(verbose:详细,繁冗)-n限制ftp的自动登录,即不使用-d使用调试方式(debu ...
- jsapi支付签名_PHP实现微信支付(jsapi支付)流程步骤详解
最近接触到一个项目,涉及到微信支付,搞微信开发这么久以来,还没搞过支付,之前也就搞过公众号发红包,感谢前辈们的探索,我看了他们的博文,让我少走了很多弯路. 前期准备: 1.微信认证服务号,并且开通了微 ...
- 详解JavaScript变量类型判断及domReady原理 写得很好
原文:详解JavaScript变量类型判断及domReady原理 我们知道,在开发JavaScript时候,经常要判断JavaScript变量类型,此 JavaScript教程 详细介绍JS变量的判断 ...
- 微信支付 php详解,PHP实现微信支付实战案例详解
这次给大家带来PHP实现微信支付实战案例详解,PHP实现微信支付的注意事项有哪些,下面就是实战案例,一起来看一下. 前期准备: 1.微信认证服务号,并且开通了微信支付 2.微信支付SDK,下载地址:h ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...
- JS详解 | 对象 事件 节点 | 系统性学习 | 无知的我费曼笔记
无知的我正在复盘js- 文章目录 JavaScript 1 常用命令 输出语句 转换为字符串 得到变量类型 1 获取元素对象 1.1 H5新增获取元素对象 1.2 直接获取特殊元素对象 2 事件三要素 ...
- Js事件模型、事件详解
六.Js中的事件详解 A 事件流(event flow ) 事件模型分为两种:冒泡型事件.捕获型事件. 冒泡型(dubbed bubbling )事件:指事件按照从最精确的对象到最不精确的对象的 ...
最新文章
- PyTorch代码调试利器: 自动print每行代码的Tensor信息
- 《因果学习周刊》第9期:因果学习中的工具变量
- 11Grac+ASM+linux2.6.18 processes (100) exceeded
- mysql怎么引用别的文件_用source语句引用mysql文件的细节注意
- Netty ObjectPool对象池技术原理分析
- Aspose.Words如何在文档中添加水印
- 【Swift学习笔记00】——enumeration枚举类型遵循协议protocol
- python观察日志(part4)--字符串拼接方式
- 二:Go编程语言规范-类型
- 高校网络中心主任挨骂冤不冤?
- install mysql 5.6.22 source code
- Bristol的第18篇密码学
- qq降龙v5java_java编辑器
- 南京邮电大学计算机科学楼,南京邮电大学bbs
- idea代码编辑CPU使用率飙升100%
- Nginx模块开发之http handler实现流量统计(进阶篇)
- java中Date类之GMT、UTC
- Simon 5有哪些新功能? Simon 5 Mac版新功能介绍
- React中setState的怪异行为 ——setState没有即时生效
- workbench应力应变曲线_ansys workbench中的7种应力结果如何理解
热门文章
- 简单算术表达式计算器
- unity灯光Lightmapping、LightProbes
- poj 2649 Factovisors
- EF之Code First代码优先
- jQuery UI 拖动(Draggable) - 还原位置
- 深入理解JavaScript (5) —— 闭包
- Java+jquery+jsonp实现跨域
- ubuntu16系统中pycharm下使用git将代码提交到github仓库
- 风险案例-24期-缺少严格的变更及版本控制流程,导致问题反复,调试工作量和时间增加...
- C#保存PictureBox或Bitmap图片为bmp|png|gif|jpg格式