JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件

Posted 上海-悠悠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件相关的知识,希望对你有一定的参考价值。

前言

DOM0 级事件就是 html 元素添加onclick 属性,或者给元素添加onclick事件,但是同元素的同一事件只能绑定一个函数,否则后面的事件会覆盖前面的事件。
如果我们想一个元素绑定多次同一个时间,比如我想绑定2个onclick事件,2个都要生效,于是就有了DOM2 级事件,通过addEventListener绑定的事件。
为什么没有 DOM1 级事件,我也很好奇,DOM1 一般只有设计规范没有具体实现,所以一般没有所谓的DOM1 级事件。

DOM0 级事件

DOM0 级事件就是前面讲到的事件绑定有2种方式,在HTML 中 或在 Script 中绑定事件

  • 在页面元素中onclick=""
  • scrip 中给元素添加onclick属性

绑定事件

    <body>
    <h1>onclick 点击示例</h1>
    <button id="btn1" onclick="myFunc();">点我1</button>
    <button id="btn2">点我2</button>
    <script>
        function myFunc() 
            alert('点我 do something...')
        
        // 绑定btn2
        document.getElementById('btn2').onclick = myFunc;
    </script>
    </body>

取消事件

事件属性设置为null可以取消对应的事件

 <body>
    <h1>onclick 点击示例</h1>
    <button id="btn1" onclick="myFunc();">点我1</button>
    <button id="btn2">点我2</button>
    <script>
        function myFunc() 
            alert('点我 do something...')
        
        // 绑定btn2
        document.getElementById('btn2').onclick = myFunc;

        // 取消btn1 的onclick事件
        document.getElementById('btn1').onclick = null;
    </script>
    </body>

重复绑定

如果对同一个事件绑定2次,那么后面的会覆盖前面的

    <body>
    <h1>onclick 点击示例</h1>
    <button id="btn1" onclick="myFunc();">点我1</button>
    <button id="btn2">点我2</button>
    <script>
        function myFunc() 
            alert('点我 do something...')
        
        function myFunc2() 
            alert('第二个绑定函数 do something...')
        
        // btn1 再绑定一次
        document.getElementById('btn1').onclick = myFunc2;
    </script>
    </body>

后面的会覆盖前面的,不会2个都生效。

DOM2 级事件

如果我们想 2 个事件都生效,用到 DOM2 级事件,通过 addEventListener 绑定的事件。

addEventListener添加监听语法

element.addEventListener(event, function, useCapture);

参数

  • event 是事件的类型,不要使用 “on” 前缀。 如使用 “click” ,而不是使用 “onclick”。
  • function 是事件触发后调用的函数。
  • useCapture 该参数是可选的, 是个布尔值用于描述事件是冒泡还是捕获, 默认值为 false, 即冒泡传递。

addEventListener添加监听事件

addEventListener添加监听事件

  • 第一个参数传事件名称(不需要on开头了)
  • 第二个参数传需执行的函数
    <body>
    <h1>onclick 点击示例</h1>
    <button id="btn1" >点我1</button>
    <script>
        function myFunc() 
            alert('点我 do something...')
        
        // btn1 绑定一次
        document.getElementById('btn1').addEventListener('click', myFunc);
    </script>
    </body>

removeEventListener 移除事件

如果我们想对前面的事件移除,用removeEventListener 移除事件,
事件名称和函数名称需完全一致。

    <body>
    <h1>onclick 点击示例</h1>
    <button id="btn1" >点我1</button>
    <script>
        function myFunc() 
            alert('点我 do something...')
        
        // btn1 绑定一次
        document.getElementById('btn1').addEventListener('click', myFunc);

        // 移除事件
        document.getElementById('btn1').removeEventListener('click', myFunc)
    </script>
    </body>

需要注意的是,事件处理函数是匿名函数,则无法被移除!

addEventListener 同一事件监听多个

给同一个元素的同一个事件,添加多个监听事件

   <body>
    <h1>onclick 点击示例</h1>
    <button id="btn1" >点我1</button>
    <script>
        function myFunc() 
            alert('点我 do something...')
        
        function myFunc2() 
            alert('第二个绑定函数 do something...')
        
        // btn1 绑定一次
        document.getElementById('btn1').addEventListener('click', myFunc);
        // btn1 再绑定一次onclick
        document.getElementById('btn1').addEventListener('click', myFunc2);

    </script>
    </body>

同样的,也可以使用removeEventListener移除当前元素的某一事件行为的多个不同方法

事件冒泡和事件捕获

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。
如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 捕获阶段 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
在 冒泡阶段 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

addEventListener() 方法可以指定 useCapture 参数来设置传递类型:
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

addEventListener( event,  function,  useCapture);

以上是关于JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件的主要内容,如果未能解决你的问题,请参考以下文章

javascript学习笔记:DOM节点概述

Python学习第82天(JavaScript的DOM对象)

Javascript——DOM学习笔记

JavaScript DOM编程艺术学习笔记

JavaScript学习 七DOM

javascript学习笔记整理(DOM对象)