JavaScript高级事件绑定

0级事件绑定

0级事件绑定，就是我们惯常使用的使用 onclick 这些事件绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let body = document.getElementByTagName[0];
body.onclick = function() {
  alert(123);
}

//但是这里有一个问题，就是，假如我们要绑定多个事件，那么后面的，会把前面的覆盖。

body.onclick = function() {
  alert(456);
}

//第二个，onclick事件，会把前面的覆盖掉。


二级事件绑定

使用 addEventListener 进行二级事件绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13

let body = document.getElementByTagName[0];
body.addEventListener('click',function(){
    alert('hello');  
})

body.addEventListener('click',function(){
    alert('world');  
})

//这里就是二级事件的好处，就是可以绑定多个事件，然后按照顺序执行


解绑定

解绑定也很简单，使用 removeEventListener

1
2
3
4
5
6
7
8
9
10

let body = document.getElementByTagName[0];
body.addEventListener('click',function(){
    alert('hello');  
})

bt.removeEventListener('click',function(){
    alert('移除');
})

捕捉和冒泡

当一个炸弹从中国的北京的海淀区爆炸，这个声音肯定是先由海淀区的人听到，然后辐射到北京，再然后是中国，当然，如果有这么厉害的炸弹的话。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
	.cn {
		width: 300px;
		height: 300px;
		border: 1px solid green;
	}

	.bj {
		width: 200px;
		height: 200px;
		border: 1px solid green;
	}
	.hd {
		width: 100px;
		height: 100px;
		border: 1px solid green;
	}
</style>
</head>
<body>
	<div class="cn">china
		<div class="bj">bj
			<div class="hd">hd</div>
		</div>
	</div>
</body>
<script>
	var cn = document.getElementsByClassName('cn')[0];
	var bj = document.getElementsByClassName('bj')[0];
	var hd = document.getElementsByClassName('hd')[0];

    //捕获，会从最外面的中国向里面

	cn.addEventListener('click',function(){alert('我是中国-1')},true);
	bj.addEventListener('click',function(){alert('我是北京-2')},true);
	hd.addEventListener('click',function(){alert('我是海淀-3')},true);

    // 冒泡，会从最里面的海淀向外冒泡

  	cn.addEventListener('click',function(){alert('我是中国+1')},false);
  	bj.addEventListener('click',function(){alert('我是北京+2')},false);
  	hd.addEventListener('click',function(){alert('我是海淀+3')},false);

</script>
</html>

阻止事件传播

有传播，就会有相应的对应手段，比如阻止。

阻止用的是，stopPropagation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
	.cn {
		width: 300px;
		height: 300px;
		border: 1px solid green;
	}

	.bj {
		width: 200px;
		height: 200px;
		border: 1px solid green;
	}
	.hd {
		width: 100px;
		height: 100px;
		border: 1px solid green;
	}
</style>
</head>
<body>
	<div class="cn">china
		<div class="bj">bj
			<div class="hd">hd</div>
		</div>
	</div>
</body>
<script>
	var cn = document.getElementsByClassName('cn')[0];
	var bj = document.getElementsByClassName('bj')[0];
	var hd = document.getElementsByClassName('hd')[0];

    //捕获，会从最外面的中国向里面

	cn.addEventListener('click',function(){alert('我是中国-1')},true);
	bj.addEventListener('click',function(ev){
    ev.stopPropagation();   // 事件的传播到这里就停止了
  },true);
	hd.addEventListener('click',function(){alert('我是海淀-3')},true);

</script>
</html>

阻止事件的默认行为

我们在使用a标签的时候，浏览器会响应这个操作的变化。
那么，如果我们要阻止这个默认行为呢？

1
2
3
4
5
6
7
8
9
10

preventDefault();

<a id="jump" href="www.baidu.com">123</a>

var jump = document.getElementById('jump');
   jump.addEventListener('click',function(ev){
       ev.preventDefault();   // 这样就阻止了a标签的跳转
   })

IE下的不兼容行为

IE事件模型，比较起W3C标准模型，主要有三点不同。

1、绑定事件的函数不一样，IE中用attachEvent(),detachEvent().
2、IE6模型中，不支持捕捉，只支持冒泡，IE7以后，包含IE7
3、先绑定后发生
4、绑定的事件，this指向问题，IE下，会指向 Window，标准的是指向 当前对象。

June 8, 2018

javascript