4.节点操作
-
删除节点
node.removeChild(child)
node.removeChild()
方法从DOM
中删除一个子节点,返回删除的节点
-
阻止链接跳转需要添加
javascriptvoid(0);
或者javascript:;
-
<a href = 'javascript:;'></a>;
-
-
复制节点(克隆节点/拷贝节点)
node.cloneNode()
- 该方法返回调用该方法的节点的一个副本
- 如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点;如果括号里面为true,则是深拷贝,会复制节点本身以及里面所以的子节点
-
三种动态创建元素区别
-
document.write()
//是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘 -
element.innerHTML
/是讲内容写入某个DOM
节点,不会导致页面全部重绘;创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂 -
document.createElement()
//创建多个元素效率稍低一点点,但是结构更清晰
5.注册事件(绑定事件)
-
addEventListener
事件监听方式eventTarget.addEventListener(type,listener[,useCapture])
eventTarget.addEventListener()
方法将指定的监听器注册到eventTarget
(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数- 该方法接收三个参数:
type
:事件类型字符串,要加引号,比如:click
、mouseover
listener
:事件处理函数,事件发生时,会调用该监听函数useCapture
:可选参数,是一个布尔值,默认是false
- 该方法接收三个参数:
-
attachEvent
事件监听方式(非标准,ie9以前的版本支持)eventTarget.attachEvent(eventNameWithon,callback)
eventTarget.attachEvent()
方法将指定的监听器注册到eventTarget
(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行- 该方法接收两个参数:
eventNameWithOn
:事件类型字符串,比如onclick
、onmouseover
callback
:事件处理函数,当目标触发事件时回调函数被调用
- 该方法接收两个参数:
6.删除事件(解绑事件)
-
删除事件的方式
-
1.传统注册方式
eventTarget.onclick = null;
-
2.方法监听注册方式
eventTarget.removeEventListener(type,listener[,useCapture]);
-
7. 阻止事件冒泡
-
事件冒泡:开始时由最具体的元素拒收,然后逐级向上传播到
DOM
最顶层节点 -
标准写法:利用事件对象里面的
stopPropagation()
方法e.stopPropagation();
-
非标准写法:ie6-8,利用事件对象
cancelBubble
属性e.cancelBubble = true;
8.常用的鼠标事件
-
1.禁止鼠标右键菜单
contextmenu
主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单document.addEventListener('contextmenu',function(e) { e.preverntDefault(); })
-
2.禁止鼠标选中(
selectstart
开始选中)document.addEventListener('selectstart',function(e) { e.preventDefault(); })