DOM事件
1.理解事件
- 事件行为本身：没有给事件绑定方法事件也是一直存在的，当触发行为的时候，也对触发对应的行为，只不过由于没有绑定事件，导致没有任何事件发生；
- 事件绑定：给元素绑定一个方法；触发行为，执行方法；
DOM事件DOM0级事件：1️⃣(onclick)属于元素的私有属性；2️⃣使用DOM0级方法指定的事件处理程序被认为是元素的方法，这也就解释为什么事件处理程序的this指向当前元素；3️⃣事件处理程序只会在事件冒泡阶段处理；4️⃣优势：简单；跨浏览器；5️⃣删除事件：设置为null；btn.onclick=null;6️⃣一个元素只能绑定一个同一类型的行为，否则后面的会覆盖前面的行为。DOM1：没有升级事件相关的方法；DOM2级事件：1️⃣属于公有方法，在eventTarget这个类的原型上—>所有的DOM节点都包含这两种方法：addEventListener和removeEventlistener；2️⃣三个参数：（事件名，回调函数，布尔值）；布尔值：true—>捕获阶段调用回调函数；false—>冒泡阶段调用回调函数；3️⃣addEventListener和removeEventlistener传入的回调函数必须相同，不能使用匿名函数；4️⃣一般将事件添加到冒泡阶段，这样可以最大限度的兼容浏览器。5️⃣同一个元素可以绑定多个统一行为；
- 执行某一行为时，不仅执行了绑定方法，而且浏览器还会默认的给这个方法传递一个参数，这个参数就是—>
event,事件对象。 - 事件对象的特点：
1️⃣对象数据类型，包含有很多的属性名和属性值，用来记录行为的相关信息；2️⃣MouseEvent——UIEvent——event——Object原型3️⃣MouseEvent记录的是页面中唯一一个鼠标每次触发的相关信息，和到底在哪个元素上触发没有关系。
- 事件对象本身的兼容性问题：
e=e||window.event; e.type:当前行为类型，兼容；e.clientX/Y:距离可视窗口左上角x,y值，兼容；e.pageX/Y:距离body(第一屏)左上角x,y值，IE678不兼容；e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;e.target:事件源，当前行为触发元素，存储的就是那个元素IE678不兼容e.target=e.target||e.srcElement;e.preventDafault:阻止浏览器的默认行为，IE678不兼容；e.preventDafault?e.preventDafault:e.returnvalue=false;e.stopPropagation:阻止事件冒泡传播，IE678不兼容；e.stopPropagation? e.stopPropagation:e.cancelBubble=true;
- 捕获：从外向内依次查找元素，
event capturing； - 目标：当前述事件源本省的操作；
- 冒泡：从内到外依次触发的相关行为，
event bubbing;
相关推荐
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children
Lophole 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14