【元素绑定事件的多种写法】前情了解解决方案总结

72 阅读 0 评论 48 点赞

我是靠谱客的博主深情指甲油，最近开发中收集的这篇文章主要介绍【元素绑定事件的多种写法】前情了解解决方案总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前情了解

在学习前端的过程中，了解到绑定元素的多种写法，各位小伙伴会有点迷茫，小胡就自己目前所了解到汇总一下，欢迎评论区的各位大佬指正~

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<!-- btn1:与html结合 不利于后期维护，不推荐 -->
<button id="btn1" onclick="alert('btn1成功点击！')">btn1</button>
<!-- btn2:在js中通过onclick绑定元素，但这种只能绑定一种函数，若是绑定多个函数，会导致前面的函数失效 -->
<button id="btn2">btn2</button>
<!-- btn3：在js中通过addEventListener绑定事件监听 -->
<button id="btn3">btn3</button>
<!-- btn4：在js中通过attachEvent绑定事件监听 -->
<button id="btn4">btn4</button>
<!-- btn5：通过jquery中的click()方法
通过调用某个事件方法，传入事件处理函数来实现的 jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。-->
<button id="btn5">btn5</button>
<!-- btn6：通过jQuery中的on()方法 一次可绑定多个事件 -->
<button id="btn6">btn6</button>
<script>
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
alert('btn2点击成功！')
}
var btn3=document.getElementById("btn3")
btn3.addEventListener('click', function () {
alert('btn3点击成功！')
})
//ie浏览器
// var btn4= document.getElementById("btn4");
// btn4.attachEvent('onclick',function(){
//
alert('btn4点击成功！')
// })
$('#btn5').click(function(){
alert('btn5点击成功！')
})
$('#btn6').on('click',function(){
alert('btn6点击成功！')
})
</script>
</body>
</html>