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

用多了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对象的方式

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

相关推荐
sophie旭几秒前
一道面试题,开始性能优化之旅(6)-- 异步任务和性能
前端·javascript·性能优化
北城以北888822 分钟前
Vue--Vue基础(一)
前端·javascript·vue.js
sniper_fandc1 小时前
Vue Router路由
前端·javascript·vue.js
知识分享小能手10 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
蓝莓味的口香糖11 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
reembarkation12 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
Roye_ack13 小时前
【项目实战 Day9】springboot + vue 苍穹外卖系统(用户端订单模块 + 商家端订单管理模块 完结)
java·vue.js·spring boot·后端·mybatis
gerrgwg13 小时前
React Hooks入门
前端·javascript·react.js
汉字萌萌哒13 小时前
【 HTML基础知识】
前端·javascript·windows
北城以北888815 小时前
Vue--Vue基础(二)
前端·javascript·vue.js