让网页动起来：JavaScript与HTML的事件交互

2023-10-21 19:43:58

在浩瀚的网络世界中，网页不再仅仅是静态的展示平台，它们变得更加生动和交互。这种交互性很大程度上归功于JavaScript与HTML的事件机制。JavaScript作为一门脚本语言，赋予了HTML元素生命，让它们能够响应用户的操作和页面元素的变化，从而实现各种各样的动态效果。

JavaScript与HTML的事件交互

事件是文档或浏览器窗口中某个有意义的时刻，例如鼠标单击、键盘按下、页面加载或滚动等。当事件发生时，浏览器会触发相应的事件处理程序来执行相应的操作。这种机制称为事件驱动编程，是JavaScript和HTML交互的核心。

<button onclick="alert('Hello World!')">点击我</button>

在这个例子中，<button>元素的onclick事件属性被设置为一个JavaScript函数alert()，当用户点击按钮时，alert()函数就会被调用，弹出一个带有“Hello World!”消息的对话框。

观察者模式

事件流了页面接受事件的顺序。事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。当事件发生时，它首先进入捕获阶段，然后进入目标阶段，最后进入冒泡阶段。在每个阶段，事件都会触发相应的事件处理程序。

<div id="container">
  <button id="button">点击我</button>
</div>

document.getElementById('container').addEventListener('click', function(event) {
  console.log('Container clicked');
});

document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button clicked');
});

在这个例子中，当用户点击按钮时，#container和#button元素都会触发click事件。首先，#container元素的事件处理程序会被调用，输出“Container clicked”消息。然后，#button元素的事件处理程序会被调用，输出“Button clicked”消息。这是因为事件从父元素（#container）向下传播到子元素（#button）。