JS原生绑定事件的3种方式
2022-08-10 本文已影响0人
梁帆
如下代码所示，三个btn代表三种不同的时间绑定方式：
<body>
<button id="btn1">BTN1</button>
<button id="btn2">BTN2</button>
<button onclick="btnAlert">BTN3</button>
<script type="text/javascript">
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
btn1.addEventListener("click", () => {
alert("clicked btn1")
})
btn2.onclick = () => {
alert("clicked btn2")
}
function btnAlert() {
alert("clicked btn3")
}
</script>
</body>
在React框架中，比较推荐使用第三种绑定方式——即在标签上指明onClick方法。需要注意这里的区别，React框架中C是大写的，与原生的onclick不同。
