JavaScript 常用事件详解

笔记2024-02-1712 人已阅来源:网络

JavaScript 提供了许多用于处理用户交互和页面事件的内置事件,以下是一些常用的JavaScript事件详解:

  1. 鼠标事件
    • onclick:当用户点击元素时触发。
    • ondblclick:当用户双击元素时触发。
    • onmousedown:当用户按下鼠标按钮时触发。
    • onmouseup:当用户释放鼠标按钮时触发。
    • onmousemove:当鼠标指针在元素上移动时连续触发。
    • onmouseenter(IE专有,非标准)/ mouseover:当鼠标进入元素区域时触发。
    • onmouseleave(IE专有,非标准)/ mouseout:当鼠标离开元素区域时触发。
    • oncontextmenu:当用户在元素上右击弹出上下文菜单时触发。
  2. 键盘事件
    • onkeydown:当用户按下键盘上的任意键时触发。
    • onkeyup:当用户释放键盘上的键时触发。
    • onkeypress:当用户按下并释放一个字符键时触发(对于特殊键可能不触发)。
  3. 触摸事件(移动设备常用):

    • ontouchstart:当用户开始触摸屏幕(触摸动作开始)时触发。
    • ontouchmove:当手指在屏幕上移动时触发。
    • ontouchend:当用户结束触摸屏幕(触摸动作结束)时触发。
    • ontouchcancel:当触摸事件被取消时触发(例如,系统中断触摸操作)。
  4. 表单事件
    • onfocus:元素获得焦点时触发(例如,文本框被点击)。
    • onblur:元素失去焦点时触发。
    • onchange:表单元素的值发生变化且失去焦点时触发。
    • oninput:元素值发生变化时立即触发,不论是否失去焦点。
    • onsubmit:表单提交时触发。
    • onreset:表单重置时触发。
  5. 窗口和页面事件
    • onload:页面文档(包括图片、样式表等所有资源)完全加载完成后触发。
    • onunload(废弃,推荐使用beforeunload或pagehide):页面卸载或用户离开页面时触发。
    • onresize:窗口尺寸发生变化时触发。
    • onscroll:文档视口或元素滚动时触发。
  6. 其他事件
    • DOMContentLoaded:文档结构加载完成(不等待样式表、图片等外部资源)后触发。
    • onerror:当页面加载资源时遇到错误时触发。
    • onhashchange:浏览器URL的哈希值发生变化时触发。

在JavaScript中,这些事件可以通过元素对象的.addEventListener.attachEvent(旧版IE)方法来监听和处理。例如:

element.addEventListener('click', function(event) {
  console.log('Element was clicked!');
}, false);

对于不支持addEventListener的老版本IE浏览器,可以使用attachEvent方法:

element.addEventListener('click', function(event) {
  console.log('Element was clicked!');
}, false);

注意,不同浏览器对某些事件的支持可能略有差异,使用时需考虑到兼容性问题。同时,现代JavaScript编程中常常使用事件委托、事件捕获和冒泡等概念,以更高效的方式处理大量元素的事件。