相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？
让我为大家介绍三种绑定事件的方法吧！
以下都是用点击事件(click)来做示范
一、行内绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 第一种方法,行内绑定事件,取一个函数名称 --> <button onclick="fun()">点击</button> </body> <script> // 第一种方法 function fun() { console.log(1); } </script> </html>
二、使用on绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script> // 第二种方法 // 先获取button元素 let but = document.querySelector("button") // 使用on的方法绑定 but.onclick = function(){ console.log(1); } </script> </html>
三、使用事件监听的形式绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script> // 第三种方法 // 先获取button元素 let but = document.querySelector("button") // 使用addEventListener but.addEventListener("click",function(){ console.log(1); }) </script> </html>
代码总结：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定事件的三种方法</title> </head> <body> <!-- 第一种方法,行内绑定事件,取一个函数名称 --> <!-- <button οnclick="fun()">点击</button> --> <button>点击</button> </body> <script> // 第一种方法 // function fun() { // console.log(1); // } // ....................... // 第二种方法 // 先获取button元素 // let but = document.querySelector("button") // 使用on的方法绑定 // but.onclick = function(){ // console.log(1); // } // ........................... // 第三种方法 // 先获取button元素 // let but = document.querySelector("button") // 使用addEventListener // but.addEventListener("click",function(){ // console.log(1); // }) </script> </html>
本人文笔有限，如有不对的地方，可以向我提出，感谢大家！
