DOM事件导读

小白在追赶

已于 2022-04-17 18:17:51 修改

阅读量175

点赞数 1

文章标签： javascript

于 2022-04-17 18:16:17 首次发布

本文链接：https://blog.csdn.net/weixin_59179354/article/details/124227857

版权

三元动态创建元素区别

document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

element.innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘

element.innerHTML创建多个元素效率更高（不要采取拼接字符串，而是采用数组形式拼接）结构稍微复杂

document.createElement()创建多个元素效率稍低一点点，但结构更清晰

总结：不同浏览器下，innerHTML（采用数组形式拼接）效率要比createElement高

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

给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册事件。

传统注册事件：利用on开头的事件如：onclick

<button οnclick="alert('hi~')"></button>

btn.οnclick=function(){}

特点：注册事件的唯一性

同一个元素同一个事件只能设计一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式 w3c标准推荐的方式

addEventlistener()它是一个方法

IE9之前的IE 不支持，可使用attachEvent()代替(了解)

特点：同一个元素同一个事件可以注册多个监听器按照顺序依次执行

addEventListener事件监听

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

type:事件类型字符串，比如click、mouseover注意这里不带on

listener:事件处理函数

useCapture:可选参数，是一个布尔型，默认是false
<body>
    <button>事件监听</button>
    <script>
        //里面的事件是字符串 必定加引号 而且不带on
        //同一个元素 同一个事件可以添加多个监听器（事件处理程序）
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('11');
        })
        btn.addEventListener('click',function(){
            alert('22');
        })
    </script>

删除事件（解除事件）

1传统删除事件 eventTarget.οnclick= null;

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

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function(){
            alert('11');
            this.onclick = null;//传统方式
        }
        divs[1].addEventListener('click',fn);//注意fn不用加括号
        function fn(){
            alert('22');
            divs[1].removeEventListener('click',fn)
        }
    </script>
</body>

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

事件流描述的是从页面接收事件的顺序。

DOM事件流分为3个阶段：

1.捕获阶段 2.当前目标阶段 3.冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接受的过程。

JS代码中只执行捕获或者冒泡其中的一个阶段。

onclick和attchEvent只能得到冒泡阶段。

eventTarget.addEventListener(type,listener ,[,useCapture])第三个参数如果时true，表示事件捕获阶段调用事件处理程序；如果false（不写就是false),表示在事件冒泡阶段调用事件处理程序

  <style>
    .father{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;

    }
    .father .son{  
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background-color: red;
    }
    </style>
</head>
<body>
    <div class="father">
      <span class="son"></span>
    </div>
    <script>
        var div = document.querySelector('.father');
        var span = document.querySelector('.son');
        // div.addEventListener('click',function(){
        //     alert('father')
        // },true)
        // span.addEventListener('click',function(){
        //     alert('son')
        // },true)传统方法覆盖上面的事件

        div.addEventListener('click',function(){
            alert('father')
        })
        span.addEventListener('click',function(){
            alert('son')
        })
    </script>
</body>

实际开发很少使用事件捕获，更关注事件冒泡

有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave