事件处理程序（addEventListener 和 attachEvent）
1.addEventListener 和 removeEventListener
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值
缺点：不兼容IE
<body>
<input type="button" value="按钮3" id="btn3">
</body>
<script type="text/javascript">
function showMes(event){
alert(event.type);
}
var btn3 = document.getElementById('btn3');
btn3.addEventListener('click',showMes,false);
btn3.addEventListener('click',function(){
alert(this.value);
},false);
btn3.removeEventListener('click',showMes,false); </script>
2.attachEvent和detachEvent
接收两个参数：事件处理程序的名称和事件处理程序的函数
btn3.attachEvent('onclick',showMes);
然而，我们不能光为了chrome等浏览器只用addEventListener,或者光为了IE只用attachEvent，故而要将其融合起来用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="button" value="按钮3" id="btn3">
</body>
<script type="text/javascript">
function showMes(event){
alert(event.type);
}
var btn3 = document.getElementById('btn3');
var eventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}
else{
element['on'+type] = handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type] = null;
} } }
eventUtil.addHandler(btn3,'click',showMes);
</script>
</html>
事件处理程序（addEventListener 和 attachEvent）的更多相关文章
- Javascript添加事件的addEventListener()及attachEvent()区别分析，事件委托
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- JS事件-事件处理程序-笔记总结ing...
html事件处理程序:缺点-行为与结构耦合<input type="button" onclick = "diaoyong();"> dom0级事件 ...
- js 事件处理程序 事件对象
事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- JavaScript中的事件处理程序
JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用事件处理程序来预订事件,以便在事件发生的时候执行响应的代码.这种观察者模式的模 ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
- JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...
- 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...
- 浅谈JavaScript的事件（事件处理程序）
事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...
- Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
随机推荐
- iOS 10 的适配问题-b
随着iOS10发布的临近,大家的App都需要适配iOS10,下面是我总结的一些关于iOS10适配方面的问题,如果有错误,欢迎指出. 1.系统判断方法失效: 在你的项目中,当需要判断系统版本的话,不要使 ...
- VS2010界面主题更换全过程
VisualStudio 2010的界面默认是蓝色的,背景是白色,字体是宋体,这些设置习惯了还好,但是可能看多了不怎么舒服.而且如果以前是用VS 6.0的知道,它使用的字体更为舒服清晰.所以,可以对V ...
- jquery.dragsort实现列表拖曳、排序
在一次工作中需要将功能模块实现拖曳并且排序,并且将排序结果保存到数据库,用户下次登录后直接读取数据库排序信息进行显示.LZ找了好多插件,最后发现 jquery.dragsort 这款插件是最好使用的, ...
- jsp的静态包含与动态包含：<%@ include file="" %>和<jsp:include page=""></jsp:include>区别与分析
<%@ include file="" %>是将文件原封不动的copy进现有的文件中,像是拼接好后,再编译成为servlet运行. <jsp:include pa ...
- XSS与CSRF两种跨站攻击比较
XSS:跨站脚本(Cross-site scripting) CSRF:跨站请求伪造(Cross-site request forgery) 在那个年代,大家一般用拼接字符串的方式来构造动态SQL 语 ...
- HDU 2992 Hotel booking（BFS+DFS 或者 SPFA+Floyd）
点我看题目 题意 : 一个司机要从1点到达n点,1点到n点中有一些点有宾馆,司机的最长开车时间不能超过10小时,所以要在10小时之内找到宾馆休息,但是为了尽快的走到n点,问最少可以经过几个宾馆. 思路 ...
- struts2文件下载 火狐浏览器的文件名乱码问题
这是一个文件下载的action,红色部分为火狐浏览器需要特地做的事情. @Controller @Scope(value = "prototype") public class F ...
- adobe 蛋疼的套装， 想安装一个Flash Professional CS6，标准版还没有...
产品比较 查看内容 查看各 Creative Suite 6 版本的组件. Design Standard Design & Web Premium Production Premium Ma ...
- Altium designer中级篇-名称决定多边形连接样式
在工作中积累了诸多小技巧,可以让工作变的更简单,就比如这个多边形铺铜,与大部分规则的不同之处在于,通过更改多边形的名称,就能达到控制多边形规则的效果.这样多边形铺铜变的及其灵活,下面将对这个经验做一个 ...
- Servlet的一些细节问题
Servlet的细节问题 1.一个已经注册的Servlet可以被多次映射即: <servlet> <!-- servlet的注册名 --> <servlet-name&g ...