JavaScript 事件的概念:
事件就是发生在 HTML 元素上的“事情”。例如这个 div 标签被用户点击(click 事件),或者是浏览器已经完成页面加载(load 事件),又或者鼠标移动到某个 HTML 元素上(mouseover 事件)等等,当这些事件触发时,我们要让程序去做一些操作,这些操作被称为事件的响应。
JavaScript 事件的绑定:
常用的绑定方式有三种:
通过on 在DOM 元素中直接绑定:
<button onclick="fn()">按钮</button> <script> function fn(){ alert('事件响应'); } </script>
在JavaScript 代码中绑定:
<button id="isButton">按钮</button> <script> let isButton = document.getElementById('isButton'); isButton.onclick = function () { alert('事件响应'); } </script>
以上方式不能重复绑定相同事件,且事件前需要加上 on 关键字
绑定事件监听函数:
语法为:元素.addEventListener(事件名,执行程序,true/false)
<button id="isButton">按钮</button> <script> let isButton = document.getElementById('isButton'); isButton.addEventListener('click',function() { alert('事件响应'); }) </script>
此方法可以重复绑定相同的事件,或是绑定多个事件,并且不需要加 on 前缀