javascript中addEventListener和attachEvent区别

最新推荐文章于 2024-09-25 22:15:48 发布

flyerwing

最新推荐文章于 2024-09-25 22:15:48 发布

阅读量876

点赞数

文章标签： javascript function 文档 button object 浏览器

本文链接：https://blog.csdn.net/flyerwing/article/details/5010976

版权

javascript中addEventListener和attachEvent区别

object.addEventListener(type, listener, useCapture);
object:文档节点
type:字符串，事件名称如“click”、“mouseover”、“keydown”

listener: 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture: 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false

attachEvent(”submit”);
事件触发时，会将一个 Event 对象传递给事件处理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同，同时在使用的过程中要注意
attachEvent方法IE中使用
addEventListener方法活狐类中使用

W3C格式:

removeEventListener(event,function,capture/bubble);

IE的格式:

detachEvent(event,function);

示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function fu1(){alert("function1");}
function fu2(){alert("function2");}
function fu3(){alert("function3");}
</script>
</head>

<body>
<input type="button" value="按钮" id="btn" />
</body>
<script language="javascript">
var btn=document.getElementById("btn");
/*btn.attachEvent("onclick",fu1);
btn.attachEvent("onclick",fu2);
btn.attachEvent("onclick",fu3);*/
btn.addEventListener("click",fu1,false);
btn.addEventListener("click",fu2,false);
btn.addEventListener("click",fu3,false);
</script>
</html>