Web API（三）节点操作和事件绑定

Web API（三）节点操作和事件绑定

一、节点操作

1、移除节点

父元素.removeChild(子元素)

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

2、复制节点

元素.cloneNode()

• 括号中参数为空或者为false，是浅拷贝，即只是克隆复制节点本身，不克隆里面的子节点。
• 如果括号中参数为true，则是深度拷贝，会复制节点本身以及里面的所有子节点。
• 重点案例：动态生成表格

    <script>
        // 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++) { 
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数  
            // 使用for in遍历学生对象
            for (var k in datas[i]) { 
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有删除2个字的单元格 
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>

3、创建元素的三种方式

innerHTML

document.createElement(标签名)

(了解) document.write() 特点：文档加载完成后调用，会导致页面重绘，即所有内容清空

4、innerTHML和createElement效率对比

• (了解) innerHTML 和 createElement 两种创建元素方法的效率比较

​ 1. 当数据量比较大的时候，innerHTML 拼接字符串，耗时更长，效率较低

​ 2. innerHTML 以数组拼接的方法创建元素，会大大提升绘制效率

• 原因：字符串在 js 中存储的不可变性，字符串拼接会导致栈内存占用过高影响查询效率；而数组存放在堆内存中，不会影响栈的查询效率 (记住结论)

统计代码的执行时间：

• console.time(名字)
• console.timeEnd(名字)

二、 DOM的核心总结

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

1、创建

2、增加

3、删

4、改

5、查

6、属性操作

7、事件操作（重点）

三、JS事件高级

1、监听注册事件

element.addEventListener(type, listener[, useCapture])

​ 参数:

​ (1) type 事件类型，不用加 on, ‘click’, ‘mouserover’

​ (2) listener 监听器，即事件处理函数

​ (3) useCapture 是否使用捕获模式，默认是 false

​ 注意事项：

​ 1. addEventListener 中的事件类型 type，不用加 on

​ 2. onclick 由于是赋值属性的绑定方式，只能为元素上的一种事件添加一个处理函数

​ 3.addEventListener 可以为同一元素添加不同的监听器（事件处理函数），并支持冒泡和捕获

2、 IE9 以下绑定事件的方法（了解）

​ element.attachEvent(ontype, fn)

3、删除事件（解绑事件）

1. 传统方式绑定：element.onclick = fn

​ ==> 删除方法：element.onclick = null

​ 2. 添加事件监听方式：element.addEventListener(type, listener)

​ ==> 删除方法：element.removeEventListener(type, listener)

​ 3. (了解) IE 浏览器事件绑定：element.attachEvent(type, fn)

​ ==> 删除方法：element.dispatchEvent(type, fn)

​ 注意：事件监听方式删除事件，监听器必须抽取出来使用单独的函数名或变量名才能移除

4、DOM事件流

• 事件流理解

​ 元素触发事件后，事件会在目标元素与根节点(document)之间的路径传播，

​ 这个传播的顺序称之为事件流

• 根据先后顺序分为 3 个阶段 (顺序固定不变的)

​ 1. 捕获阶段

​ 2. 目标阶段

​ 3.冒泡阶段(重点!!)

四、事件对象

1、定义：

事件处理函数的第一个形参，一般使用 e 命名，系统在事件触发时，把当前事件相关的具体信息

​ 封装成一个对象传入， 如：触发的元素、触发的方式、触发的位置坐标等

2、事件对象的兼容性

​ IE6~8 中的事件对象通过 window.event 获取事件对象

​ 注意:事件对象是系统内置封装的, 我们直接定义好就可以直接使用了

3、事件对象的属性和方法

• 事件的触发类型：e.type
• 事件的触发的具体元素:e.targe this事件的绑定者

target 属性和 this 的区分:

​ 1. e.target 指向当前事件的触发者，不一定是事件的绑定元素

​ 2. this 始终指向事件的绑定者

4、阻止事件的默认行为: (链接跳转, 表格提交…)

e.preventDefault()

5、阻止事件冒泡

e.stopPropagation();

6、事件委托

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

事件委托的作用

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

7、常用鼠标事件

1. 鼠标右键事件: contextmenu

​ 2. 鼠标选中事件：selectstart

​ 3. 鼠标双击事件：dblclick

​ 4. 鼠标按下事件：mousedown

​ 5. 鼠标松开事件：mouseup

​ 6. 鼠标滚轮事件：wheel

​ 7. 鼠标移动事件：mousemove

​ 8. 鼠标经过事件：mouseover

​ 9. 鼠标离开事件：mouseout

​ 10.鼠标单击事件；click

<div>Hello Itcast</div>

    <script>
        var div = document.querySelector('div');
        // 鼠标右键事件
        div.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 鼠标选中事件
        div.addEventListener('selectstart', function(e) {
                e.preventDefault();
            })
            // 鼠标双击事件
        div.addEventListener('dblclick', function() {
                console.log('456');
            })
            // 鼠标单击事件
        div.addEventListener('click', function() {
                console.log('123');
            })
            // 鼠标按下事件
        div.addEventListener('mousedown', function() {
                console.log('按下了');
            })
            // 鼠标松开事件,松开之后，会触发单击事件
        div.addEventListener('mouseup', function() {
                console.log('松开了');
            })
            // 鼠标滚轮事件
        document.addEventListener('wheel', function(e) {
            console.log(e.deltaY > 0 ? '向下滚动' : '向上滚动');
        })
        document.addEventListener('mousemove', function(e) {
            console.log('移动了');
        })
        document.addEventListener('mouseover', function(e) {
            console.log('经过了');
        })
        document.addEventListener('mouseout', function(e) {
            console.log('离开了');
        })

8、获取鼠标位置

1. （重点）e.pageX 和 e.pageY： 返回鼠标相对整个页面左上角的位置坐标

​ 2. e.clientX 和 e.clientY: 返回鼠标在可视区域的左上角位置坐标

​ 3. e.screenX 和 e.screenY：返回鼠标在电脑屏幕中的位置坐标

​ 注意：返回的坐标值都是数字类型，不带单位 px 的