web前端侦听端口_Web设计人员JavaScript事件侦听器简介

最新推荐文章于 2023-03-07 09:35:59 发布

翻译最新推荐文章于 2023-03-07 09:35:59 发布 · 1.4k 阅读

文章标签：

#js #java #css #javascript #html #ViewUI

本文介绍了JavaScript事件监听器的基本概念，包括HTML全局onevent属性、jQuery事件方法和本机JavaScript的addEventListener。通过示例，详细阐述了如何创建和使用事件监听器，以及如何结合CSS和条件语句实现更复杂的交互功能，帮助初学者掌握前端开发中的这一重要技能。

web前端侦听端口

如果您是尚未踏入JavaScript世界的Web设计师，或者您只是刚刚开始进行前端开发，那么本教程是理想的入门方法。它将非常容易地解释几个非常有用的概念，您将可以立即使用这些概念，并使您摆脱JavaScript的起点。

什么是事件监听器？

事件侦听器是Web设计中最常用JavaScript结构之一。它们使我们可以通过“侦听”页面上发生的不同事件（例如，用户单击按钮，按下键或加载元素时）来向HTML元素添加交互功能。

当事件发生时，我们可以执行一些操作。

你可以“听出了”最常见的事件是load ， click ， touchstart ， mouseover ， keydown 。您可以在MDN的事件参考指南中查看所有DOM事件。

通过遵循本指南，您将学习如何以三种不同方式创建JavaScript事件侦听器：

HTML的全局事件属性
jQuery的事件方法
DOM API的addEventListener()方法

最后，我们将研究如何使用click事件监听器创建基本的显示隐藏功能。

1.如何在HTML中使用Global Onevent属性

如果只想向特定HTML元素添加单行脚本，则可以使用HTML规范定义的HTML全局onevent属性，例如onclick ， onload和onmouseover 。

这些属性可以直接添加到页面上存在的任何HTML元素中，但是，它们对浏览器的支持却千差万别。例如，从IE9开始，所有现代浏览器都支持 onclick ，而对其他onevent属性（例如ondrag则更为零散。您可以通过在CanIUse的搜索框中键入“ globaleventhandlers”来查看浏览器对全局onevent属性的支持。

onevent属性的语法很简单，由于它们是全局属性，因此可以在任何元素上使用它们，例如：

<button onclick="alert('Hi');">Click me</button>

在这里， onclick事件侦听器侦听一个特定按钮上的click事件。当事件触发时（用户单击此按钮），将执行alert()回调函数。

如果要向页面上的每个按钮添加相同的警报功能，则应在单独的脚本中添加click事件监听器，而不要使用onclick属性。

2.如何在jQuery中创建事件监听器

jQuery有几个事件方法是听各种不同的活动，如.click() .hover() .mouseover() .ready() .load()等等。例如，这是上面的事件侦听器在jQuery中的外观：

$("button").click(function() {
    alert('Hi jQuery');
});

此事件侦听器将“ Hi jQuery”警报消息添加到页面上的所有<button>元素。要仅定位一个特定的按钮，我们应该为其添加一个唯一的id ，并使用click()事件方法将该id定位为目标，例如：

$("#unique-button").click(function() {
    alert('Hi jQuery');
});

由于jQuery的事件方法与HTML的全局onevent属性针对相同的UI事件，因此两者之间存在许多重叠之处。但是，由于jQuery也是在本机JavaScript之上运行的库，因此它具有一些事件方法，例如.hover() ，这些方法未包含在DOM API中，因此我们无法通过onevent来监听它们属性或本机的addEventListener()方法。

.on（）方法

jQuery的事件侦听器比其他两种技术有另一个优势： .on()方法。它允许我们将多个事件附加到同一回调函数。例如，我们可以同时向click和mouseover事件添加相同的警报功能：

$("button").on("click mouseover", function() {
    alert("Hi jQuery events"); 
});

3.如何在JavaScript中创建事件监听器

使用本机JavaScript，我们可以侦听MDN的事件参考中定义的所有事件，包括触摸事件。因为这不需要使用第三方库，所以它是向HTML元素添加交互式功能的最性能友好的解决方案。

我们可以使用每个现代浏览器都内置的addEventListener()方法在JavaScript中创建事件监听器。

这是使用纯JavaScript和addEventListener()方法的警报按钮示例的外观：

/* Selecting DOM element */
const button = document.querySelector("button");

/* Callback function */
function alertButton() {
    alert('Hi native JavaScript');
}

/* Event listener */
button.addEventListener("click", alertButton, false);

它在起作用：

