JS绑定事件的三种方法(简单易懂)
相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？
让我为大家介绍三种绑定事件的方法吧！
以下都是用点击事件(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>
本人文笔有限，如有不对的地方，可以向我提出，感谢大家！
