DOM操作与事件处理详解-优快云博客

Day3

七、结点操作
八、事件高级

七、结点操作

7.5 删除结点

node.removeChild(child)：从 DOM 中删除一个子节点，返回删除的节点

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

在这里插入图片描述

7.6 案例-删除留言

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        // 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 {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                // 删除元素
                var as = document.querySelectorAll('a')
                for(var i = 0; i < as.length; i++) {
                    // node.removeChild(child)  
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode)
                    }
                }
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

7.7 复制（克隆）节点

node.cloneNode()

注意：
1.如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2.如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

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

在这里插入图片描述

7.8 案例-动态生成表格

1.因为里面的学生数据都是动态的，我们需要js 动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。
2.所有的数据都是放到tbody里面的行里面。
3.因为行很多，我们需要循环创建多个行（对应多少人）
4.每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
5.最后一列单元格是删除，需要单独创建单元格。
6.最后添加删除操作，单击删除，可以删除当前行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <script>
            // 1. 准备学生数据
            var datas = [{
                name:'魏璎珞',
                subject:'JavaScript',
                score:100
            }, {
                name:'弘历',
                subject:'JavaScript',
                score:98
            }, {
                name:'傅恒',
                subject:'JavaScript',
                score:99
            }, {
                name:'明玉',
                subject:'JavaScript',
                score:88
            }]
            // 2. 往tbody里面创建行--有几个人就创建几行(通过数组长度得到)
            var tbody = document.querySelector('tbody')
            for(var i = 0; i < datas.length; i++) {     //外面的for循环管理行-tr
                // 1. 创建 tr行
                var tr = document.createElement('tr')
                tbody.appendChild(tr)
                // 2. 行里面创建单元格(跟数据有关系的3个单元格) td--单元格的数量取决于每个对象里面的属性个数,for循环遍历对象
                for(var k in datas[i]) {     // 里面的for循环管理列-td
                    // 创建单元格
                    var td = document.createElement('td')
                    // 把对象里面的属性值 datas[i][k] 给 td
                    td.innerHTML = datas[i][k]
                    tr.appendChild(td)
                }   
                // 3. 创建删除单元格
                var td = document.createElement('td')
                td.innerHTML = '<a href = "javascrip:;">删除 </a>'
                tr.appendChild(td)
            }
            // 4. 删除操作-开始
            var as = document.querySelectorAll('a')
            for(var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    // 点击a，删除a所在的行(连接的爸爸的爸爸)
                    tbody.removeChild(this.parentNode.parentNode)
                }
            }
            // for(var k in obj) {
            //     k 得到的是属性名
            //     obj[k] 得到的是属性值
            // }
        </script>
    </table>
</body>
</html>

在这里插入图片描述

7.9 三种动态创建元素区别

1.document.write()
2.element.innerHTML
3.document.createElement()

区别：

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

八、事件高级

8.1 注册事件（绑定事件）

1.传统注册方式
利用 on 开头的事件—如onclick

特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

2.方法监听注册方式-addEventListener
在这里插入图片描述
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button')
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi')
        }
        btns[0].onclick = function() {
            alert('how are you')
        }
        // 2. 事件侦听注册事件  addEventListener里面的事件类型是字符串，必定加引号，而且不带on
        // 同一个元素、同一个事件可以添加多个侦听器(事件处理程序)
        btns[1].addEventListener('click', function() {
            alert(22)
        })
        btns[1].addEventListener('click', function() {
            alert(33)
        })
    </script>
</body>

在这里插入图片描述

8.2 删除事件（解绑事件）

1.传统删除方式
eventTarget.onclick = null

2.方法监听删除方式
eventTarget.removeEventListener(type, listener[, useCapture])

以下程序实现：点击div-弹框-再次点击该div-不弹框

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div')
        divs[0].onclick = function() {
            alert(1)
            // 传统方式删除事件(解绑)
            divs[0].onclick = null
        }
        divs[1].addEventListener('click', fn) //里面的fn不需要调用加小括号
        function fn() {
            alert(22)
            divs[1].removeEventListener('click', fn)
        }
    </script>
</body>

在这里插入图片描述

8.3 DOM 事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

