JavaScript 用例子解释EventHandler

JavaScript事件，你对它们熟悉吗？当我们与网站互动时发生的任何动作都是一个JavaScript事件。这些动作包括在键盘上敲击一个键，在选择框中选择一个选项，移动鼠标指针，等等。一个JavaScript事件处理程序是一个函数，当这些事件中的任何一个发生时，它被调用。

在这篇文章中，我们将谈论事件处理程序，它们的实现，以及它的组成部分，并有各种编码例子。

Events

你可以创建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>

事件组件

当一个事件发生时，事件对象会自动生成。为了获得更多关于该事件的细节，你可以查询与事件对象相关的一些属性–

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提供事件类型的字符串表示（按键、点击等）。
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 “事件相关的事件顺序

抠门
按键压
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>

鼠标移动和鼠标退出事件

当鼠标光标移出一个元素时，”onmouseout “事件就会触发。

Onmouseout经常与 “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 ” 事件处理程序对其进行验证，该处理程序仅与表单对象兼容。使用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>