Dom中的事件绑定

最新推荐文章于 2024-11-15 13:54:42 发布

C20001206

最新推荐文章于 2024-11-15 13:54:42 发布

阅读量50

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 开发语言 ecmascript html

本文链接：https://blog.csdn.net/C20001206/article/details/131553511

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

dom中的事件绑定分为：0级事件绑定，2级事件绑定

1. 0级事件绑定：on事件类型

作用：给元素绑定事件
语法：dom元素.on事件类型 = 事件处理函数
参数：无
注意：dom0级绑定事件使用on关键字绑定，不能给同一元素添加多个统一类型的事件
解绑事件的方法：dom元素.on事件类型 = null

代码模块展示：

<body>
    <button>点击我改变背景</button>

    <script>
        
        // 获取元素
        const btn = document.querySelector('button')
        // 给元素添加 0 级点击事件
        btn.onclick = function() {
            document.body.style.backgroundColor = 'red'
        }
        // 继续绑定事件
        btn.onclick = function() {
            alert('你好')
        }

        // 解绑事件
        btn.onclick = null
        // 第一个事件失效，dom 0 级事件不能给一个元素添加统一类型的多个事件、
        
    </script>
</body>

2. 2级事件绑定：

addEventListener()
作用：给dom元素绑定事件监听
语法：dom元素.addEventListener('事件类型', 事件处理函数, true/false)
参数：
参数1：'事件类型'
参数2：事件处理函数
参数3：true表示事件捕获， false表示事件冒泡，默认时false

代码模块展示：

<body>
    <button>点击我</button>
    <script>
     

        // 获取元素
        const btn = document.querySelector('button')
        // 给元素添加dom 2级事件 ，事件监听
        btn.addEventListener('click', function() {
            alert('nihao')
        })
        function nihao() {
            console.log('nihao')
        }
        // 继续添加二级事件
        btn.addEventListener('click',nihao)

        // 两个事件都会生效

        // 解绑事件
        btn.removeEventListener('click', nihao)
    </script>
</body>

3. 2级事件解绑：

作用：给dom元素解除事件监听
语法：dom元素.removeEventListener('事件类型', 事件处理函数的名称)
参数：
参数1：'事件类型'
参数2：事件处理函数名

<body>
    <button>点击我</button>
    <script>
        

        // 获取元素
        const btn = document.querySelector('button')
        // 给元素添加dom 2级事件 ，事件监听
        btn.addEventListener('click', function() {
            alert('nihao')
        })
        function nihao() {
            console.log('nihao')
        }
        // 继续添加二级事件
        btn.addEventListener('click',nihao)

        // 两个事件都会生效

        // 解绑事件
        btn.removeEventListener('click', nihao)
    </script>
</body>