DOM事宜周全总结

事宜的定义
事宜就是用户或浏览器本身实行的某种行动。
网页中的每一个元素都可以发生某些可以触发 JavaScript 函数的事宜。
比方说,我们可以在用户点击某按钮时发生一个 onClick 事宜来触发某个函数。事宜在 HTML 页面中定义。
事宜范例
UI事宜
核心事宜,当元素取得或落空核心时触发
鼠标事宜,
滚轮事宜,运用鼠标滚轮时触发
文本事宜,在文档中输入文本时触发
键盘事宜
DOM事宜的级别
DOM 0级事宜(分为两个):
1、在html标签内写onclick事宜;
// <input id=”myButton” type=”button” value=”Press Me” onclick=”alert(‘thanks’);” >
2、在JS写onlicke=function(){}函数;
// document.getElementById(“myButton”).onclick = function () { }
DOM 2级事宜:
只要一个:监听事宜。用来增加和移除事宜处置惩罚递次:addEventListener()和removeEventListener()。
DOM 3级事宜:
和DOM 2级事宜相似,DOM 3中定义了自定义事宜。
事宜流
定义:从页面中吸收事宜的递次。
DOM事宜流包含三个阶段:事宜捕捉阶段,处于目的事宜和事宜冒泡阶段。
事宜捕捉
比方单机<div>元素会触发click事宜。事宜捕捉的历程是从上到下。
–图片待上
冒泡事宜反之。
事宜机制,怎样绑定事宜处置惩罚函数?

事宜处置惩罚:

IE体式格局
1、attachEvent(事宜称号, 函数),绑定事宜处置惩罚函数:
var btn=document.getElementById(“btn”);

        btn.attachEvent("onclick",function(){
            alert("Clicked");
        });

用onclick
2、detachEvent(事宜称号, 函数),消除绑定
DOM体式格局
addEventListener(事宜称号,函数, 捕捉)
removeEventListener(事宜称号, 函数, 捕捉)
吸收三个参数,第一个是要处置惩罚的事宜名,第二个是事宜处置惩罚递次,第三个值为false时示意在事宜冒泡阶段挪用事宜处置惩罚递次,平常发起在冒泡阶段运用,特殊情况才在捕捉阶段。
背面不管接若干函数,由于背面任何设置的属性都邑尝试掩盖较早的属性.
怎样移除事宜和绑定事宜

消除事宜: 对象.事宜=null (此要领就是函数的掩盖)

DOM中的事宜对象(event对象罕见运用)
概况见高程P355
自定义事宜
(进阶)
event = new CustomEvent(type [, eventInitDict])
事宜托付
事宜托付(事宜代办)是应用事宜冒泡,只指定一个事宜处置惩罚递次来治理某一范例的一切事宜。
长处:
在页面中设置事宜处置惩罚递次所需的时候更少。
全部页面占用的内存更少,可以提拔团体机能。
瑕玷:
有些事宜不能冒泡,blur、focus、load和unload不能像别的事宜一样冒泡。
怎样完成事宜托付?

—-文中另有一些小问题待总结,望大佬投稿

    原文作者:Ashleysweetie
    原文地址: https://segmentfault.com/a/1190000018247318
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