700字范文 > 13前端学习之WebAPI(三):节点操作事件高级 DOM事件流事件委托冒泡

13前端学习之WebAPI(三):节点操作事件高级 DOM事件流事件委托冒泡

时间：2019-06-13 16:30:18

文章目录

一、节点操作:1. 删除节点:1.2. 案例：删除留言2. 赋值(克隆)节点:3. 案例:动态生成表格:3.1 案例分析:3.2 实现:4. 创建元素的三种方式:4.1 区别:4.2 innerTHML和createElement效率对比:5. DOM的核心总结:5.1 创建:5.2 增加:5.3 删除:5.4 改:5.5 查：5.6 属性操作:5.7 事件操作:二、事件高级:1. 注册事件:2. 事件监听:2.1 addEventListener()事件监听（IE9以后支持）2.2 attacheEvent()事件监听（IE678支持）2.3 事件监听兼容性解决方案:3. 删除事件(解绑事件)3.1 传统方式:3.2 方法监听注册方式:4. DOM事件流:5. 事件对象:5.1 什么是事件对象:5.2 事件对象的使用:5.3 事件对象的兼容性处理:5.4 事件对象的属性和方法:6. 阻止默认行为:7. 阻止事件冒泡8. 事件委托:8.1 委托:8.2 事件委托的原理8.3 事件委托的作用9. 常用鼠标事件:9.1 案例：禁止选中文字和禁止右键菜单:10. 鼠标事件对象:10.2 案例:获取鼠标在页面的坐标10.3 案例：跟随鼠标的天使:

一、节点操作:

1. 删除节点:

node.removeChild(child)

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点

<button>删除</button><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul><script>// 1.获取元素var ul = document.querySelector('ul');var btn = document.querySelector('button');// 2. 删除元素 node.removeChild(child)// ul.removeChild(ul.children[0]);// 3. 点击按钮依次删除里面的孩子btn.onclick = function() {ul.removeChild(ul.children[0]);if (ul.children.length == 0) {this.disabled = true;} }</script>

1.2. 案例：删除留言

案例分析

当把文本域里面的值赋值给li的时候.多添加一个删除连接;需要把所有的链接获取过来, 当点击当前的链接删除的时候, 删除当前链接所在的li;阻止链接跳转需要添加javascript:void(0); 或者 javascript:;

实现:

