vue框架后遗症∶被忘记的dom利用

用多了vue、react等前端框架，不得不说用数据驱动视图来开发真的很香，但是也免不了会有不消这些框架的项目，dom利用照旧很有须要的，一开始学习网页筹划的时间就教过，反面不停开发项目根本上用框架。固然有些想不起来了，简单的dom利用照旧会一点的，像获取元素，修改元素内容，给元素加个类……
多个变乱绑定到同一个元素或物件上的需求的办理方案，直接看方法三
对js变乱的明白
一、获取dom元素

1、变乱绑定方法一

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

复制代码

1. function sayHi(){
2.             alert("hi")
3.   }

复制代码

2、变乱绑定方法二

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

复制代码

1. let btn = document.querySelector("#btn")
2. btn.onclick=sayHi
3. btn.onclick=sayHello
4. function sayHi(){
5.     alert("hi")
6. }
7. function sayHello(){
8.     alert("hello")
9. }

复制代码

被覆盖了，只弹出hello
3、变乱绑定方法三
通过变乱来绑定不会覆盖,实行sayHi之后再实行sayHello
addEventListener(变乱范例，实行方法，[触发范例]）

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

复制代码

1. let btn = document.querySelector("#btn")
2. btn.addEventListener("click",sayHi)
3. btn.addEventListener("click",sayHello)
4. function sayHi(){
5.     alert("hi")
6. }
7. function sayHello(){
8.     alert("hello")
9. }

复制代码

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

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