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

标题: 李扬敏-20221109-dom [打印本页]

作者: 王源的李可爱 时间: 2022-11-11 00:54
标题: 李扬敏-20221109-dom
一。今日学习内容

1.事件深入

1）注册事件两种方式

标签中的onclick函数，function调用

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

addEventListener的监听事件

可以设置多个处理函数，不会覆盖（常用）

移除解绑事件

传统：document.querySelector('#box').onclick=null;

dom.removeEventListener(事件名称，解绑函数)

2.事件流

事件冒泡--从小到大，一层一层向上，挨个触发

事件捕获：传参--true:从大到小

事件捕获：传参--false:从小到小

e.stopPropagation();阻止冒泡和捕获

3.事件对象

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

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

target：事件目标，只包含事件的真是目标

this：始终指向的是currentTarget

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

目标对象

target是鼠标点击的标签

this是当前点击事件的最大标签

this始终等于currentTarget

修改type 类型

disabled：禁用

4.事件委托

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

后期动态添加没有注册上点击事件

5.阻止事件默认行为

禁止右键事件名称：contextmenu-----e.preventDefault();阻止

阻止左键选择文本事件名称：selectstart----e.preventDefault();阻止

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