进阶-DOM事件相关知识
5 进阶-DOM事件相关知识
5.1 请问js怎样增、删、查、替换DOM节点？
【考点映射】
-
js操作DOM元素
【频率】★★★★★
【难度】☆
-
创建元素节点
document.createDocumentFragment() //创建一个虚拟节点对象，节点对象包含所有属性和方法
document.createElement("p");//创建p标签
document.createTextNode("txt");//创建文本标签
element.appendchild：向节点的子节点列表末尾添加新的子节点
element.insertBefore：在已有的元素前插入一个新元素
element.insertAfter：在已有的元素后插入一个新元素
注意：在DOM的原生api中，只有insertBefore，没有insertAfter，借助原有的api，可以模拟一个insterAfter：
先找父级元素，若目标元素为最后一个元素，直接append到父级末尾，如果不是，则利用insertBefore插入到目标元素的下一个元素的前面
function insterAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{ parent.insertBefore(newElement,targetElement.nextSibling);
}
}
element.removeChild：从文档树中删除一个节点（先找到要删除节点的父节点，用父节点删除）
var para1 = document.getElementById("p1")
para1.parentNode.removeChild(para1)
element.replaceChild：将一个节点替换为另一个节点（先找到要替换的节点的父节点，用父节点替换）
element.replaceChild(newnode,oldnode);
document.querySelector("#demo") //查找文档中id="demo"的节点
document.querySelectorAll("#demo") //查找文档中id="demo"的所有节点
5.2 请问js事件绑定有哪几种方式？
【考点映射】
-
js事件绑定
【频率】★★★★★
【难度】☆
-
html标签事件绑定
<button id="vv" onclick="function()" ></button>
var func = function () {
}
var aa = document.getElementById('vv')
aa.onclick = func
document.getElementById('vv').onclick = function () { }
//写法一
var func = function () {
}
document.getElementById('vv').addEventListener('click',func);
//写法二
document.getElementById('vv').addEventListener('click',function () {})；
document.getElementById('vv').attachEvent('onclick',function () {});
5.3 请问什么是事件流？
【考点映射】
-
事件流三阶段
【频率】★★★★★
【难度】☆
js与html页面的交互是通过DOM事件实现的，事件流 指页面接收事件的顺序
DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
利用简单的HTML页面为例，进行具体分析：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Event Bubbling</title> </head> <body> <button id="clickMe">Click Me</button> </body> </html>
事件冒泡：即事件开始时，由最具体的元素（也就是事件发生所在的节点）接收，然后逐级向上传播到较为不具体的节点（文档）（摘自《JavaScript高级程序设计》）
对于上述页面中， 当单击<button>元素，这个click点击事件会按照如下顺序传播：
<button>→<body>→<html>→Document（由内到外）
事件捕获：与事件冒泡正好相反，不具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件，其用意在于在事件到达预定目标之前捕获它（摘自《JavaScript高级程序设计》）
对于上述页面中， 当单击<button>元素，这个click点击事件会按照如下顺序传播：
Document→<html>→<body>→<button>（由外到内）
事件流：首先事件捕获，为截获事件提供机会，然后实际的目标接收到事件， 最后事件冒泡阶段，可在这个阶段对事件做出响应
5.4 请问什么是事件委托/事件代理？
【考点映射】
-
事件委托原理及应用
【频率】★★★★★
【难度】☆☆
事件委托：又名事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件（摘自《JavaScript高级程序设计》）
优点：
-
事件管理函数变少，不需要为每个元素都添加监听函数，对于同一个父节点下相似的子元素，可以通过委托给父元素的监听函数来处理事件。
-
可以更方便地动态添加和修改元素，不需要因元素的改动而修改事件绑定
-
可以大大减少与DOM的交互次数，从而提高整体运行性能，事件委托开是 事件处理程序过多 问题的直接解决方案
通过一个简单的实例学习如何使用事件委托：
<div id="box"> <input type="button" value="添加" id="add"> <in
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端岗位面试求职攻略及真题解析~~
查看8道真题和解析