数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究JavaScript 中的 EventHandler 及示例说明
JavaScript 事件，你熟悉它们吗？我们在与网站交互时发生的任何操作都是 JavaScript 事件。这些操作包括按下键盘上的键、在选择框中选择选项、移动鼠标光标等等。JavaScript 事件处理程序是一个在任何这些事件触发时调用的函数。
在本文中，我们将讨论事件处理程序、它们的实现及其组件，并提供各种代码示例。
事件
您可以创建响应特定条件的 JavaScript 代码，使用事件来实现。
一些常见的事件包括：
按下按键
网页加载完成
点击网页上的链接
什么是事件处理程序？
JavaScript 提供了事件处理程序，以便在发生某些事件时执行我们的代码段。JavaScript 中的每个事件处理程序都以单词“on”开头，并处理特定类型的事件。
实现事件处理程序
要实现事件处理程序，我们通常在要操作的对象的 HTML 元素内包含事件处理程序名称，后跟短语“SomeJSCode”，其中 SomeJSCode 表示我们在事件触发时要执行的 JavaScript 代码。
示例
<html> <body> <input type="submit" name="IamHere" value="Hey there!" onclick="alert('Welcome!')"/> </body> </html>
如果我们希望我们的标记（HTML）符合 XHTML 规范，我们应该在 HTML 文本中使用小写字母而不是像原始 JS 事件处理程序（“onClick”）那样的大写字母。在 XHTML 中，每个元素和属性的名称都必须小写。
事件管理
Javascript 处理事件的多种方法 有三种管理事件的方法，或者可以说是三种不同类型的事件处理程序。
使用 addEventListener 处理
使用对象方法处理
使用 HTML 内联属性处理
使用 addEventListener
处理事件的理想方法是使用 addEventListener，因为 removeEventListener 允许您删除相关的处理程序。
上面提到的侦听器有两种类型。
捕获 - 在这里，元素的父元素优先于发生事件的元素。
冒泡 - 在这种情况下，发生事件的实际元素优先于其父元素。
语法
document.addEventListener("click me", function(){
document.getElementById("example").innerHTML = "Hello Tutorials Point!!";
});
示例
让我们来看一个 addEventListner 的示例。
<html> <body> <p>Click anywhere on the page to print "Hello tutorials point!".</p> <p id="eg"></p> <script> document.addEventListener("click", myFunction); function myFunction() { document.getElementById("eg").innerHTML = "Hello tutorials point!"; } </script> </body> </html>
使用对象方法
DOM 中的每个元素都有一个可用于处理事件的方法，例如 onclick、ondrag 和 onkeypress。此方法允许您传递一个接受事件对象作为参数的函数。
语法
objectName.methodName()
示例
让我们来看一个访问对象方法的示例。
<html> <body> <h2>JS Objects</h2> <p id="example"></p> <script> const person = { fName: "Tutorials", lName: "Point", id: 1111, fn: function() { return this.fName + " " + this.lName; } }; document.getElementById("example").innerHTML = person.fn(); </script> </body> </html>
使用 HTML 内联属性
由于 HTML 语法，也可以使用 HTML 内联属性处理事件。
这些属性接受函数调用作为值。
事件处理程序的回调参数是一个事件对象，其中包含有关事件的信息。
语法
<html_element event_handler="event_function()">Text</html_element>
示例
让我们来看一个示例。
<html> <body> <h1>The Window Object</h1> <h2>The alert() Method</h2> <p>Click the button to display an alert box.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { alert("Hello! I am an alert box!"); } </script> </body> </html>
Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.
事件组件
当事件发生时，会自动生成 Event 对象。要获取有关事件的更多详细信息，您可以查询与 Event 对象关联的许多属性：
Event.data - onDragDrop 事件使用此属性。以数组形式返回已删除对象的 URL 列表。
Event.height - Event.height 包含存储在 event.height 变量中的与事件相关的对象的框架高度。
Event.modifiers - 它返回一个字符串，其中包含在按键或鼠标移动期间按下的修饰键列表。Control_mask、Alt_mask、Meta_mask 和 Shift_mask 是修饰键的设置。
Event.pageX 和 Event.pageY - 当事件触发时，这些属性包含相对于页面的指针的 (X,Y) 坐标。
Event.screenX 和 Event.screenY - 这些属性存储事件发生时指针在屏幕上的 (X,Y) 像素坐标。
Event.target - Event.target 返回一个字符串，标识启动事件的对象。
Event.type - Event.type 提供事件类型（keypress、click 等）的字符串表示。
Event.which - 此事件组件返回一个数字，表示鼠标按钮。左键单击 = 1，右键单击 = 2，中键单击 = 3
Event.width - 此事件组件包含与发生的事件相关的框架宽度的存储属性。
Event.x 和 Event.y - 这些属性存储相对于与事件关联的图层的游标的 (X,Y) 像素坐标。
一些常见的事件处理程序
让我们仔细研究一些最常用的事件处理程序，并考虑它们的潜在应用。
onChange 事件
onChange 常用于在用户更改字段中的值时执行操作、验证表单字段或同时执行这两项操作。当用户更新字段然后单击屏幕上的其他位置或按下 TAB 键时，将激活事件处理程序（即对象失去焦点）。
示例
<html> <body> <p>Select a state name from the list.</p> <select id="selectMe" onchange="myFn()"> <option value="Bihar">Bihar</option> <option value="UP">UP</option> <option value="Delhi">Delhi</option> <option value="Punjab">Punjab</option> </select> <p>On selecting a new state name, a function is triggered which have O/P value as selected state name.</p> <p id="example"></p> <script> function myFn() { var x = document.getElementById("selectMe").value; document.getElementById("example").innerHTML = "Choosen state name: " + x; } </script> </body> </html>
onClick 事件
当用户用鼠标单击目标对象时，将激活 onClick 处理程序。这是创建基于 JavaScript 的动态网站的好方法，因为我们可以在各种项目上使用它，例如按钮、复选框和链接。
示例
<!DOCTYPE html> <html> <body> <h2>onclick Event</h2> <button onclick="myFn()">Click me</button> <p id="example"></p> <script> function myFn() { document.getElementById("example").innerHTML = "You are at tutorials point"; } </script> </body> </html>
onFocus 事件
当给定对象获得焦点时，onFocus 将启动。这通常发生在用户使用鼠标按钮单击对象或使用 TAB 键将光标移动到对象上时。onFocus 可用于大多数表单组件。
示例
<html> <body> <h2>The focus Event</h2> Type something to observe onFocus event: <input type="text" onfocus="myFn(this)"> <script> function myFn(m) { m.style.background = "red"; } </script> </body> </html>
onKeyPress 事件
当用户按下按键（在键盘上）时，“onkeypress”事件触发。
以下是与“onkeypress”事件相关的事件顺序：
onkeydown
onkeypress
onkeyup
示例
<html> <body> <p>On KeyPress event</p> <input type="text" onkeypress="myFn()"> <script> function myFn() { alert("A key is pressed"); } </script> </body> </html>
onLoad
页面完全加载后，将调用 onLoad 处理程序。令人讨厌的弹出式广告窗口以及在整个页面加载完成后启动其他操作（如动画或计时器）是 onLoad 函数的常见应用。
示例
<html> <body onload="myFn()"> <h1>You are at the tutorials point!!</h1> <script> function myFn() { alert("Webpage Loaded!"); } </script> </body> </html>
mouseover 和 mouseout 事件
当鼠标光标移出元素时，“onmouseout”事件触发。
Onmouseout 常与“onmouseover”事件结合使用，“onmouseover”事件在指针移动到元素上时发生。
示例
<html> <body> <h1 id="example" onmouseover="mouseOverme()" onmouseout="mouseOutOfMe()">Mouse over and out</h1> <script> function mouseOverme() { document.getElementById("example").style.color = "red"; } function mouseOutOfMe() { document.getElementById("example").style.color = "blue"; } </script> </body> </html>
onSubmit 事件
在将表单提交到服务器之前，通常使用“onSubmit”事件处理程序进行验证，该处理程序仅与 Form 对象兼容。我们有一篇关于使用 JavaScript 进行表单验证的完整教程。
示例
<html> <head> <title>Welcome To My Domain</title> </head> <body> <form onsubmit="alert('Form Submitted!!')"> UserName:<input type="text" name="user"><br/> College:<input type="text" name="colg"><br/> City:<input type="text" name="city"><br/> Mobile:<input type="text" name="mob"><br/> <input type="submit" value="SUBMIT"> </form> </body> </html>
结论
在本文中，我们学习了事件处理、它们的实现、事件管理及其组件，并提供了几个事件处理程序的各种代码示例。
2K+ 次浏览
