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

news/2025/2/25 9:06: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对象的方式

掌握一种基本就可以了,个人感觉最好用的是第一种
在这里插入图片描述


http://www.niftyadmin.cn/n/5865294.html

相关文章

VantUI官网更新2025,移动端前端开发

Vant 2 - Mobile UI Components built on Vue https://vant-ui.github.io/vant/v2/#/zh-CN/quickstart Vant 4 - A lightweight, customizable Vue UI library for mobile web apps. https://vant-ui.github.io/vant/#/zh-CN Vant Weapp - 轻量、可靠的小程序 UI 组件库,微…

同质化?生态壁垒?分析2025年宠物智能硬件行业主要竞品的技术布局

一、宠物智能硬件市场&#xff1a;从百亿蓝海到千亿生态的跨越 2023年全球宠物智能硬件市场规模已突破70亿美元&#xff0c;预计2025年将超过100亿美元&#xff0c;年复合增长率达25%以上。这一增长背后&#xff0c;是三大核心驱动力&#xff1a; 情感消费升级&#xff1a;全球…

计算机毕业设计Hadoop+Spark+DeepSeek-R1大模型民宿推荐系统 hive民宿可视化 民宿爬虫 大数据毕业设计(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

常见的Linux面试题

以下是一些常见的Linux面试题&#xff1a; 基础操作类 如何远程连接Linux服务器&#xff1a;常用的工具如Xshell、CRT、FinalShell等&#xff0c;通过SSH协议连接&#xff0c;默认端口是22。 如何查看当前目录下的所有文件&#xff08;包括隐藏文件&#xff09;&#xff1a;使…

stm32week4

stm32学习 二.外设 12.DMA DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设和存储器或者存储器之间的高速数据传输&#xff0c;无须CPU干预&#xff0c;节省了CPU的资源 12个独立可配置的通道&#xff1a;DMA1(7个通道)&#xff0c;DMA2(5个通道) 每个通道都支持软…

Linux提权之sudo提权(十四)

sudo 是一种权限管理机制&#xff0c;管理员可以授权于一些普通用户去执行一些 root 执行的操作&#xff0c;而不需要知道 root 的密码。 首先通过信息收集&#xff0c;查看是否存在sudo配置不当的可能。如果存在&#xff0c;寻找低权限sudo用户的密码&#xff0c;进而提权。 …

开源项目austin学习day01

尝试本地运行项目&#xff0c;遇到如下几个报错&#xff1a; 1.om.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not create connection to database server. Attempted reconnect 3 times. Giving up. 问题&#xff1a;jdbc版本与数据库版本不…

游戏引擎学习第120天

仓库:https://gitee.com/mrxiao_com/2d_game_3 上次回顾&#xff1a;周期计数代码 我们正在进行一个项目的代码优化工作&#xff0c;目标是提高性能。当前正在优化某个特定的代码片段&#xff0c;已经将其执行周期减少到48个周期。为了实现这一目标&#xff0c;我们设计了一个…