数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究JavaScript 中的事件触发
JavaScript 中的事件是浏览器或用户执行的操作。一些事件示例如下：
网页加载时
按键按下时
鼠标悬停时
点击时，等等。
当嵌入在 HTML 中的 JavaScript 代码运行时，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 部分是一个按钮和一个段落（<p>）。这里，首先我们使用document.getElementById()函数将按钮的引用存储在名为“btn”的变量中。
然后，我们有一个带有“click”关键字的事件监听器，它将捕获发生在按钮上的任何点击事件。每当点击按钮时，事件监听器就会被激活，并返回一个 1 到 99 之间的随机数，并在 id 为“num”的段落 <p> 中显示。
使用 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 文件，尝试将 click 关键字替换为下面列出的各种其他操作，并相应地进行尝试。
使用 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>
使用 focus 和 blur 触发事件
当按钮获得焦点和失去焦点时，数字会发生变化；尝试点击 Tab 键将焦点放在按钮上，然后再次点击 Tab 键将焦点移开。当获得焦点时，它们通常用于显示有关填写表单字段的信息，或者如果填写了无效值则显示错误消息。
语法
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>
在这里，我们只是将关键字从 click 更改为 focus 或 dblclick。因此，建议找到此类操作关键字，并尝试使用上面的示例代码。
一些这样的关键字有 mouseover、mouseout、scroll 等。
其他触发事件的方法
虽然我们有强大的可扩展方法来处理事件，即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 代码。这里没有使用 script 标签，这将使代码变得混乱，如果使用此方法处理大型项目，则难以处理。
示例
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('tut').innerHTML=Date()">click me to know time.</button>
<p id="tut"></p>
</body>
</html>
结论
在本教程中，我们学习了触发事件的各种方法。我们从称为 addEventListeners 的方法开始，最后总结了许多触发事件的方法以及各种运行代码示例。
906 次浏览
