一、事件深入
1.1注册事件方式
<h1>h1标签</h1>
function h1Click() {
console.log('h1');
}
后注册的事件处理函数将会覆盖前面注册的处理函数
const box = document.querySelector('#box');
box.addEventListener('click', function () {
console.log('box')
})
注意：如果添加多个事件，不会覆盖掉之前的事件，并且会按顺序同时打印
1.2移出绑定事件
传统方式解绑
<div id="box1">box1</div>
function box1Click() {
console.log('---------')
document.querySelector('#box1').onclick = null;
}
常用方式解绑
const box2 = document.querySelector('#box2');
box2.addEventListener('click', box222);
function box222() {
box2.removeEventListener('click', box222);
}
1.3事件流
事件冒泡
1.所有元素都不是独立的，是串联在一起的。
2.单个元素触发事件之后还会影响其他元素
3.事件流的方式：事件冒泡（从小到大）、事件捕获（从大到小）
4.事件冒泡阶段：在点击完成之后立即触发目标对象，然后一层一层向上冒泡。
5.事件捕获阶段：在点击div后不会立即触发div的事件，而是一层一层向下捕获，最终到达div触发事件
事件捕获
1.在每个点击事件后添加true，会从最高的一级父级开始打印
阻止默认事件：e.stopPropagation();
在事件捕获中如果添加该事件对象方法，只会打印最高那一级的父级
在冒泡事件中如果添加该事件对象方法，会打印点击的那一级dom节点
1.4事件对象
event事件对象是传递给事件处理函数的唯一参数
currentTarget：当前事件处理程序所在的元素
target：事件目标，只包含事件的真实目标
this：始终指向currentTarget
在事件处理内部，只有一个节点，this、target、currentTarget指向的是同一个元素dom
1.5目标对象
const list = document.querySelector('#list');
list.addEventListener('click', function (e) {
console.log('e.target==this', e.target == this);
console.log('e.currentTarget==this', e.currentTarget == this);
1.6修改type类型disabled禁用属性
1.7阻止事件默认行为
阻止右键菜单的事件document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
阻止左键选择文本document.querySelector('selectstart',function(e){
e.preventDefault();
})
1.8键盘事件
获取键盘keycode：
const ipt = document.querySelector('#ipt');
ipt.addEventListener('keydown', function (e) {
document.querySelector('#keycode').textContent = e.keyCode;
})
1.9事件委托就是把一个元素的响应事件的函数委托到另一个元素。 |
|
