web API—DOM高级

作者: OmewSPG | 来源:发表于2021-10-22 11:18 被阅读0次

在继续之前，先回顾一下DOM基础的重点

文档对象模型（Document Object Model）：是W3C组织推荐的可处理扩展性标记语言（HTML和XML）的标准编程接口（APIs），通过这些DOM接口可以改变网页内容、结构或者样式
对于JavaScript，为了能够让其操作HTML，JavaScript拥有一套自己的编程接口
对于HTML，DOM使得HTML形成一课DOM树，包含了文档，元素与节点
关于DOM操作，主要针对于创建、增加、删除、修改、查询、属性操作、事件操作几个方面

创建

document.write
innerHTML
createElement

增加

appendChild
insertBefore

删除

removeChild

修改

主要针对于DOM元素属性、DOM元素内容、表单的属性和值等

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

查询

主要获取查询DOM元素

DOM提供的API方法：getElementById、getElementByTagName
H5新增的方法：querySelector、querySelectorAll
利用节点操作获取元素：父节点（parentNode）、子节点（children）、兄弟节点（previousElementSibling、nextElementSibling）

属性操作

主要针对自定义属性

setAttribute：设置dom属性值
getAttribute：得到dom属性值
removerAttribute：移除属性

事件操作

获取事件源+事件类型+事件处理程序

事件操作.png

两种注册事件方式

事件注册的两种方式.png

addEventListener事件监听方式.png

传统方式注册事件

        var btns = document.querySelectorAll('button');
        // 如果注册多个事件，后面的会覆盖掉前面的事件
        btns[0].onclick = function () {
            alert('hi');
        }
        btns[0].onclick = function () {
            alert('hao a u');
        }

点击按钮，实际只会弹出 'hao a u' 这一个对话框

事件侦听注册事件 addEventListener

里面的事件类型是字符串，必定加引号，而且不带on
同一个元素，同一个事件可以添加多个侦听器（事件处理程序）

        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })

点击按钮，会先弹出22，再弹出33

删除事件

传统方式解绑事件

        var btns = document.querySelectorAll('button');

        // 传统方式解绑事件
        btns[0].onclick = function(){
            alert('22');
            btns[0].onclick = null;
        }

方法监听移除事件 removeEventListener

        btns[1].addEventListener('click',fn);

        function fn(){
            alert('33');
            btns[1].removeEventListener('click',fn);
        }

DOM事件流

DOM事件流.png

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

注意事项：

JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent 只能得到冒泡阶段
addEventListener（type，listener，[useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；反之，如果是false（默认），表示在事件冒泡阶段调用事件处理程序
实际开发中更多用到的是事件冒泡
有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会很巧妙的做某些事件

DOM事件流代码验证

html：

    <div class="father">
        <div class="son">son盒子</div>
    </div>

css：

    <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>

image.png

捕获阶段：
如果addEventListener 第三个参数是 true，那么则处于捕获阶段

        var son = document.querySelector('.son');
        var father = document.querySelector('.father');

        son.addEventListener('click', function () {
            alert('son');
        }, true);
        father.addEventListener('click', function () {
            alert('father');
        }, true);

顺序：document -> html -> body -> father -> son
实际结果会先弹出father，后弹出son

冒泡阶段：
如果addEventListener 第三个参数是 false或空，那么则处于冒泡阶段

        var son = document.querySelector('.son');
        var father = document.querySelector('.father');

        son.addEventListener('click', function () {
            alert('son');
        });
        father.addEventListener('click', function () {
            alert('father');
        });
        document.addEventListener('click',function(){
            alert('document');
        })

顺序：son -> father -> body -> html -> document
实际结果会先弹出son，然后是father，最后是document

事件对象

        var div = document.querySelector('div');

        // div.onclick = function (event) {
        //     console.log(event);
        // }

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

event 就是一个事件对象，写到我们侦听函数的小括号里面，当形参来看
事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息，比如判断用户按下了那个键
这个事件对象我们可以自己命名，比如 event 、 evt、 e
事件对象也有兼容性问题，ie678 通过 window.event 兼容性的写法 e = e || window.event;

e.target与this的区别

html：

    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>

常见事件对象属性和方法：
e.target 返回触发事件的元素（对象）
this 返回绑定事件的元素（对象）

        var div = document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(e.target);
            console.log(this);     // 都返回 <div>123</div>
        });

        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            console.log(e.target);   // 点击li，返回li标签
            console.log(this);     // 点击li，返回ul标签
        })