<head><title>01_删除节点</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}li a{float: right;}</style><script>window.onload = function() {// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注册事件btn.onclick = function() {if (text.value == '') {alert('您没有输入内容');return false;} else {// 创建元素var li = document.createElement('li');li.innerHTML = text.value + '<a href="javascript:;"> 删除 </a>'; // 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// 添加删除事件var as = document.querySelectorAll('a');for(var i = 0; i < as.length; i++) {as[i].onclick = function() {ul.removeChild(this.parentNode);}}}}}</script></head><body><textarea name="" id=""></textarea><button>发布</button><ul></ul></body>

2. 赋值(克隆)节点:

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本. 也称为克隆节点/拷贝节点

注意:

如果括号参数为空或者为false, 则是浅拷贝, 即只克隆赋值节点本身, 不克隆里面的子节点;如果括号参数为true, 则是深拷贝, 会复制节点本身以及里面所有的节点;

<ul><li>1111</li><li>2</li><li>3</li></ul><script>var ul = document.querySelector('ul');// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容// 2. node.cloneNode(true); 括号为true 深拷贝复制标签复制里面的内容var lili = ul.children[0].cloneNode(true);ul.appendChild(lili);</script>

3. 案例:动态生成表格:

3.1 案例分析:

因为里面的学生数据都是动态的, 需要js动态生成. 这个模拟数据, 自己定义好数据. 数据采用对象的影视存储;所有的数据都是放在tbody里面的行里面;因为行很多, 需要循环创建多个行;每个行里面又有很多个单元格(对应里面的数据), 还继续使用循环创建多个单元格,并且把数据存入里面(双重for循环);最后一列单元格式删除, 需要单独创建单元格;最后添加删除操作,单击删除, 可以删除当前行;

3.2 实现:

<head><title>03_动态生成表格</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style><script>window.onload = function() {// 1.先去准备好学生的数据var datas = [{name: '魏璎珞',subject: 'JavaScript',score: 100}, {name: '弘历',subject: 'JavaScript',score: 98}, {name: '傅恒',subject: 'JavaScript',score: 99}, {name: '明玉',subject: 'JavaScript',score: 88}, {name: '大猪蹄子',subject: 'JavaScript',score: 0}];// 2. 往tbody中创建行, var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {var tr = document.createElement('tr')tbody.appendChild(tr);for (var k in datas[i]) {var td = document.createElement('td');td.innerHTML = datas[i][k];tr.appendChild(td);}var td = document.createElement('td')td.innerHTML = "<a href='javascript:;'>删除</a>"tr.appendChild(td);}// 3. 删除事件var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {tbody.removeChild(this.parentNode.parentNode);}}}</script></head><body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table></body>

4. 创建元素的三种方式:

document.write()element.innerHTMLdocument.createElement()

4.1 区别:

document.write 是直接将内容写入页面的内容流. 但是文档流执行完毕, 则它会导致页面重绘;innerHTML是将内容写入某个DOM节点, 不会导致页面重绘;innerHTML创建多个元素效率更高(不要拼接字符串, 采取数组形式拼接), 结构稍微复杂;createElement()创建多个元素效率稍低,但是结构更清晰**总结:**不同浏览器下, innerHTML效率要比createElement高;

4.2 innerTHML和createElement效率对比:

innerHTML字符串拼接方式(效率低)

<script>function fn() {var d1 = +new Date();var str = '';for (var i = 0; i < 1000; i++) {document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;">baidu</div>';}var d2 = +new Date();console.log(d2 - d1);}fn();</script>

createElement方式(效率一般)

<script>function fn() {var d1 = +new Date();for (var i = 0; i < 1000; i++) {var div = document.createElement('div');div.style.width = '100px';div.style.height = '2px';div.style.border = '1px solid red';document.body.appendChild(div);}var d2 = +new Date();console.log(d2 - d1);}fn();</script>

innerHTML数组方式(效率高)

<script>function fn() {var d1 = +new Date();var array = [];for (var i = 0; i < 1000; i++) {array.push('<div style="width:100px; height:2px; border:1px solid blue;">baidu</div>');}document.body.innerHTML = array.join('');var d2 = +new Date();console.log(d2 - d1);}fn();</script>

5. DOM的核心总结:

文档对象模型(Document Object Model, 简称:DOM), 是w3c组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口.

W3C已经定义了一系列的DOM接口, 通过这些DOM接口可以改变网页的内容,结构和样式.

对于JavaScript, 为了能够使JavaScript操作HTML, JavaScript就有了一套自己的DOM编程接口;对于HTML, DOM是的HTML形成一颗DOM树, 包含文档, 元素, 节点;

关于dom操作, 主要针对于元素的操作. 主要有创建、增、删、改、查、属性操作、事件操作.

5.1 创建:

document.write()element.innerHTMLdocument.createElement()

5.2 增加:

node.appendChile(child);node.insertBefore(child, 指定元素)

5.3 删除:

node.removeChild(child)

5.4 改:

主要修改dom的元素属性, dom元素的内容,属性,表单的值等:

修改元素属性: src、href、title等；修改普通元素内容： innerHTML、innerText；修改表单元素： value、type、disable等；修改元素样式： style、className；

5.5 查：

主要获取查询DOM的元素:

DOM提供API方法: document.getElementById(id), document.getElementsByTagName(‘标签名’) 古老用法不调推荐;H5提供的新方法: document.querySelector(选择器), document.querySelectorAll(选择器);利用节点操作获取元素: 父(node.parentNode), 子(parentNode.childrent ), 兄(node.nextElementSibling,node.previousElementSibling )

5.6 属性操作:

主要针对自定义的属性:

element.setAttribute(‘属性1’, ‘值1’); 设置dom的属性值;element.getAttribute(‘属性’); 得到dom的属性;

5.7 事件操作:

二、事件高级:

1. 注册事件:

给元素添加事件, 称为注册事件或者绑定事件;注册事件有两种方式:传统事件或监听注册方式;

2. 事件监听:

2.1 addEventListener()事件监听（IE9以后支持）

eventTarget.addEventListener( type, listener, useCapture)

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数.

该方法接收三个方法:

type: 事件类型字符串, 比如: click, mouseover, 注意这里不带on;listener: 事件处理函数, 事件发生时, 会调用该监听函数;useCapture: 可选, 是一个布尔值, 默认是false;

2.2 attacheEvent()事件监听（IE678支持）

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行;

该方法接收两个参数:

eventNameWithOn: 事件类型字符串, 比如: click, mouseover, 注意这里带on;callback: 事件处理函数, 事件发生调用;

**注意:IE8及早期版本支持;

<button>传统注册事件</button><button>方法监听注册事件</button><button>ie9 attachEvent</button><script>var btns = document.querySelectorAll('button');// 1. 传统方式注册事件btns[0].onclick = function() {alert('hi');}btns[0].onclick = function() {alert('hao a u');}// 2. 事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串必定加引号而且不带on// (2) 同一个元素同一个事件可以添加多个侦听器（事件处理程序）btns[1].addEventListener('click', function() {alert(22);})btns[1].addEventListener('click', function() {alert(33);})// 3. attachEvent ie9以前的版本支持btns[2].attachEvent('onclick', function() {alert(11);})</script>

2.3 事件监听兼容性解决方案:

封装一个函数，函数中判断浏览器的类型:

function addEventListener(element, eventName, fn) {// 判断当前浏览器是否支持addEventlistener方法if(element.addEvementListener) {element.addEventListener(eventName, fn); //第三个参数, 默认是false} else if (element.attachEvent) {element.attachEvent("on" + eventName, fn);} else {// 相当于element.onclick = fnelement['on' + evementName] = fn;}}

3. 删除事件(解绑事件)

3.1 传统方式:

eventTarget.onclick = null;

3.2 方法监听注册方式:

eventTarget.removeEventListener(type, listener [, useCpture]);eventTarget.detachEvent(eventNameWithOn, callback);

<head><title>删除事件</title><style>div {width: 100px;height: 100px;margin: 40px 40px;text-align: center;line-height: 100px;background-color: pink;}</style><script>window.onload = function() {var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);// 1. 传统方式删除事件divs[0].onclick = null;}// 2. removeEventListener 删除事件divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号function fn() {alert(22);divs[1].removeEventListener('click', fn);}// 3. detachEventdivs[2].attachEvent('onclick', fn1);function fn1() {alert(33);divs[2].detachEvent('onclick', fn1);}}</script></head><body><div>1</div><div>2</div><div>3</div><div>4</div></body>

删除事件兼容性兼容方案

function removeEventListener(element, eventName, fn) {// 判断当前浏览器是否支持removeEventlistener方法if(element.removeEvementListener) {element.removeEventListener(eventName, fn); //第三个参数, 默认是false} else if (element.detachEvent) {element.detachEvent("on" + eventName, fn);} else {// 相当于element.onclick = nullelement['on' + evementName] = null;}}

4. DOM事件流:

事件流描述的是从页面中接收事件的顺序;事件发生时会在元素节点知己恩按照特定的顺序传播, 这个传播过程即DOM事件流;

比如：给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document

事件冒泡: IE最早提出, 事件开始时由具体的元素接收, 然后逐级向上传播到DOM最顶层节点的过程;事件捕获: 网景最早提出, 由DOM最顶层节点开始, 然后逐级向下传播到最具体的元素接收的过程;

当时的2大浏览器霸主谁也不服谁IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流;Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流;最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡;现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段;

DOM事件流会经历3个阶段:

捕获阶段;当前目标阶段;冒泡阶段;

注意:

js代码中只能执行捕获或者冒泡其中的一个阶段;onclick和attachEvent只能得到冒泡阶段;

-eventTarget.addEventListener( type, listener[, useCapture])第三个参数如果是true, 表示在事件捕获阶段调用事件处理程序; 如果是false, 表示在事件冒泡阶段调用事件处理程序;实际开发中很少使用事件捕获, 更加关注事件冒泡;有些事件是没有冒泡的, 比如: onblur, onfocus, onmouseenter, onmouseleave;

事件冒泡

<head><title>事件流的三个阶段</title><style>.father {overflow: hidden;width: 300px;height: 300px;margin: 100px auto;background-color: pink;text-align: center;}.son {width: 200px;height: 200px;margin: 50px;background-color: purple;line-height: 200px;color: #fff;}</style><script>window.onload = function() {var son = document.querySelector('.son');var father = document.querySelector('.father');// 添加冒泡, false son -> fatherson.addEventListener('click', function() {alert('捕获son');}, false);father.addEventListener('click', function() {alert('捕获father');}, false);}</script></head><body><div class="father"><div class="son">son盒子</div></div></body>

事件捕获

// 添加捕获, true father -> sonvar son = document.querySelector('.son');var father = document.querySelector('.father');son.addEventListener('click', function() {alert('捕获son');}, true);father.addEventListener('click', function() {alert('捕获father');}, true);

5. 事件对象:

5.1 什么是事件对象:

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象;

比如:

谁绑定了这个事件;鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置;键盘触发事件的话，会得到键盘的相关信息，如按了哪个键;

5.2 事件对象的使用:

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数;

所以，在事件处理函数中声明1个形参用来接收事件对象.

eventTarget.onclick = function(event) {// 这个event参数是事件对象}eventTarget.addEventListener('click', function(event) {// 这个event参数是事件对象})

5.3 事件对象的兼容性处理:

事件对象本身的获取存在兼容问题：

标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到;在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找;

解决:

e = e || window.event

只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。

只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。

```html<div>123</div><script>var div = document.querySelector('div');div.onclick = function(e) {// 事件对象e = e || window.event;console.log(e);}</script>

5.4 事件对象的属性和方法:

e.target 和 this 的区别

this 是事件绑定的元素（绑定这个事件处理函数的元素）。e.target 是事件触发的元素。

常情况下terget 和 this是一致的, 但有一种情况不同，那就是在事件冒泡时()父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素，因为它是绑定事件的元素对象, 而target指向的是子元素，因为他是触发事件的那个具体元素对象

<div>123</div><script>var div = document.querySelector('div');div.addEventListener('click', function(e) {// e.target 和 this指向的都是divconsole.log(e.target);console.log(this);});</script>

事件冒泡下的e.target和this

<ul><li>abc</li><li>abc</li><li>abc</li></ul><script>var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// 给ul 绑定了事件那么this 就指向ul console.log(this); // ul// e.target 触发了事件的对象点击的是li e.target 指向的就是liconsole.log(e.target); // li});</script>

6. 阻止默认行为:

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转;

<a href="">百度</a><script>// 2. 阻止默认行为让链接不跳转 var a = document.querySelector('a');a.addEventListener('click', function(e) {e.preventDefault(); // dom 标准写法});// 3. 传统的注册方式a.onclick = function(e) {// 普通浏览器 e.preventDefault(); 方法e.preventDefault();// 低版本浏览器 ie678 returnValue 属性e.returnValue = false;// 可以利用return false 也能阻止默认行为没有兼容性问题return false;}</script>

7. 阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处.

标准写法: 利用事件对象里面的stopPropagation()方法

e.stopPropagation()

非标准写法: IE 6~8 利用事件对象cancelBubble属性

e.cancelBubble = true;

<div class="father"><div class="son">son儿子</div></div><script>var son = document.querySelector('.son');// 给son注册单击事件son.addEventListener('click', function(e) {alert('son');e.stopPropagation(); // stop 停止 Propagation 传播window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡}, false);var father = document.querySelector('.father');// 给father注册单击事件father.addEventListener('click', function() {alert('father');}, false);// 给document注册单击事件document.addEventListener('click', function() {alert('document');})</script>

阻止事件冒泡的兼容性处理

if(e && e.stopPropagation) {e.stopPropagation();} else {window.event.cancelBubble = true;}

8. 事件委托:

8.1 委托:

把事情委托给别人，代为处理

事件委托也称为事件代理，在 jQuery 里面称为事件委派

说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行

js事件中的代理:

<ul><li>知否知否, 此处应该有弹窗</li><li>知否知否, 此处应该有弹窗</li><li>知否知否, 此处应该有弹窗</li><li>知否知否, 此处应该有弹窗</li><li>知否知否, 此处应该有弹窗</li></ul>

8.2 事件委托的原理

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素.

8.3 事件委托的作用

只操作了一次 DOM ，提高了程序的性能;动态新创建的子元素，也拥有事件;

<head><title>事件委托</title><style>.activate {background-color: pink;}</style><script>window.onload = function() {var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {var lis = this.childNodesfor(var i = 0; i < lis.length; i++){lis[i].className = '';}e.target.className = 'activate';})}</script></head><body><ul><li>知否知否，点我应有弹框在手！1</li><li>知否知否，点我应有弹框在手！2</li><li>知否知否，点我应有弹框在手！3</li><li>知否知否，点我应有弹框在手！4</li><li>知否知否，点我应有弹框在手！5</li></ul></body>

9. 常用鼠标事件:

9.1 案例：禁止选中文字和禁止右键菜单:

禁止鼠标右键:

contextmenu主要控制应该何时显示上下文菜单, 主要用于程序员取消默认的上下文菜单;

document.addEventListener('contextmeu', function(e) {e.preventDefault();})

禁止鼠标选中(selectstart 开始选中)

document.addEventListener('selectstart', function(e) {e.preventDefault();})

实现:

<head><title>禁止鼠标事件</title><script>window.onload = function() {// 1. contextmenu 可以禁用右键菜单document.addEventListener('contextmenu', function(e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener('selectstart', function(e) {e.preventDefault();})}</script></head><body>我是一段不愿意分享的文字</body>

10. 鼠标事件对象:

event事件对象是事件相关的一系列信息的集合

主要用到的事鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent

10.2 案例:获取鼠标在页面的坐标

<head><title>鼠标坐标</title><script>window.onload = function() {var p = document.querySelector('p');document.addEventListener('click', function(e) {// 1. client 鼠标在可视区的x和y坐标console.log(e.clientX);console.log(e.clientY);console.log('---------------------');// 2. page 鼠标在页面文档的x和y坐标console.log(e.pageX);console.log(e.pageY);console.log('---------------------');// 3. screen 鼠标在电脑屏幕的x和y坐标console.log(e.screenX);console.log(e.screenY);})}</script></head><body></body>

10.3 案例：跟随鼠标的天使:

案例分析:

鼠标不断移动, 使用鼠标移动事件: mousemove在页面中移动, 给document注册事件;图片要移动距离, 而且不占位置, 使用绝对定位即可;核心原理: 每次鼠标移动, 都会获得最新的鼠标坐标, 把这个x和y坐标作为图片的top, left值就可以移动图片;

实现:

<head><title>移动天使</title><style>img {position: absolute;top: 2px;}</style><script>window.onload = function(){var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x = e.pageX;var y = e.pageY;console.log('x坐标是' + x, 'y坐标是' + y);pic.style.left = x - 50 + 'px';pic.style.top = y - 40 + 'px';})}</script></head><body><img src="./images/angel.gif" alt=""><div>dwlbdhsbhcsbh的速度回来吃好吧好吧</div></body>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。