您的位置：首页 > Web前端 > JavaScript

Javascript中的事件绑定

2015-09-05 20:29 716 查看

1. 事件绑定

js的事件绑定是前端基础知识点。

我们经常会习惯这样添加一个事件：

<html>
<head>
<meta charset="utf-8">
<title>JS事件机制</title>
</head>
<body>
<button id="btn">botton</button>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("1");
}
btn.onclick = function(){
alert("2");
}
</script>
</html>

这样绑定的好处是简单，但是运行上述程序就会发现，只会alert2，并不能alert1。这就是简单事件添加的缺点。

现在我们来讨论js事件绑定。

这里要介绍一个方法addEventListener

object.addEventListener(“click”,function,false);

这个方法第一个参数是要绑定的事件名称，要注意的是，这里的事件名称是没有on的，比如onclick得写成click，onmouseover写成mouseover。

第二个参数是需要执行的方法，若是已定义的方法，直接写方法名即可。

第三个参数是选择事件的机制，true是捕获绑定，false是冒泡绑定，如果不写的话默认是false。

下面来说说捕获绑定和冒泡绑定：

JS 事件的生命周期：捕获，目标，冒泡。

捕获：浏览器从上向下捕获触发事件的元素，沿途从上向下检查每个元素是否对捕获敏感，如果敏感，则先执行敏感的函数。

目标：浏览器找到该元素，执行该元素需要执行的函数。

冒泡：目标事件执行后，浏览器由该元素从下向上检查沿途节点是否对冒泡机制敏感，若敏感，则执行该敏感函数。

看个例子：

<html>
<head>
<meta charset="utf-8">
<title>JS事件机制</title>
<style type="text/css">
#big {
width: 300px;
height: 300px;
background-color:blue;
overflow: hidden;
}
#small {
width: 150px;
height: 150px;
background-color: red;
margin-left: 75px;
margin-top: 75px;
text-align: center;
float: left;
overflow: hidden;
}
#btn {
width: 100px;
float: left;
margin-top: 50px;
margin-left: 25px;
}
</style>

</head>
<body>
<div id="big">
<div id="small">
<button id="btn">点击我触发事件，注意事件的先后顺序。</button>
</div>
</div>
</body>
<script type="text/javascript">
var big = document.getElementById("big");
var small = document.getElementById("small");
var btn = document.getElementById("btn");

big.addEventListener("click",show,true);
small.addEventListener("click",show,false);
btn.addEventListener("click",show);

function show(){
alert(this.id);
}
</script>
</html>

说明：

在DOM结构上，btn有两个父级元素，small，big。现在给三个元素都绑定事件，但是big绑定的是捕获敏感，small绑定的是补货不敏感。

所以，当点击btn触发事件时，浏览器启动事件机制，向下捕获元素，遍历目标节点的所以父元素，并查看其是否对捕获敏感；big对捕获敏感，则执行big绑定的函数，small不敏感，则不执行。

捕获到了目标节点，捕获阶段结束，执行目标事件。

执行结束之后，向上遍历，查看其父元素有没有对捕获阶段不敏感（也就是对冒泡阶段敏感）的，找到并执行。

所以弹出的id顺序为：big，btn，small。

使用addEventListener的好处是：

可以为一个元素同时绑定很多事件，同名事件的先后顺序由其绑定的先后来决定。

同事可以选择捕获机制还是冒泡机制，设定执行顺序。

但是上述方法是在遵循W3C标准的浏览器上才能实现的，IE上有自己的方法。

Object.attachEvent(“onclick”,function);

在IE中，只有冒泡机制没有捕获机制，所以他没有第三个参数。

另外注意，这里的事件名称是onclick，区别于addEventListener。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端基础 javascript

相关文章推荐

新的分享

章节导航