比如我们给一个div 注册了点击事件：
在这里插入图片描述
DOM 事件流分为3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
在这里插入图片描述
注意
1.JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2.onclick 和 attachEvent 只能得到冒泡阶段。
3.addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5.有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
</head>
<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 如果addEventListener的第三个参数是true，则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son')
        // son.addEventListener('click', function() {
        //     alert('son')
        // }, true)
        // var father = document.querySelector('.father')
        // father.addEventListener('click', function() {
        //     alert('father')
        // }, true)

        // 果addEventListener的第三个参数是false或者省略，则处于冒泡阶段  son -> father -> body -> html -> document
        var son = document.querySelector('.son')
        son.addEventListener('click', function() {
            alert('son')
        }, false)
        var father = document.querySelector('.father')
        father.addEventListener('click', function() {
            alert('father')
        }, false)
    </script>
</body>
</html>

捕获阶段结果：
在这里插入图片描述
冒泡阶段结果：

8.4 事件对象

在这里插入图片描述
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。
比如：
1.谁绑定了这个事件。
2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3.键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div')
        // div.onclick = function(event) {
        //     console.log(event);
        // }

        div.addEventListener('click', function(event) {
            console.log(event);
        })

        // 1. event 就是一个事件对象，写到侦听函数的小括号里面，当形参来看
        // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要传递参数
        // 3. 事件对象是我们事件的一系列相关数据的集合，跟事件相关的，例如鼠标点击就包含了鼠标的相关信息(如鼠标坐标)，键盘输入(判断用户按下了哪个键)
        // 4. 这个事件对象我们可以自己随意命名，如 event、evt、e
    </script>
</body>
</html>

在这里插入图片描述
事件对象的常见属性和方法

返回事件的类型、阻止默认事件

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div')
        div.addEventListener('click', fn)
        div.addEventListener('mouseover', fn)
        div.addEventListener('mouseout', fn)
        function fn(e) {
            console.log(e.type);
        }

        // 2. 阻止默认行为(事件)--让链接不跳转或让提交按钮不提交
        var a = document.querySelector('a')
        a.addEventListener('click', function(e) {
            e.preventDefault()  // 不出现跳转效果了
        })

        // 3. 传统的注册方式
        a.onclick = function(e) {
            e.preventDefault()
            // 利用 return false 也能阻止默认行为,return后面的代码不执行了，而且只限于传统的注册方式
            return false
        }
    </script>
</body>

在这里插入图片描述

e.target 和 this 的区别
e.target 返回的是触发事件的对象(元素) this 返回的是绑定(注册)事件的对象(元素)
了解-跟this有个非常相似的属性–currentTarget

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象(元素)    this 返回的是绑定(注册)事件的对象(元素)
        var div = document.querySelector('div')
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
        })

        var ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
            // 我们给ul绑定了事件，那么this就指向ul
            console.log(this);
            // e.target 指向我们点击的那个对象，我们点击的是li，e.target 指向的就是li
            console.log(e.target);
        })
        
        // 2. 了解 跟this有个非常相似的属性--currentTarget
    </script>
</body>
</html>

在这里插入图片描述

8.5 阻止事件冒泡

利用事件对象里面的 stopPropagation() 方法
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
</head>
<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 阻止冒泡  dom 推荐的标准 stopPropagation()
        var son = document.querySelector('.son')
        son.addEventListener('click', function(e) {
            alert('son')
            e.stopPropagation()
        }, false)
        var father = document.querySelector('.father')
        father.addEventListener('click', function() {
            alert('father')
        }, false)
        document.addEventListener('click', function() {
            alert('document')
        })
    </script>
</body>
</html>

在这里插入图片描述

8.6 事件委托（代理、委派）

事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

事件委托的作用：我们只操作了一次 DOM ，提高了程序的性能。

以下案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！')
            // e.target 可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink'
        })
    </script>
</body>

在这里插入图片描述

8.7 常用的鼠标事件

禁止右键、禁止鼠标选中
1.禁止鼠标右键菜单：contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
在这里插入图片描述
2.禁止鼠标选中：selectstart 开始选中

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. 禁用右键菜单  contextmenu
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault()
        })

        // 2. 禁止选中文字
        document.addEventListener('selectstart', function(e) {
            e.preventDefault()
        })
    </script>
</body>

在这里插入图片描述
鼠标事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>
    <script>
        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('---------------------')
        })
    </script>
</body>
</html>

在这里插入图片描述

8.8 案例-跟随鼠标的天使

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
    <img src="./images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img')
        document.addEventListener('mousemove', function(e) {
            // mousemove  只要鼠标移动1px，就会触发这个事件
            var x = e.pageX
            var y = e.pageY
            pic.style.left = x - 50 + 'px'
            pic.style.top = y - 40 + 'px'
        })
    </script>
</body>
</html>