JavaScript 事件

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

JavaScript事件类型

JavaScript 支持多种事件类型,这些事件允许开发者对用户的操作或网页中的某些行为作出响应。以下是一些常见的JavaScript事件类型:

  1. 鼠标事件:

    • click:当用户单击元素时触发。
    • dblclick:当用户双击元素时触发。
    • mousedown:当用户按下鼠标按钮时触发。
    • mouseup:当用户释放鼠标按钮时触发。
    • mouseover:当鼠标指针移到一个元素上时触发。
    • mouseout:当鼠标指针移出一个元素时触发。
    • mousemove:当鼠标指针在元素内部移动时触发。
    • contextmenu:当用户右键点击(触发上下文菜单)时触发。
  2. 键盘事件:

    • keydown:当用户按下键盘上的任意键时触发。
    • keyup:当用户释放键盘上的键时触发。
    • keypress:当用户按下一个字符键时重复触发(已被许多现代浏览器废弃,建议使用keydown)。
  3. 表单事件:

    • submit:当表单提交时触发。
    • reset:当表单重置时触发。
    • focus:当元素获得焦点时触发。
    • blur:当元素失去焦点时触发。
    • change:当表单元素的内容改变且失去焦点时触发,适用于<input>、<select>和<textarea>等。
    • input:当表单元素的值发生变化时立即触发,不需失去焦点。
  4. 窗口/文档事件:

    • load:当页面完全加载完毕(包括图片、脚本等)时触发,通常用于window或body元素。
    • unload:当页面卸载时触发,已被beforeunload替代。
    • beforeunload:在页面卸载前触发,可以提示用户确认是否离开页面。
    • DOMContentLoaded:当初始HTML文档被完全加载和解析完成时,不等待样式表、图片和子框架完成加载,就会触发此事件。
    • resize:当浏览器窗口被调整大小时触发。
    • scroll:当元素滚动时触发。
  5. 触摸事件(针对触摸屏设备):

    • touchstart:当手指触碰屏幕时触发。
    • touchmove:当手指在屏幕上滑动时连续触发。
    • touchend:当手指从屏幕上离开时触发。
    • touchcancel:当系统取消触摸事件时触发,比如电话呼入中断了当前操作。
  6. 其他事件:

    • copy、cut、paste:文本复制、剪切、粘贴时触发。
    • dragstart、drag、dragend:拖拽操作的不同阶段触发。
    • error:当在页面元素中发生错误时触发,如图片加载失败。
    • animationstart、animationend、animationiteration:CSS动画开始、结束、重复时触发。
    • transitionend:CSS过渡效果完成时触发。

了解并熟练运用这些事件类型,可以帮助开发者创建更加动态和交互丰富的Web应用。

 

JavaScript 事件处理程序

JavaScript 事件处理程序是一种机制,允许网页中的元素(如按钮、链接、输入框等)在特定的用户操作(如点击、鼠标悬停、键盘按键等)发生时执行特定的代码。这使得网页能够具有交互性。在JavaScript中,有多种方式可以添加和管理事件处理程序:

  1. 内联处理程序:直接在HTML元素的标签中使用onclick、onmouseover等属性来指定事件触发时执行的JavaScript代码。这种方式虽然简单,但不推荐使用,因为它将内容(HTML)与行为(JavaScript)混在一起,违反了Web开发的最佳实践。

    <button onclick="alert('Hello, World!')">点击我</button>
  2. 传统DOM0级事件处理:通过将一个函数赋值给DOM元素的事件属性来添加事件监听器。这种方式的优缺点是兼容性好,但同一个元素的相同类型事件只能绑定一个处理函数(会被覆盖)。

    var button = document.getElementById('myButton');
    button.onclick = function() {
        alert('Button clicked!');
    };
  3. DOM2级事件处理:使用addEventListener方法为元素添加事件监听器,可以为同一元素的同一事件添加多个监听器,且支持事件捕获和冒泡阶段。这是目前推荐的做法。

    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        alert('Button clicked with addEventListener!');
    });
  4. DOM0级removeEventListener:与addEventListener相对应,可以使用removeEventListener移除通过addEventListener添加的事件监听器。需要注意的是,移除时传入的函数必须是同一个函数实例。

     
  5. IE特有的attachEvent和detachEvent:早期IE浏览器(IE8及以下)不支持DOM2级事件处理,而是使用自己的方法attachEvent和detachEvent。现代开发中已很少考虑这种兼容性问题,因为这些浏览器已经非常过时。

选择合适的事件处理方式对于编写高效、可维护的JavaScript代码至关重要。通常情况下,推荐使用DOM2级事件处理(addEventListener和removeEventListener),因为它提供了更好的灵活性和控制力。

function handleClick() {
    alert('Button clicked!');
}

button.addEventListener('click', handleClick);

// 稍后移除事件监听器
button.removeEventListener('click', handleClick);

修改时间 2024-06-06

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
Node.js stream 流
WordPress 数据库表结构
WordPress 设置菜单
JavaScript screen对象
WordPress 上传附件
Photoshop 使用插件支持 webp 格式的文件
JavaScript 操作表单
JavaScript API 接口