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

cc.ChenLy2025-02-25 11:08

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

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

对js事件的理解

一、获取dom元素

1、事件绑定方法一

复制代码

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

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

2、事件绑定方法二

javascript 复制代码

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

javascript 复制代码

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

被覆盖了，只弹出hello
3、事件绑定方法三

通过事件来绑定不会覆盖,执行sayHi之后再执行sayHello

addEventListener(事件类型，执行方法， $触发类型$ ）

javascript 复制代码

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

javascript 复制代码

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

二、补充：获取dom对象的方式

掌握一种基本就可以了，个人感觉最好用的是第一种