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

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属性的