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

2022/5/28 1:21:05

编程Tag： javascript 事件元素 html onclick 绑定 addEventListener 30 btn1

本文主要是介绍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添加监听事件

第一个参数传事件名称（不需要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级事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！