"加载与卸载事件是网页中常见的事件处理,它们分别在网页加载完成和卸载时触发。加载事件(onload)允许开发者在网页完全加载后执行某些操作,例如设置样式或功能。而卸载事件(onunload)通常用于在用户离开页面时执行清理工作,例如显示告别信息。在示例中,展示了如何利用JavaScript实现图片大小的动态调整,并在页面关闭时提供提示。
事件处理是JavaScript中的核心特性,它使得用户与网页之间的交互成为可能。事件可以是用户的任何动作,如点击、滚动、键盘输入等。事件处理程序则是一段响应特定事件的代码,它会被浏览器自动调用。有多种方式来指定事件处理程序:
1. HTML内联方式:直接在HTML元素中通过属性指定事件和处理程序,如`<body onLoad="…" onUnload="…">`。
2. JavaScript内部指定:在`<script>`标签中为特定对象和事件编写处理程序,例如`<script language="JavaScript" for="window" event="onload">...</script>`。
学习事件处理涉及以下几个主要类别:
- 鼠标键盘事件:包括click(点击)、mouseover(鼠标悬停)、mouseout(鼠标离开)、keydown(按键按下)和keyup(按键释放)等。
- 页面事件:如load(加载)、unload(卸载)、beforeunload(卸载前)、resize(窗口大小改变)和scroll(滚动)。
- 表单事件:如submit(提交)、focus(获取焦点)、blur(失去焦点)、change(值改变)和input(输入)等。
- 滚动字幕事件:虽然不是所有浏览器都支持,但在某些特定场景下用于处理滚动文本。
- 编辑事件:如select(选择文本)、cut(剪切)、copy(复制)和paste(粘贴)等。
事件处理程序的调用方式多样,可以根据实际需求选择最合适的。在JavaScript中,事件处理程序可以是自定义函数,也可以是直接的JavaScript语句,如果包含多条语句,需要用分号隔开。例如,通过创建一个函数来处理图片的缩放效果:
```javascript
function handleImageHover(img) {
img.addEventListener('mouseover', function() {
this.style.width = '原始宽度';
});
img.addEventListener('mouseout', function() {
this.style.width = '指定的缩小宽度';
});
}
// 在页面加载时应用到所有需要的图片
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
handleImageHover(images[i]);
}
};
```
这个例子展示了如何使用事件监听器来添加事件处理程序,而不是使用HTML内联事件。这种方法更有利于代码组织和维护,同时避免了内联JavaScript可能导致的安全问题和性能影响。在页面关闭时,可以使用`window.onunload`事件来触发一个提示,如示例所示,向用户显示告别信息。"