在原生操作dom元素的时候,常常需要用到一个dom绑定多个事件,比如一个元素既要点击又要数遍移入;要同时监听到两个事件原生需要addEventlistener
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绑定多个事件</title>
</head>
<body>
<button id="btn">点击显示</button>显示:
<div id="box"></div>
</body>
<script>
window.onload = function () {
var box = document.getElementById("box");
document.getElementById("btn").addEventListener("click", function () {
box.innerText = "这是第一个元素";
});
document.getElementById("btn").addEventListener("dblclick", function () {
box.innerText = "这是第二个元素";
});
};
</script>
</html>
addEventListener的参数值得说一下,
第一个参数是事件名称,没有on,
第二个是回调函数,其实是浏览器调用的,
第三个是 是否捕获阶段触发,一般设置为false,
还有就是这个方法是先绑定的先执行
另外,经过测试,发现这个addEventListener在IE8及一下版本不支持,可以使用attachEvent方法开替代,当然,是兼容处理
这个用法如下:
元素.attachEvent( 'onclick', function(){
...} );
如果是JQuery库的话 使用on即可:
$("#btn").on("click", function () {
$("#box").text("这是第二个元素");
});