返回事件类型与阻止默认行为

返回事件类型

        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e){
            console.log(e.type);    // 根据鼠标触发事件类型打印出动作行为
        }

阻止默认行为，比如让链接不跳转，让提交按钮不提交

        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();    // dom标准写法
        });

阻止冒泡

html：

    <div class="father">
        <div class="son">son儿子</div>
    </div>

image.png
阻止冒泡， dom推荐标准 stopPropagation()

        var son = document.querySelector('.son');
        son.addEventListener('click',function(e){
            alert('son');
            e.stopPropagation();  // 阻止此元素后面的冒泡阶段
        });

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);

        document.addEventListener('click', function() {
            alert('document');
        });

点击son，不会弹出后面的father和document
但是父元素因为没有对冒泡进行阻止，所以如果点击father，还是会弹出'document'

事件委托

事件委托1.png

（当然你也可以用循环来给每个li添加事件，这样虽然不难，但是添加事件所占用的内存也多）

事件委托：也被称作事件代理，在jQuery里被叫做事件委派
事件委托的原理：不是给每个子节点设置事件监听器，而是将监听器设置在父节点上，然后利用事件冒泡原理影响到设置的每个子节点
对于上图的案例：先给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，又因为ul有注册事件，就会触发事件监听器
事件委托的作用：以上整个过程只添加了一次DOM操作，提高了程序的性能
html：

    <ul>
        <li>This is a para...</li>
        <li>This is a para...</li>
        <li>This is a para...</li>
        <li>This is a para...</li>
        <li>This is a para...</li>
    </ul>

js：

    <script>
        // 事件委托核心：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            // alert('I am clicked !');
            // 利用e.target可以得到当前点击对象
            e.target.style.backgroundColor = 'aqua';
        })

    </script>

常见事件

常见鼠标事件

        // contextmenu 可以禁用鼠标右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        });

        // selectstart 可以禁止选中文字
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })

鼠标事件对象

鼠标事件对象.png

键盘事件对象

常用的键盘事件：

keyup 按键弹起的时候触发

        // document.onkeyup = function() {
        //         console.log('我弹起了');
        //     }

        document.addEventListener('keyup', function () {
            console.log('我弹起了');
        })

keydown 按键按下的时候触发

        document.addEventListener('keydown', function () {
            console.log('我按下了');
        })

keypress 按键按下的时候触发不能识别功能键比如 ctrl shift 左右箭头...

        document.addEventListener('keypress', function () {
            console.log('我按下了press');
        })

三个事件的执行顺序 keydown -- keypress -- keyup

键盘事件对象：

        document.addEventListener('keydown',function(e){
            // console.log(e);
            console.log(e.keyCode);   // 返回按键 ASCII 值
            // keyup 和 keydown 不区分字母大小写
        })

        document.addEventListener('keypress',function(e){
            console.log('press:' + e.keyCode);   // 返回按键 ASCII 值
            // keypress 可以区分字母大小写
            // A: 65     a: 97
        })

web API—DOM高级

在继续之前，先回顾一下DOM基础的重点

创建

增加

删除

修改

查询

属性操作

事件操作

两种注册事件方式

传统方式注册事件

事件侦听注册事件 addEventListener

删除事件

传统方式解绑事件

方法监听移除事件 removeEventListener

DOM事件流

DOM事件流代码验证

事件对象

e.target与this的区别

返回事件类型与阻止默认行为

阻止冒泡

事件委托

常见事件

常见鼠标事件

鼠标事件对象

键盘事件对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读