面试题：JavaScript中常见的事件监听方式有哪些及其基本用法

Question

请列举JavaScript中至少三种事件监听的方式，并简要说明每种方式如何为HTML元素绑定事件，例如为一个id为 'test' 的按钮绑定点击事件。

Answer 1

1. HTML 事件处理属性方式： 在 HTML 标签内直接定义事件处理函数。例如：

<button id="test" onclick="handleClick()">点击我</button>
<script>
function handleClick() {
    console.log('按钮被点击了');
}
</script>

2. DOM 元素属性方式： 通过获取 DOM 元素，然后为其指定事件处理函数。例如：

<button id="test">点击我</button>
<script>
const testButton = document.getElementById('test');
testButton.onclick = function() {
    console.log('按钮被点击了');
};
</script>

3. addEventListener 方式： 使用 addEventListener 方法来绑定事件。例如：

<button id="test">点击我</button>
<script>
const testButton = document.getElementById('test');
testButton.addEventListener('click', function() {
    console.log('按钮被点击了');
});
</script>

4. attachEvent 方式（仅适用于 IE8 及以下）：

<button id="test">点击我</button>
<script>
const testButton = document.getElementById('test');
if (testButton.attachEvent) {
    testButton.attachEvent('onclick', function() {
        console.log('按钮被点击了');
    });
}
</script>