DOM事件的理解

最新推荐文章于 2023-04-16 18:57:59 发布

weixin_37347069

最新推荐文章于 2023-04-16 18:57:59 发布

阅读量683

点赞数

分类专栏：前端技术文章标签： js中的dom事件冒泡捕获事件流事件委托

本文链接：https://blog.csdn.net/weixin_37347069/article/details/84844915

版权

前端技术专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、DOM事件级别（DOM标准指定的级别）
DOM0:
在js中写法element.onclick = function(){}，
在html中onclick属性上加js语句；

DOM2:
element.addEventListener(‘click’,function(){},false);
冒泡还是捕获由false/true来定

DOM3:
element.addEventListener(‘keyup’,function(){},false)
事件类型增加了很多，比如鼠标事件、键盘事件
在DOM1标准指定中没有涉及与事件相关的

2、DOM事件模型
捕获：从上往下
冒泡：从当前元素（目标元素）往上

3、什么是DOM事件流
浏览器在为当前页面与用户做交互的过程中，比如点击左键，这个事件是如何传到页面中？如何响应？
第一阶段是捕获，第二阶段目标阶段，第三阶段冒泡；事件通过捕获达到目标元素（第二阶段），从目标元素在上传到window对象（第三阶段），也就是冒泡的过程。

4、DOM事件类，DOM事件捕获的具体流程
第一个接收到事件的是：window**
捕获的过程如下：
window->document->html标签->body->…目标元素
在js中如何获取html标签？
document.documentElement

5、event对象的常见应用

event.preventDefault() //阻止默认事件
比如在html中form表单，阻止表单的提交；在a标签中给其click事件，
在响应函数中preventDefalut可以阻止链接默认跳转的行为。

 <section>
        <h1>阻止默认事件</h1>
        <a href="./test.html" onClick="preventDefaultFn(event)">点击我测试</a>
    </section>

 //阻止默认事件例子
    function preventDefaultFn(event){
        event.preventDefault();
        console.log("没有跳转页面了！");
    }

点击没有跳转页面
下面是一个实际的应用场景，在form表单中点击button事件,会提交表单刷新页面，如果不阻止表单提交这个默认事件，那么当页面内容很多时，会明显看到页面有一段时间显示空白，那么我们可以通过阻止默认事件来避免这种情况，直接上代码

<body>
    这个页面很多很多的内容
    <form>
        <h1>表单提交刷新页面问题</h1>
        <input type="text" value=""/>
        <button onClick="unSumbitForm(event)">点击我提交</button>
    </form>
</body>
<script>
    function unSumbitForm(event){
        event.preventDefault();
        console.log("我阻止了表单提交刷新页面！！！");
    }
</script>

event.stopPropagation() //阻止冒泡
父元素和子元素，单击子、父元素各执行一个事件，这种情况下当单击子元素时，父元素也会响应，可用stopPropagation阻止冒泡。非标准情况下，用window.event.stopBubble来阻止冒泡

 <section>
        <h1>阻止事件冒泡</h1>
	    <div class="parent" onClick="parentFn();">
            <p>点击了父元素</p>
            <div class="child" onClick="childFn();">点击了子元素</div>
        </div>
    </section>

  function parentFn(){
          alert("我是父元素的点击事件");
        }
        function childFn(){
          alert("我是子元素的点击事件");
          event.stopPropagation()
        }

结果：点击子元素时只执行了childFn（）函数；

event.stopImmediatePropagation()
事件响应优先级中使用
比如一个按钮绑定注册两个事件：A、B事件，想要在A点击时不执行B,那么在A事件函数中添加stopImmediatePropagation 可实现阻止B的执行；
比如一个应用场景
假设点击一个按钮后，需要检测两个input控件的值，值为空时打印’error’，并停止检测下一个input，同时也需停止提单提交。

  <body>
        <form>
        <input type="text" id="txt1">
　　　　 <input type="text" id="txt2">
        <input type="submit" value="button" id="btn">
        </form>
        <script>
            var txt1 = document.querySelector("#txt1");
　　　　　 　var txt2 = document.querySelector("#txt2");
            var btn = document.querySelector("#btn");

            btn.addEventListener("click", function(event) {
                if (txt1.value == '') {
                    alert('error1');
                    event.stopImmediatePropagation();
                }
　　　　　　　　if (txt2.value == '') { 
                    alert('error2');
                    event.stopImmediatePropagation();
                }

                
            }, false);
　　　　　　
            btn.addEventListener("click", function() {
                 alert('Done');
            });
        </script>
    </body>

event.currentTarget
event.target
事件委托中，比如中ul父元素for循环出多个li子元素，给每个li注册click事件如何优化?
优化方法：将事件绑定在父元素上，即ul上。
可用event.target获取是哪个li被点击，用event.currentTarget获取当前绑定的事件元素。

<section>
        <h1>阻止事件冒泡</h1>
	    <div class="parent" onClick="parentFn();">
            <p>点击了父元素</p>
            <div class="child" onClick="childFn();">点击了子元素</div>
        </div>
    </section>

    // 事件委托
          function weiTuoEvent(event){
              //当前点击的时第几个li
              console.log(event.target);
              // 事件绑定的节点
              console.log(event.currentTarget);
          }

在这里插入图片描述

自定义事件留着下篇写，晚安！

weixin_37347069

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件的理解

1、DOM事件级别（DOM标准指定的级别）DOM0:在js中写法element.onclick = function(){}，在html中onclick属性上加js语句；DOM2:element.addEventListener(‘click’,function(){},false);冒泡还是捕获由false/true来定DOM3:element.addEventListener(...
复制链接

扫一扫