JavaScript 事件触发

JavaScript中的事件是由浏览器或用户执行的动作。事件的一些例子是–

网页加载时
按键时
On hover
关于点击，等等。

当javascript代码嵌入到HTML中运行时，js对这些事件作出反应，并允许代码运行。每当这些JavaScript代码被执行时，我们称其为发射一个事件。

示例

让我们看一个简单的例子来理解事件发射的整个概念，从头到尾。

<html>
<body>
   <button id="dmrc">Click me!! I change number.</button>
   <p id="num"></p>
   <script>
      const btn = document.getElementById("dmrc");
      btn.addEventListener('click', () => {
         document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
      });
   </script>
</body>
</html>

在上面的例子中，HTML部分是一个按钮和段落(

).在这里，首先我们使用document.getElementById()函数将按钮的引用存储在一个叫做 “btn “的变量中。

然后，我们有一个带有 “click “关键字的事件监听器，它将捕捉发生在按钮上的任何点击事件。每当按钮被点击时，事件监听器就会被激活，并返回一个从1到99的随机数字，显示在段落中

显示在id=”num “的段落中。

使用addEventListener发射事件

我们要使用的方法是addEventListener()。基本上，addEventListener()是一个需要两个参数的函数。首先是事件名称，其次是处理函数。

语法

addEventListener(EventName,EventHandlerFunction());

示例

我们在addEventListener()函数中指定了两个参数：我们想要注册这个处理程序的事件名称和包含我们想要响应它而运行的处理程序函数的代码。

<html>
<body>
   <button id="dmrc">Click me!! I change number.</button>
   <p id="num"></p>
   <script>
      const btn = document.getElementById("dmrc");
      function changeNum(){
         document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
      }
      btn.addEventListener('click', changeNum);
   </script>
</body>
</html>

这段代码和上面的代码的不同之处在于，我们是用一个单独的名字来定义处理函数。以不同的方式使用这些函数有无穷的可能性，建议你一定要玩转这些函数和方法。

触发事件的各种方式

让我们通过应用各种发射事件和处理函数对我们的按钮进行实验。

建议制作一个.HTML文件，并尝试用下面列出的各种其他动作改变点击关键词，并进行相应的操作。

使用dblclick来触发事件

在这里，事件将在鼠标双击时发生，而不是前面例子中的单击。

语法

addEventListener('dblclick', ()=>{ } );

示例

<html>
<body>
   <button id="dmrc">Double Click me!! I change number.</button>
   <p id="num"></p>
   <script>
      const btn = document.getElementById("dmrc");
      function changeNum(){
         document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
      }
      btn.addEventListener('dblclick', changeNum);
   </script>
</body>
</html>

使用焦点和模糊来触发事件

当按钮被聚焦和不被聚焦时，数字会发生变化；试着点击标签以聚焦在按钮上，再次点击标签以远离按钮。当聚焦时，它们经常被用来显示有关填写表单字段的信息，或者在填写了无效的值时显示错误信息。

语法

btn.addEventListener('focus', changeNum);
btn.addEventListener('blur', changeNum);

示例

<html>
<body>
   <button id="dmrc">Click me!! I change number.</button>
   <p id="num"></p>
   <script>
      const btn = document.getElementById("dmrc");
      function changeNum(){
         document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
      }
      btn.addEventListener('focus', changeNum);
      btn.addEventListener('blur', changeNum);
   </script>
</body>
</html>

在这里，我们只是把关键词从点击改为聚焦或双击。因此，建议找到这样的动作关键字，并在上面的示例代码中玩一玩。

其中的几个关键词是鼠标移动、鼠标退出、滚动等。

触发事件的其他方式

尽管我们有一个强大和可扩展的方法来处理事件，即addEventListener()，但有时我们可能需要使用其他方法来处理事件。事件处理属性和内联事件处理程序是另外两种我们可以处理事件的方式。

事件处理程序属性

像 “按钮 “这样的对象有类似on+eventName的属性。例如，onclick。这被称为事件处理程序属性。使用这种方法的缺点是，我们不能对一个对象使用多个动作事件。

示例

<html>
<body>
   <button id="dmrc">Click me!! I change number.</button>
   <p id="num"></p>
   <script>
      const btn = document.getElementById("dmrc");
      btn.onclick = () =>{
         document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
      }
   </script>
</body>
</html>

内联事件触发

这是最古老的、不推荐的处理事件的方法。当事件发生时，属性值就是你想要执行的JavaScript代码。在这里，没有使用脚本标签，如果用这种方法，会使代码变得混乱，难以处理大项目。

示例

<!DOCTYPE html>
<html>
<body>
   <button onclick="document.getElementById('tut').innerHTML=Date()">click me to know time.</button>
   <p id="tut"></p>
</body>
</html>