注册事件
- 传统方式
btn.onclick = function() {}
传统事件注册具有唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
- 方法监听注册方式
1
| eventTarget.addEventListener(type,listener[,useCapture])
|
type：事件类型字符串，比如 click、mouseover。这里不需要加on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。
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
| <body>
<button>
传统注册事件
</button>
<button>
事件监听注册事件
</button>
<script>
var btns = document.querySelectorAll('button');
btns[0].onclick = function(){
alert('hi');
}
btns[0].onclick = function(){
alert('传统注册事件');
}
btns[1].addEventListener('click',function(){
alert('事件监听注册事件');
})
btns[1].addEventListener('click',function(){
alert('事件监听注册事件2');
})
</script>
</body>
|
删除事件
-
传统方式 eventTarget.onclick = null;
-
方法监听注册方式
1
| eventTarget.removeEventListener(type,listener[,useCapture])
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
divs[0].onclick = null;
}
divs[1].addEventListener('click', fn)
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
</script>
|
DOM事件流
事件流描述的是从页面接受事件的顺序，这个传播顺序就是DOM事件流。
DOM事件流会历经 捕获阶段、当前目标阶段、冒泡阶段 这三个阶段
- js代码只能执行捕获或冒泡其中的一个阶段
- onclick、attachEvent只有冒泡阶段
- addEventListener(type,listener,true)表示在事件捕获阶段调用事件处理程序，如果第三个参数是false表示在事件冒泡阶段调用事件处理程序。
事件冒泡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div class="father">
<div class="son">son盒子</div>
</div>
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
|
事件捕获
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="father">
<div class="son">son盒子</div>
</div>
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, true);
document.addEventListener('click', function() {
alert('document');
}, true)
</script>
|
事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
比如：
-
谁绑定了这个事件。
-
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
-
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
1
2
3
4
5
6
7
8
9
| <div>123</div>
<script>
var div = document.querySelector('div');
div.onclick = function(e) {
e = e || window.event;
console.log(e);
}
</script>
|
事件对象的属性和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
console.log(this);
console.log(e.target);
});
</script>
|
阻止默认行为
html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <a href="https://blog.wangyouwu.cn">胖虎同学</a>
<script>
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault();
});
a.onclick = function(e) {
e.preventDefault();
e.returnValue = false;
return false;
}
</script>
|
阻止事件冒泡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div class="father">
<div class="son">son儿子</div>
</div>
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation();
window.event.cancelBubble = true;
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
|
事件委托
事件委托也称为事件代理，在 jQuery 里面称为事件委派。
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ul>
<li>点我一下试试</li>
<li>点我一下试试</li>
<li>点我一下试试</li>
<li>点我一下试试</li>
<li>点我一下试试</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
e.target.style.backgroundColor = 'pink';
})
</script>
|
常用鼠标事件
禁止鼠标右键 contextmenu
禁止鼠标选中 selectstar
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
休想复制我
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
|
鼠标事件对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
document.addEventListener('click', function(e) {
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
console.log(e.screenX);
console.log(e.screenY);
})
</script>
|
常用键盘事件
- onkeypress不识别功能键，如shift等，但区分大小写
- 三个事件执行顺序：keydown、keypress、keyup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script>
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
</script>
|
键盘事件对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script>
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
console.log('press:' + e.keyCode);
})
</script>
|
