菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈紫怡-20221110-DOM&BOM-04 [打印本页]

作者: Dasmondlicht 时间: 2022-11-11 00:27
标题: 陈紫怡-20221110-DOM&BOM-04

一、今日学习内容：

事件的深入

事件注册：window.onload/click

传统事件注册方式onclick：

唯一性，同一个元素，同一个事件只能设置一个处理函数，最后注册的事件处理函数将会覆盖前面注册的处理函数

事件监听注册方式addEventListener

同一个元素，同一个事件，可以设置多个事件处理函数，执行的顺序按照默认书写顺序，注册的顺序

移除解绑事件

传统

function box() {

console.log( 'box1' );

document.querySelector( '#b1' ).onclick = null;

}

监听

dom.addEventListener( 'click' , fn);

function fn() {

console.log( 'dom' );

dom.removeEventListener( 'click' , fn);

}

事件流

所有的元素都不是独立，是串联在一起的，单个元素触发事件之后还会影响其他元素

事件冒泡（从小到大）

在点击完成之后理解触发目标对象，然后一层一层向上冒泡

事件捕获（从大到小）

在点击完div后不会立即触发div的事件，而是一层一层向下捕获，最终到达div才触发事件

事件对象

event事件对象是传递给事件处理函数的唯一参数

currentTarget当前事件处理程序所在元素

target事件目标，只包含事件的真实目标

this：时钟指向的是currentTarget

在事件处理内部，只有一个节点时，this、target、currentTarget指向的是同一元素dom

阻止默认事件

阻止a标签的默认跳转

e.preventDefault()

阻止冒泡/捕获

e.stopPropagation()

第三个参数

不传参（相当于false）----从小到大，冒泡

传参（true）----从大到小，捕获

禁用（修改type类型）

dom.disabled

验证码（画布）

引入js文件

// 保存真实验证码

let trueCode = '';

// 验证码插件的使用

let captchal = new CaptchaMini();

captchal.draw(document.querySelector('#captchal'), function (r) {

trueCode = r;

});

阻止事件的默认行为

阻止右键菜单的事件，禁用鼠标右键

contextmenu

eg：

document.addEventListener('contextmenu', function (e) {

e.preventDefault();

})；

阻止鼠标左键选择（复制）文本

selectstart

eg：

document.addEventListener('selectstart', function (e) {

e.preventDefault();

})

键盘事件

keyCode判断键盘上各个键的Code值

键盘事件里面的input没有keyCode

回车----13

左上右下----37 38 39 40

awds----65 87 68 83

空格----32

模拟百度搜索

模拟视频控制按钮

事件委托（委派/代理）

子元素较多时，绑定的事件都是同一个事件---同一事件处理函数

通过事件捕获来绑定

动态添加的元素----后期动态添加没有注册上点击事件

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)