DOM操作-事件的绑定与解绑

最新推荐文章于 2023-06-22 22:14:18 发布

VIP文章春意迟迟、

最新推荐文章于 2023-06-22 22:14:18 发布

阅读量781

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_58167492/article/details/125868579

版权

首先要明确什么是事件？

元素在某种状态(浏览器实现的也叫事件触发)达成时，要执行的提前设定好的程序我们称之为事件句柄。（比如：鼠标点击、键盘按键、鼠标轴滚动、鼠标拖拽等）。

事件的三要素：

事件源、事件类型(不同状态不同类型，如点击、鼠标滚动、按键) 、事件处理程序(handler)

事件的绑定：

事件绑定的方式：

1.行内式：绑定的全局的函数、方法等。可以绑定多个函数/handler

2.属性绑定：获取对象，再添加属性(如：box.onclick)。只能绑一个handler/函数，如果想要绑定多个函数，就在绑定的函数里面去调用两个函数

复习：添加属性的两种方式：

（1）例如：box["name"]=xx 就算原型上有这个属性，也会添加

（2）例如：box.name=xx ....不会重复添加

3.给元素添加一个事件监听器(尽量使用这一种方式)，可以绑定多个函数，可以重复绑定相同的函数。

语法：addEventListener(事件类型，执行程序，布尔值(有默认值))

以下代码都是用这个页面结构：

<body>
    <div class="box" onclick="javaScript:console.log('行内式')">
        <span class="text">是否购买这件商品</span>
        <!-- 直接写myconsole.mylog() 也可以 -->
        <div class="son" id="son1" onclick="javaScript:myconsole.mylog(),fn()&