当前位置：首页 > article >正文

vue框架后遗症∶被遗忘的dom操作

article 2025/2/28 13:40:23

用多了vue、react等前端框架，不得不说用数据驱动视图来开发真的很香，但是也免不了会有不用这些框架的项目，dom操作还是很有必要的，一开始学习网页设计的时候就教过，后面一直开发项目基本上用框架。虽然有些想不起来了，简单的dom操作还是会一点的，像获取元素，修改元素内容，给元素加个类……

多个事件绑定到同一个元素或物件上的需求的解决方案，直接看方法三
对js事件的理解

一、获取dom元素

1、事件绑定方法一

<button onclick="sayHi()">click me</button>

function sayHi(){
            alert("hi")
  }

在这里插入图片描述

2、事件绑定方法二

<button id="btn">click me</button>

let btn = document.querySelector("#btn")
btn.onclick=sayHi
btn.onclick=sayHello
function sayHi(){
    alert("hi")
}
function sayHello(){
    alert("hello")
}

在这里插入图片描述
被覆盖了，只弹出hello
3、事件绑定方法三
通过事件来绑定不会覆盖,执行sayHi之后再执行sayHello
addEventListener(事件类型，执行方法，[触发类型]）

<button id="btn">click me</button>

let btn = document.querySelector("#btn")
btn.addEventListener("click",sayHi)
btn.addEventListener("click",sayHello)
function sayHi(){
    alert("hi")
}
function sayHello(){
    alert("hello")
}