事件处理程序（addEventListener 和 attachEvent）
2024-04-16 09:39:51
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>
最新文章
- ASP.NET MVC 视图(四)
- CentOS7安装Oracle 11gR2 安装
- Registered Nurse in the US
- 【mysql】添加对emoji的支持
- shell 里把命令的输出赋给变量 以及变量的使用
- C#获取ip的示例
- JDBC之初识
- 未来 USB Type-C 将可靠软体判断线材是否符合规定
- 在MVC或WEBAPI中记录每个Action的执行时间和记录下层方法调用时间
- C#后台执行bat
- 【转】MFC获取程序目录路径方法
- (Unsupported class version number [52.0] (maximum 51.0, Java 1.7))
- [SDOI 2012]Longge的问题
- 应用MySQL（开启远程登录权限）
- WPF(一)
- servlet 会话管理
- nginx 反向代理案例
- QT QML 3D模型查看器
- LY.猜字小游戏
- 【个人经历】记自己的第一次GitHub开源代码共享经历