央企直招出国劳务网站,网站建设价值,家用电脑做网站能备案,wordpress悬浮导航JavaScript青少年简明教程#xff1a;事件及处理
在编程语言中#xff0c;事件#xff08;Event#xff09;是一种使程序能够响应特定操作或条件发生的机制。它允许程序中的不同部分#xff08;比如对象、类或模块#xff09;在发生某些特定情况时互相通信或协作。事件驱…JavaScript青少年简明教程事件及处理
在编程语言中事件Event是一种使程序能够响应特定操作或条件发生的机制。它允许程序中的不同部分比如对象、类或模块在发生某些特定情况时互相通信或协作。事件驱动编程Event-driven programming是一种基于事件的编程范式它依赖于事件和回调函数或监听器来处理或响应这些事件。
事件的基本组成部分
事件源Event Source产生事件的实体或对象。例如在网页上一个按钮点击事件的事件源就是该按钮。事件Event具体发生的情况或动作通常包含有关该动作的一些信息如发生的时间、位置等。在事件处理中事件本身通常被封装成一个对象这个对象包含了事件的详细信息。事件处理器Event Handler是当事件发生时被调用的函数或方法。它定义了当事件发生时应该执行的动作。 网页上发生的事情或用户行为如点击按钮、输入文本、移动鼠标等都是事件。JavaScript能够监听这些事件并根据事件执行相应的代码从而使网页能够对用户操作作出反应。
常见的JavaScript事件类型
鼠标事件如click点击、dblclick双击、mouseover鼠标悬停、mouseout鼠标移出、mousedown鼠标按下、mouseup鼠标松开等。键盘事件如keydown键盘按键按下、keyup键盘按键释放、keypress字符键被按下。表单事件如submit表单提交、change表单字段变化、focus获得焦点、blur失去焦点。窗口事件如load页面加载完成、resize窗口大小改变、scroll滚动窗口。触摸事件针对移动设备如touchstart、touchmove、touchend、touchcancel。 事件处理方式
JavaScript处理事件的方式主要有两种通过HTML属性添加事件处理程序和使用JavaScript添加事件监听器。
1) HTML属性 在HTML元素中直接使用事件属性添加事件处理代码如
button οnclickalert(Hello World)点击我/button
这种方法简单直接它使HTML和JavaScript的代码耦合度增高不易于维护。
2) JavaScript事件监听器Event Listener 使用addEventListener方法可以在JavaScript代码中添加事件处理程序这样可以将行为JavaScript与结构HTML分离提高代码的可维护性。示例
document.getElementById(myButton).addEventListener(click, function() { alert(Hello World); });
这种方法更加灵活允许为一个事件添加多个监听器且可以更容易地控制监听器的移除。 事件传播
事件在DOM中的传播有两个阶段捕获阶段和冒泡阶段。
捕获阶段事件从文档根节点沿DOM树向下传递到事件目标的过程。冒泡阶段事件从事件目标沿DOM树向上回传到文档根节点的过程。
默认情况下事件处理程序只在冒泡阶段执行但可以通过addEventListener的第三个参数设置为true使处理程序在捕获阶段执行。 事件监听器
事件监听器Event Listener是 JavaScript 中处理用户交互和异步操作的重要机制。它们允许开发者响应用户的操作如点击、输入、鼠标移动等以及其他异步事件如网络请求、定时器等。事件监听器是实现动态和互动 Web 应用程序的关键工具。
addEventListener 方法是 JavaScript 中最常用的事件绑定方式。它允许你将事件监听器附加到 DOM 元素上并指定事件类型和回调函数。语法
元素对象.addEventListener(事件类型要执行的函数)
事件监听器三要素
事件目标(Event Target)哪个DOM元素对象触发了事件。
事件类型(Event Type)触发事件的方式也称为触发事件的事件名称比如鼠标单击click、鼠标经过mouseover等。
事件处理函数(Event Handler)实现要做什么事情的函数。这个函数包含了事件发生时要执行的操作。
注意事件类型要加引号函数是点击之后再去执行每次点击都会执行一次。
例如响应用户的点击按钮操作
button idmyButtonClick Me!/button
script// 首先定义事件处理函数function handleClick() {alert(按钮被点击);}// 为按钮添加事件监听器
document.getElementById(myButton).addEventListener(click, function);
/script移除事件监听器
当不再需要监听某个事件时应当移除对应的事件监听器以避免可能的内存泄漏和性能问题。
可以使用removeEventListener方法将其移除。
这个方法需要与addEventListener使用相同的参数包括事件类型、事件处理函数和用于指定事件是否在捕获阶段触发的选项可选。
// 当需要移除事件监听器时
document.getElementById(myButton).removeEventListener(click, function); 注意事项
1.确保函数相同removeEventListener需要引用相同的函数。如果你在addEventListener时使用了匿名函数那么你需要保持这个函数的引用以便后终使用removeEventListener。如果直接传递一个新的函数或匿名函数将无法正确移除监听器。
2.捕获与冒泡如果在添加事件监听器时指定了事件处理程序在捕获阶段执行即第三个参数为true则在移除时也需要指定相同的参数。
3.重复移除多次调用removeEventListener对同一个监听器没有副作用但只有第一次调用会实际移除监听器。 例、这个例子展示了几种不同的事件处理方式
使用HTML属性直接绑定事件如onclick, onmouseover
使用JavaScript的addEventListener方法添加事件监听器
源码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML事件处理示例/titlestylebody { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }.example { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; }#hoverDiv { background-color: lightblue; padding: 10px; }/style
/head
bodyh2HTML事件处理示例/h2div classexampleh31. 点击事件 (onclick)/h3button onclickshowMessage()点击我/button/divdiv classexampleh32. 鼠标悬停事件 (onmouseover/onmouseout)请留意颜色变化/h3div idhoverDiv onmouseoverthis.style.backgroundColoryellow onmouseoutthis.style.backgroundColorlightblue将鼠标悬停在此处/div/divdiv classexampleh33. 键盘事件 (onkeyup)/h3input typetext idkeyInput onkeyupdocument.getElementById(keyOutput).textContent this.valuep你输入的是: span idkeyOutput/span/p/divdiv classexampleh34. 表单提交事件 (onsubmit)/h3form onsubmitevent.preventDefault(); alert(表单已提交);input typetext placeholder输入些什么...button typesubmit提交/button/form/divscriptfunction showMessage() { alert(按钮被点击了——使用onclick属性响应!); } // 使用 addEventListener 添加点击事件监听器document.querySelector(button).addEventListener(click, function() {alert(按钮被点击了——使用 addEventListener方式响应!);});/script
/body
/html这个示例包含了几个常见的事件处理
1)点击事件 (onclick):
使用内联的onclick属性和addEventListener方法两种方式演示。
2)鼠标悬停事件 (onmouseover/onmouseout):
当鼠标悬停在div上时改变背景颜色。
3)键盘事件 (onkeyup):
在输入框中输入文字时,实时显示输入的内容。
4)表单提交事件 (onsubmit):
阻止表单的默认提交行为,而是显示一个提交成功的提示。 进一步学习可参考
JS的事件介绍 https://blog.csdn.net/cnds123/article/details/127103830
JS捕获页面按键事件 https://blog.csdn.net/cnds123/article/details/122136978
JavaScript事件示例 https://blog.csdn.net/cnds123/article/details/120530675