在本机JavaScript中，我们需要首先选择要将事件侦听器添加到的DOM元素。 querySelector()方法选择与指定选择器匹配的第一个元素。因此，在我们的示例中，它选择了页面上的第一个<button>元素。

自定义alertButton()函数是当用户单击按钮时将调用的回调函数。

最后，我们添加事件监听器。我们始终必须使用点表示法将addEventListener()方法附加到预选的DOM元素上。在参数中，首先定义要监听的事件（ "click" ），然后定义回调函数的名称（ alertButton ），最后定义useCapture参数的值（我们使用默认的false值，因为我们不这样做）不想捕获事件- 这是有关如何使用useCapture 的简单说明。

如何向所有按钮添加功能

因此，上面的代码将警报功能添加到页面上的第一个按钮。但是，我们如何为所有按钮添加相同的功能？为此，我们需要使用querySelectorAll()方法，循环遍历元素，并向每个按钮添加一个事件侦听器：

/* Selecting DOM nodelist */
const buttons = document.querySelectorAll("button");

/* Callback function */
function alertButton() {
    alert('Hi native JavaScript');
}

/* Event listeners */
for (let button of buttons) {
      button.addEventListener("click", alertButton, false);    
}

由于querySelectorAll()返回一个NodeList而不是单个元素，因此我们需要遍历节点以向每个按钮添加click事件侦听器。例如，如果我们在页面上有三个按钮，则上面的代码将创建三个click事件监听器。

请注意，您只能使用addEventListener()监听一个事件。因此，如果您希望自定义alertButton()函数在其他事件类型（例如mouseover alertButton()上触发，则需要创建第二个事件侦听器规则：

/* Event listeners */
for (let button of buttons) {
      button.addEventListener("click", alertButton, false);
      button.addEventListener("mouseover", alertButton, false);    
}

4.如何将事件监听器与CSS和条件组合

关于事件侦听器，最好的事情是可以将它们与CSS和if-else条件语句结合使用。这样，我们可以使用CSS和/或JavaScript定位同一元素的不同状态。

例如，这是一个非常简单的示例；隐藏功能。 HTML仅包含一个按钮和一个部分。我们将使用JavaScript事件监听器将该部分绑定到按钮。该按钮将负责显示和隐藏其下面的部分：

<button class="reveal-button">Click me</button>
<section class="hidden-section">Lorem ipsum dolor sit amet...</section>

在JavaScript中，我们首先使用querySelector()方法为两个HTML元素创建两个常量（ revealButton和hiddenSection ）。

然后，在revealSection()回调函数中，我们使用DOM API中定义的classList属性检查隐藏部分是否具有reveal类。如果隐藏部分具有此类，则使用DOM API的remove()方法将其remove()如果没有，则使用DOM API的add()方法将其add() 。最后，我们为click事件创建一个事件侦听器。

/* Selecting DOM elements */
const revealButton = document.querySelector(".reveal-button");
const hiddenSection = document.querySelector(".hidden-section");

/* Callback function */
function revealSection() {
    if (hiddenSection.classList.contains("reveal")) {
        hiddenSection.classList.remove("reveal");
    } else {
        hiddenSection.classList.add("reveal");
    }
}

/* Event listener */
revealButton.addEventListener("click", revealSection, false);

现在，JavaScript根据隐藏部分的当前状态添加或删除.reveal类。但是，我们仍然必须使用CSS在视觉上隐藏或显示元素：

.hidden-section {
    display: none;
}
.hidden-section.reveal {
    display: block;
}

就这样！当用户第一次单击该按钮时，将显示隐藏的部分，而当他们第二次单击该按钮时，它将再次被隐藏。您可以在下面的Codepen演示中测试功能：

这种基本的隐藏隐藏功能可用于许多不同的事情，例如，用于在小屏幕上切换菜单，创建选项卡式部分，显示错误消息等。

您现在可以理解JavaScript事件监听器！

在本指南中，我们研究了由用户启动的事件（ click和mouseover ），以及如何为他们创建事件监听器。

找到正确的事件类型需要进行可靠的测试，因为有些事件彼此相似，但并不完全相同，例如keydown和keypress 。另外，如果页面上有多个事件侦听器，则它们也可以彼此交互。

请注意，您应该始终测试事件侦听器在不同设备上的工作方式（这对于触摸事件尤为重要）。最后，每个事件侦听器都应附加到最有意义的元素上，理想情况下，代码中不应有任何不必要的事件侦听器。

继续建造！

翻译自: https://webdesign.tutsplus.com/tutorials/introduction-to-javascript-event-listeners--cms-35236

web前端侦听端口