DOM扩展
选择符API
-
核心方法：
querySelector()和querySelectorAll() -
querySelector()方法：接收一个CSS选择符，返回与该模式匹配的第一个元素
//取得body元素 var body = document.querySelector("body"); //取得ID为"myDiv"的元素 var myDiv = document.querySelector("#myDiv"); //取得类为"selected"的第一个元素 var selected = document.querySelector(".selected"); //取得类为"button"的第一个图像元素 var img = document.body.querySelector("img.button"); -
querySelectorAll()：接收一个CSS选择符，返回一个NodeList实例
能够调用该方法的类型包括：Document、DocumentFragment和Element
//取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")） var ems = document.getElementById("myDiv").querySelectorAll("em"); //取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); //取得所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong");要取得NodeList中每一个元素，可以使用item()方法，也可以使用方括号语法
-
matchesSelector()：Element类型的方法。接收一个CSS选择符，如果调用元素与该选择符匹配，返回true,否则返回false
元素遍历
DOM元素添加的5个属性：
- childElementCount：返回子元素（不包括文本节点和注释）的个数。
- firstElementChild：指向第一个子元素；firstChild 的元素版。
- lastElementChild：指向最后一个子元素；lastChild 的元素版。
- previousElementSibling：指向前一个兄弟元素；previousSibling 的元素版。
- nextElementSibling：指向后一个兄弟元素；nextSibling 的元素版。
let i, len, child = element.firstElementChild;
while(child !== element.lastElementChild){
processChild(child);
child = child.nextElementSibling;
}
与类相关的扩充
-
getElementsByClassName()接收一个参数：包含一个或多个类名的字符串
//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓 var allCurrentUsernames = document.getElementsByClassName("username current"); //取得ID 为"myDiv"的元素中带有类名"selected"的所有元素 var selected = document.getElementById("myDiv").getElementsByClassName("selected");在document对象上调用getELementByClassName()始终会返回所有与类名相匹配的元素，在元素上调用该方法就只会返回后代元素中匹配的元素
-
classList属性classList属性是新集合类型DOMTokenList的实例
方法：
- add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
eg：div.classList.toggle("user"); -
焦点管理：
document.activeElement属性，始终会引用DOM中获得了焦点的元素，获得焦点的方式：页面加载，用户输入（通常是按Tab键）和在代码中调用fucus()方法var button = document.getElementById("myButton"); button.focus(); alert(document.activeElement === button); //true默认情况下，文档刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间值为null
document.hasFocus()
var button = document.getElementById("myButton"); button.focus(); alert(document.hasFocus()); //true -
HTMLDocument
-
readyState：
- loading：正在加载
- complete：已经加载完文档
-
兼容模式compatMode：
- 标准模式：
CSS1Compat - 混杂模式：
BackCompat
- 标准模式：
-
head:
let head = document.head || document.getElementByTagName("head")[0]
-
-
字符集属性：
-
charset
document.charset = "UTF-8"; -
defaultCharset：根据默认浏览器及操作系统的设置，当前文档的默认字符集
-
-
自定义数据属性：
添加前缀
data- -
插入标记：
-
innerHTML：返回与调用元素的所有子节点对应的HTML标记（返回含在调用元素标记之间的字符串），若没有子代元素，将返回纯文本
-
outerHTML：返回调用它的元素及其所有子节点的HTML标签
-
insertAdjacentHTML()：接收两个参数：插入位置和要插入的HTML文本，第一个参数必须是以下值：
- “beforebegin”，在当前元素之前插入一个紧邻的同辈元素；
- “afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
- “beforeend”，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
- “afterend”，在当前元素之后插入一个紧邻的同辈元素。
//作为前一个同辈元素插入 element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
-
-
scrollIntoView()：滚动窗口：
document.forms[0].scrollIntoView(); -
专有拓展
-
文档模式
-
children属性:HTMLCollection的实例：只包含元素中同样还是元素的子节点
-
contains()方法：如果传入的参数节点是后代节点则返回true
-
插入文本：
-
innerText属性：
读取值：按照由浅入深的顺序将子文档树的所有文本都拼接起来。
写入值：删除元素的所有子节点，插入包含相应文本值的文本节点
过滤HTML标签：
div.innerText = div.innerText; -
outerText属性
-
-
滚动：
- scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。如果将可选的alignCenter 参数设置为true，则表示尽量将元素显示在视口中部（垂直方向）。
- scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。
- scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。
-
事件
事件流
- 事件冒泡：由内层向外层传播，直至传到document对象
- 事件捕获：由外层向内层传播
- DOM2级事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段
事件处理程序
响应某个事件的函数叫做事件处理程序（或事件侦听器）。事件处理程序的名字以on开头
-
HTML事件处理程序
<input type="button" value="Click Me" onclick="alert('Clicked')"/>一些特殊符号要转义
<script type="text/javascript"> function say() { alert("hello world"); } </script> <input type="button" value="Click Me" onclick="say()"/><input type="button" value="Click you" onclick="alert(this.value)"><input type="button" value="Click you" onclick="alert(value)"><form method="post"> <input type="text" name="username" value=""> <input type="button" value="Echo Username" onclick="alert(username.value)"> </form>onclick="try{showMessage();}catch(ex){}" -
DOM0级事件处理程序
var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(this.id); //"myBtn" }; //删除 btn.onclick = null; -
DOM2级事件处理程序
addEventListener()removeEventListener()
都接受三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。布尔值参数如果是true,则在捕获阶段调用事件处理程序；如果是false，则在冒泡阶段调用事件处理程序
btn.addEventListener("click", function () { alert(this.id); }, false); btn.addEventListener("click", function () { alert("hello"); }, false); //优点：可以添加多个事件处理程序通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，这也就意味着匿名函数无法移除
btn.removeEventListener("click", function(){ alert(this.id); }, false);//无效var btn = document.getElementById("myBtn"); var handler = function(){ alert(this.id); }; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false); //有效！ -
IE事件处理程序
- attachEvent()
- detachEvent()
attchEvent添加的事件处理程序都在冒泡阶段，会在全局作用域下运行，
this === windowvar btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function(){ alert("Clicked"); }); -
跨浏览器的事件处理程序
创建方法
addHandler()和removeHandler()：接收三个参数：要操作的元素，事件名称和事件处理程序函数var EventUtil = { addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } };
事件对象
-
DOM中的事件对象
event对象包含和创建它的特定事件有关的属性和方法。所偶时间都有以下成员：
对象this始终等于currentTarget的值，若将事件处理程序指定给了目标元素，则this,currentTarget和target包含相同的值
let button = document.getElementById("MyBtn"); let handler = function (event) { switch (event.type) { case "click": alert("Clicked!"); break; case "mouseover": event.target.style.backgroundColor = "red"; break; case "mouseout": event.target.style.backgroundColor = ''; break; } } button.onclick = handler; button.onmouseover = handler; button.onmouseout = handler;阻止特定事件的默认行为：
var link = document.getElementById("myLink"); link.onclick = function(event){ event.preventDefault(); };var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert("Clicked"); event.stopPropagation();//阻止事件传递到body上 }; document.body.onclick = function(event){ alert("Body clicked"); }; -
IE中的事件对象
var btn = document.getElementById("myBtn"); btn.onclick = function(){ var event = window.event; alert(event.type); //"click" };包含的方法和属性：
事件类型
-
DOM3级事件：
- UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
- 焦点事件，当元素获得或失去焦点时触发；
- 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
- 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
- 文本事件，当在文档中输入文本时触发；
- 键盘事件，当用户通过键盘在页面上执行操作时触发；
- 合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
- 变动（mutation）事件，当底层DOM 结构发生变化时触发。
-
UI事件
- load：页面完全加载后在window上面触发，所有框架都加载完毕时在框架集上面触发，图像加载完毕时在
<img>元素上面触发，或者嵌入的内容加载完毕时在<object>元素上面触发。 - unload：当页面完全卸载后在window 上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在
<object>元素上面触发。 - abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在
<object>元素上面触发。 - error：当发生JavaScript 错误时在window上面触发，当无法加载图像时在
<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发。 - select：当用户选择文本框（
<input>或<texterea>）中的一或多个字符时触发。 - resize：当窗口或框架的大小变化时在window 或框架上面触发。
- scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。
<body>元素中包含所加载页面的滚动条。 - DOMActivate：表示元素已经被用户操作（通过鼠标或键盘）激活。这个事件在DOM3 级事件中被废弃，但Firefox 2+和Chrome 支持它。
- load：页面完全加载后在window上面触发，所有框架都加载完毕时在框架集上面触发，图像加载完毕时在
-
load事件：
EventUtil.addHandler(window, "load", function(event){ alert("Loaded!"); });<body onload="alert('Loaded!')"> <img src="1.jpg" onload="alert('Image loaded.')">应该在document而非window上面触发load事件
let img = document.getElementsByTagName('img')[0]; img.addEventListener("load", function (event) { alert(event.target.src); })EventUtil.addHandler(window, "load", function(){ var script = document.createElement("script"); EventUtil.addHandler(script, "load", function(event){ alert("Loaded"); }); script.src = "example.js"; document.body.appendChild(script); }); -
unload事件
let div = document.getElementsByTagName("div")[0]; div.addEventListener("unload", function (event) { alert("Unloaded!"); },false);<body onunload="alert('Unloaded!')"> -
resize事件
document.body.addEventListener("resize", function (event) { alert("Changed!"); }, false); -
scroll事件
window.addEventListener("scroll", function (event) { if(document.compatMode === 'CSS1Compat'){ alert(document.documentElement.scrollTop); }else{ alert(document.body.scrollTop); } }) -
焦点事件：
- blur：在元素失去焦点时触发。这个事件不会冒泡；
- focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
- focusin：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。
- focusout：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。
- DOMFocusIn：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。只有Opera 支持这个事件。DOM3 级事件废弃了DOMFocusIn，选择了focusin。
- DOMFocusOut：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。只有Opera支持这个事件。DOM3 级事件废弃了DOMFocusOut，选择了focusout。
-
鼠标和滚轮事件：
- click：在用户单击主鼠标按钮或者按下回车键时触发。
- dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
- mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
- mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
- mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
- mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
- mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
- mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
- mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。
只有在同一个元素上相继发生mousedown和mouseup事件，才会触发click事件。只有触发两次click事件才会出发以西dbclick事件
mousewheel事件
-
客户区坐标位置：
clientX和clientY属性let div = document.getElementsByTagName('div')[0]; div.addEventListener("click", function (event) { alert("Client coordinates: " + event.clientX + " " + event.clientY); }); -
页面坐标位置：
pageX与pageY属性window.addEventListener("click", function (event) { alert("Page coordinates: " + event.pageX + " " + event.pageY); alert("Client coordinates: " + event.clientX + " " + event.clientY); });在页面没有滚动的情况下page…和client…的值相同
-
屏幕坐标位置：
screenX与screenY属性 -
修改键：Shift、Ctrl、Alt 和Meta（在Windows 键盘中是Windows 键，在苹果机中是Cmd 键）
相关属性：shiftKey、ctrlKey、altKey 、metaKey
window.addEventListener("click", function (event) { let keys = []; if(event.shiftKey){ keys.push("shift"); } if(event.altKey){ keys.push("alt"); } if(event.ctrlKey){ keys.push("ctrl"); } if(event.metaKey){ keys.push("meta"); } alert(keys.join(", ")); }) -
相关元素：
对mouseover 事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。对mouseout 事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。
let div = document.getElementsByTagName("div")[0]; div.addEventListener("mouseout", function (event) { if(event.relatedTarget){ alert(event.relatedTarget); }else if(event.toElement){ alert (event.toElement); }else if(event.fromElement){ alert (event.fromElement); }else{ } }) -
鼠标按钮
对于mousedown和mouseup事件来说，其event对象中存在一个button属性，0 表示主鼠标按钮，1 表示中间的鼠标按钮（鼠标滚轮按钮），2 表示次鼠标按钮。
-
鼠标滚轮事件
window.addEventListener("mousewheel", function (event) { alert(event.detail); }) -
触摸设备
iOS 和Android 设备
- 不支持dblclick 事件。双击浏览器窗口会放大画面，而且没有办法改变该行为。
- 轻击可单击元素会触发mousemove 事件。如果此操作会导致内容变化，将不再有其他事件发生；如果屏幕没有因此变化，那么会依次发生mousedown、mouseup 和click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素（如链接），或者那些已经被指定了onclick 事件处理程序的元素。
- mousemove 事件也会触发mouseover 和mouseout 事件。
- 两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll 事件。
-
键盘与文本事件
三个键盘事件：
- keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
- keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下Esc 键也会触发这个事件。
- keyup：当用户释放键盘上的键时触发。
一个文本事件：textInput
键码：
window.addEventListener("keyup", function (event) { alert(event.keyCode);//已弃用 })字符编码：
event.charCode == 'number'charcode属性变为两个新属性：
key和charkey的值是一个字符串
window.addEventListener("keyup", function (event) { alert(event.key); })location属性：0 表示默认键盘，1 表示左侧位置（例如左位的Alt 键），2 表示右侧位置（例如右侧的Shift 键），3 表示数字小键盘，4 表示移动设备键盘（也就是虚拟键盘），5 表示手柄（如任天堂Wii 控制器）
getModifierState()方法：如果指定的修改键是活动的（也就是
处于被按下的状态），这个方法返回true，否则返回false。 -
textInput事件：
window.addEventListener("textInput", function (event) { alert(event.data); }) -
复合事件：
- compositionstart：在IME 的文本复合系统打开时触发，表示要开始输入了。
- compositionupdate：在向输入字段中插入新字符时触发。
- compositionend：在IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态。它比文本事件的事件对象多一个属性data，其中包含以下几个值中的一个：
- 如果在compositionstart 事件发生时访问，包含正在编辑的文本（例如，已经选中的需要马上替换的文本）；
- 如果在compositionupdate 事件发生时访问，包含正插入的新字符；
- 如果在compositionend 事件发生时访问，包含此次输入会话中插入的所有字符。
window.addEventListener("compositionstart", function (event) { alert(event.data); }, false) window.addEventListener("compositionupdate", function (event) { alert(event.data); }, false) window.addEventListener("compositioned", function (event) { alert(event.data); }, false) -
变动事件：
- DOMSubtreeModified：在DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
- DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
- DOMNodeRemoved：在节点从其父节点中被移除时触发。
- DOMNodeInsertedIntoDocument：节点直接插入或通过子树间接插入文档后触发。这个事件在DOMNodeInserted 之后触发。
- DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved 之后触发。
- DOMAttrModified：在特性被修改之后触发。
- DOMCharacterDataModified：文本节点的值发生变化时触发。
-
删除节点
使用removeChild()或replaceChild()将触发相关事件
-
插入节点
在使用appendChild()、replaceChild()或insertBefore()时会触发相关事件
-
HTML5事件：
-
contextmenu事件：冒泡
window.addEventListener("load", function (event) { let div = document.getElementsByTagName("div")[0]; div.addEventListener("contextmenu", function (event) { event.preventDefault(); let menu = document.getElementById('MyMenu'); menu.style.left = event.clientX + "px"; menu.style.top = event.clientY + 'px'; menu.style.visibility = 'visible'; }); window.addEventListener("click", function (event) { window.getElementById('MyMenu').style.visibility = 'hidden'; }) }) -
beforeunload事件：为了是开发人员有可能再页面卸载之前阻止这一操作
-
DOMContentLoaded事件：形成完整的DOM树之后就会触发
-
readystatechange事件：
事件对象的readyState属性：
- uninitialized（未初始化）：对象存在但尚未初始化。
- loading（正在加载）：对象正在加载数据。
- loaded（加载完毕）：对象加载数据完成。
- interactive（交互）：可以操作对象了，但还没有完全加载。
- complete（完成）：对象已经加载完毕。
document.addEventListener("readystatechange", function (event) { if(document.readyState === "interactive"){ alert("Content loaded"); } }) -
pageshow和pagehide事件（添加到window）:
event对象的persisted属性：true:保存在bfcache中
-
hasChange事件（添加到window对象， location.hash）
-
-
设备事件
-
orientationchange事件
window.orientation 属性中可能包含3 个值：0 表示肖像模式，90 表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90 表示向右旋转的横向模式（“主屏幕”按钮在左侧）
-
MozOrientation事件
event 对象三个属性：x、y 和z。表示不同坐标轴上的方向。静止状态，x 值为0，y 值为0，z 值为1（表示设备处于竖直状态）。设备向右倾斜，x 值会减小；向左倾斜，x 值会增大。类似地，如果设备向远离用户的方向倾斜，y 值会减小，向接近用户的方向倾斜，y 值会增大。z 轴检测垂直加速度度，1 表示静止不动，在设备移动时值会减小。（失重状态下值为0）
-
deviceorientation事件：
事件对象包含5个属性：
- alpha：在围绕z 轴旋转时（即左右旋转时），y 轴的度数差；是一个介于0 到360 之间的浮点数。
- beta：在围绕x 轴旋转时（即前后旋转时），z 轴的度数差；是一个介于-180 到180 之间的浮点数。
- gamma：在围绕y 轴旋转时（即扭转设备时），z 轴的度数差；是一个介于-90 到90 之间的浮点数。
- absolute：布尔值，表示设备是否返回一个绝对值。
- compassCalibrated：布尔值，表示设备的指南针是否校准过。
-
devicemotion事件：
事件对象包含以下属性：
- acceleration：一个包含x、y 和z 属性的对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。
- accelerationIncludingGravity：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
- interval：以毫秒表示的时间值，必须在另一个devicemotion 事件触发前传入。这个值在每个事件中应该是一个常量。
- rotationRate：一个包含表示方向的alpha、beta 和gamma 属性的对象。
-
-
触摸与手势事件
-
触摸事件：
- touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
- touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。
- touchend：当手指从屏幕上移开时触发。
- touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。
以上事件均冒泡
event事件的属性：
- 常见的bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey属性
- touches：表示当前跟踪的触摸操作的Touch 对象的数组。
- targetTouchs：特定于事件目标的Touch 对象的数组。
- changeTouches：表示自上次触摸以来发生了什么改变的Touch 对象的数组。每个Touch 对象包含下列属性。
-
-
手势事件：
-
gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
- gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
- gestureend：当任何一个手指从屏幕上面移开时触发。
属性：
bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey。此外，还包含两个额外的属性：rotation 和scale。rotation 属性表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0 开始）。而scale属性表示两个手指间距离的变化情况，这个值从1开始，并随距离拉大而增长，随距离缩短而减小。
-
-
内存与性能
-
事件委托
利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件，即在尽量高的层次上添加一个事件处理程序
-
移除事件处理程序
<div id="myDiv"> <input type="button" value="Click Me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ //先执行某些操作 btn.onclick = null; //移除事件处理程序 document.getElementById("myDiv").innerHTML = "Processing..."; }; </script>在设置innerHTML之前先移除按钮的事件处理程序
-
-
模拟事件
document对象上使用createEvent()方法创建event对象，接收一个参数，为要创建的事件类型的字符串：
- UIEvents：一般化的UI 事件。鼠标事件和键盘事件都继承自UI 事件。DOM3 级中是UIEvent。
- MouseEvents：一般化的鼠标事件。DOM3级中是MouseEvent。
- MutationEvents：一般化的DOM 变动事件。DOM3 级中是MutationEvent。
- HTMLEvents：一般化的HTML 事件。没有对应的DOM3 级事件（HTML 事件被分散到其他类别中）。
-
模拟鼠标事件：
创建鼠标事件对象的方法是为createEvent()传入字符串"MouseEvents"。返回对象有一个nitMouseEvent()方法，用于指定与该鼠标事件有关的信息。这个方法接收15 个参数：
- type（字符串）：表示要触发的事件类型，例如"click"。
- bubbles（布尔值）：表示事件是否应该冒泡。为精确地模拟鼠标事件，应该把这个参数设置为true。
- cancelable（布尔值）：表示事件是否可以取消。为精确地模拟鼠标事件，应该把这个参数设置为true。
- view（AbstractView）：与事件关联的视图。这个参数几乎总是要设置为document.defaultView。
- detail（整数）：与事件有关的详细信息。这个值一般只有事件处理程序使用，但通常都设置为0。
- screenX（整数）：事件相对于屏幕的X 坐标。
- screenY（整数）：事件相对于屏幕的Y 坐标。
- clientX（整数）：事件相对于视口的X 坐标。
- clientY（整数）：事件想对于视口的Y 坐标。
- ctrlKey（布尔值）：表示是否按下了Ctrl 键。默认值为false。
- altKey（布尔值）：表示是否按下了Alt 键。默认值为false。
- shiftKey（布尔值）：表示是否按下了Shift 键。默认值为false。
- metaKey（布尔值）：表示是否按下了Meta 键。默认值为false。
- button（整数）：表示按下了哪一个鼠标键。默认值为0。
- relatedTarget（对象）：表示与事件相关的对象。只在模拟mouseover 或mouseout时使用。
let btn = document.getElementsByTagName("input")[0]; let event = document.createEvent("MouseEvents"); event.initMouseEvent("click", true, true, document.defaultView, 0, 27, 23, 27, 23, false, false, false, false, 0, null); btn.dispatch(event);//触发事件 -
模拟键盘事件
调用createEvent()并传入"KeyboardEvent"就可以创建一个键盘事件。返回的事件对象会包含一个initKeyEvent()方法，这个方法接收下列参数。
- type（字符串）：要触发的事件类型，如"keydown"。
- bubbles（布尔值）：表示事件是否应该冒泡。为精确模拟鼠标事件，应该设置为true。
- cancelable（布尔值）：表示事件是否可以取消。为精确模拟鼠标事件，应该设置为true。
- view （AbstractView ）：与事件关联的视图。这个参数几乎总是要设置为document.defaultView。
- key（布尔值）：表示按下的键的键码。
- location（整数）：表示按下了哪里的键。0 表示默认的主键盘，1 表示左，2 表示右，3 表示数字键盘，4 表示移动设备（即虚拟键盘），5 表示手柄。
- modifiers（字符串）：空格分隔的修改键列表如"Shift"。
- repeat（整数）：在一行中按了这个键多少次。
DOM3级不提倡使用keypress事件，只能利用这种技术来模拟keydown和keyup事件
let textbox = document.getElementById("myTextbox"); let event; if(document.implementation.hasFeature("KeyboardEvents", "3.0")) { event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0); } textbox.dispatchEvent(event);var textbox = document.getElementById("myTextbox"); //创建事件对象 var event = document.createEvent("Events"); //初始化事件对象 event.initEvent(type, bubbles, cancelable); event.view = document.defaultView; event.altKey = false; event.ctrlKey = false; event.shiftKey = false; event.metaKey = false; event.keyCode = 65; event.charCode = 65; //触发事件 textbox.dispatchEvent(event); -
模拟其他事件
-
自定义DOM事件
createEvent(“CustomEvent”)，返回对象有initCustomEvent方法，接收4个参数：
- type（字符串）：触发的事件类型，例如"keydown"。
- bubbles（布尔值）：表示事件是否应该冒泡。
- cancelable（布尔值）：表示事件是否可以取消。
- detail（对象）：任意值，保存在event 对象的detail 属性中。
if (document.implementation.hasFeature("CustomEvents", "3.0")){ event = document.createEvent("CustomEvent"); event.initCustomEvent("myevent", true, false, "Hello world!"); div.dispatchEvent(event); }
如果您觉得我的文章对您有帮助的话，可以点个赞，点个关注，也可以扫描下方二维码关注我。我将在这个公众号上更新自己的学习笔记，以及分享一些算法知识
Study and progress together with me!