在本文中, 我们将讨论事件处理程序, 事件监听器和事件对象. 我们还将介绍三种不同的处理事件的方法, 以及一些最常见的事件. 通过了解事件, 您将能够为用户提供更具交互性的 web 体验.
事件是发生在浏览器中的操作, 可以由用户或浏览器本身发起. 以下是一些发生在网站上的常见事件:
页面完成加载
用户单击一个按钮
用户将鼠标悬停在下拉列表中
用户提交表单
用户按下键盘上的键
通过对在事件上执行的 JavaScript 响应进行编码, 开发人员可以向用户显示消息, 验证数据, 对按钮单击做出反应以及执行许多其他操作.
事件处理程序和事件侦听器
当用户单击按钮或按下某个键时, 将触发一个事件. 这些分别称为单击事件或按键事件.
一个事件处理程序是运行在一个事件触发 JavaScript 函数.
一个事件侦听器附加一个响应界面的元素, 它允许特定元素等待和 "监听" 给定的事件触发.
将事件分配给元素有三种方法:
内联事件处理程序
事件处理程序属性
事件听众
我们将详细介绍这三种方法, 以确保您熟悉触发事件的每种方法, 然后讨论每种方法的优缺点.
内联事件处理程序属性
要开始学习事件处理程序, 我们首先考虑内联事件处理程序. 让我们从一个非常基本的例子开始, 它由一个按钮元素和一个 p 元素组成. 我们希望用户单击按钮来更改 p 的文本内容.
让我们从一个带有按钮的 html 页面开始. 我们将引用一个我们稍后会添加代码的 JavaScript 文件.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Events
- </title>
- </head>
- <body>
- <!-- Add button -->
- <button>
- Click me
- </button>
- <p>
- Try to change me.
- </p>
- </body>
- <!-- Reference JavaScript file -->
- <script src="js/events.js">
- </script>
- </HTML>
直接在按钮上, 我们将添加一个名为 onclick 的属性. 属性值将是我们创建的一个名为 changeText() 的函数.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Events
- </title>
- </head>
- <body>
- <button onclick="changeText()">
- Click me
- </button>
- <p>
- Try to change me.
- </p>
- </body>
- <script src="js/events.js">
- </script>
- </HTML>
让我们创建 events.JS 文件, 它位于这里的 JS / 目录中. 在其中, 我们将创建 changeText() 函数, 它将修改 p 元素的 textContent.
- // Function to modify the text content of the paragraph
- const changeText = () =>{
- const p = document.querySelector('p');
- p.textContent = "I changed because of an inline event handler.";
- }
首次加载 events.HTML, 您会看到如下所示的页面:
但是, 当您或其他用户单击按钮时, p 标记的文本将从 Try to change me 更改为. 我改变了, 因为内联事件处理程序.
内联事件处理程序是开始理解事件的一种直接方法, 但是通常不应该超出测试和教育目的而使用它们.
您可以将内联事件处理程序与 HTML 元素上的内联 CSS 样式进行比较. 维护单独的类样式表比在每个元素上创建内联样式更为实际, 就像维护完全通过单独的脚本文件处理的 JavaScript 而不是向每个元素添加处理程序一样.
事件处理程序属性
内联事件处理程序的下一步是事件处理程序属性. 这与内联处理程序非常相似, 只是我们在 JavaScript 中设置了元素的属性, 而不是 HTML 中的属性.
这里的设置是一样的, 只是我们不再在标记中包含 onclick="changeText()":
- ... <body>
- <button> Click me </button>
- <p>I will change.</p>
- </body>
- .../
我们的函数也将保持类似, 只是现在我们需要访问 JavaScript 中的 button 元素. 我们可以简单地访问 onclick, 就像访问 style 或 id 或任何其他元素属性一样, 然后分配函数引用.
- // Function to modify the text content of the paragraph
- const changeText = () =>{
- const p = document.querySelector('p');
- p.textContent = "I changed because of an event handler property.";
- }
- // Add event handler as a property of the button element
- const button = document.querySelector('button');
- button.onclick = changeText;
注意: 事件处理程序不遵循大多数 JavaScript 代码遵循的 camelCase 约定. 注意代码是 onclick, 而不是 onclick.
当你第一次载入网页时, 浏览器会显示以下内容:
现在, 当你点击这个按钮, 它会有一个类似的效果:
请注意, 当将函数引用传递给 onclick 属性时, 我们不包含括号, 因为我们当时没有调用函数, 而只是传递了对它的引用.
事件处理程序属性的可维护性略好于内联处理程序, 但它仍然存在一些相同的障碍. 例如, 尝试设置多个单独的 onclick 属性将导致覆盖除最后一个外的所有属性, 如下所示.
- const p = document.querySelector('p');
- const button = document.querySelector('button');
- const changeText = () =>{
- p.textContent = "Will I change?";
- }
- const alertText = () =>{
- alert('Will I alert?');
- }
- // Events can be overwritten
- button.onclick = changeText;
- button.onclick = alertText;
在上面的例子中, 单击按钮只会显示一个警告, 而不会更改 p 文本, 因为 alert() 代码是最后添加到属性的代码.
了解了内联事件处理程序和事件处理程序属性之后, 让我们转向事件侦听器.
事件监听器
JavaScript 事件处理程序的最新添加是事件侦听器. 事件侦听器监视元素上的事件. 我们将使用 addEventListener() 方法侦听事件, 而不是直接将事件分配给元素上的属性.
addEventListener() 接受两个强制参数 -- 要侦听的事件和侦听器回调函数.
事件监听器的 HTML 与前面的示例相同.
- ... <button> Click me </button>
- <p>I will change.</p> ...
我们仍然将使用与以前相同的 changeText() 函数. 我们将把 addEventListener() 方法附加到按钮上.
- // Function to modify the text content of the paragraph
- const changeText = () =>{
- const p = document.querySelector('p');
- p.textContent = "I changed because of an event listener.";
- }
- // Listen for click event
- const button = document.querySelector('button');
- button.addEventListener('click', changeText);
注意, 对于前两个方法, click 事件被称为 onclick, 但是对于事件监听器, 它被称为 click. 每个事件监听器都会从单词中删除这个词. 在下一节中, 我们将查看更多其他类型事件的示例.
当您用上面的 JavaScript 代码重新加载页面时, 您将收到以下输出:
初看起来, 事件监听器看起来与事件处理程序属性非常相似, 但它们有一些优点. 我们可以在同一个元素上设置多个事件侦听器, 如下例所示.
- const p = document.querySelector('p');
- const button = document.querySelector('button');
- const changeText = () =>{
- p.textContent = "Will I change?";
- }
- const alertText = () =>{
- alert('Will I alert?');
- }
- // Multiple listeners can be added to the same event and element
- button.addEventListener('click', changeText);
- button.addEventListener('click', alertText);
在本例中, 这两个事件都将触发, 一旦单击退出警告, 就向用户提供一个警告和修改后的文本.
通常, 将使用匿名函数而不是事件侦听器上的函数引用. 匿名函数是没有命名的函数.
- // An anonymous function on an event listener
- button.addEventListener('click', () =>{
- p.textContent = "Will I change?";
- });
还可以使用 removeEventListener() 函数从元素中删除一个或所有事件.
- // Remove alert function from button element
- button.removeEventListener('click', alertText);
此外, 您可以在文档和窗口对象上使用 addEventListener().
事件监听器是当前在 JavaScript 中处理事件的最常见和首选的方法.
常见的事件
我们已经了解了使用 click 事件的内联事件处理程序, 事件处理程序属性和事件侦听器, 但是 JavaScript 中还有更多的事件. 下面我们将讨论一些最常见的事件.
鼠标事件
鼠标事件是最常用的事件之一. 它们指的是涉及单击鼠标上的按钮或悬停并移动鼠标指针的事件. 这些事件还对应于触摸设备上的等效操作.
事件 < br ztid="136" ow="0" oh="0"> | 描述 |
---|---|
click | 当鼠标被按下并释放到元素上时触发 |
dblclick | 当元素被单击两次时触发 |
mouseenter | 当指针进入元素时触发 |
mouseleave | 当指针离开一个元素时触发 |
mousemove | 每当指针在元素中移动时触发 |
单击是一个复合事件, 由组合的 mousedown 和 mouseup 事件组成, 当分别按下或抬起鼠标按钮时, 将触发这两个事件.
使用 mouseenter 和 mouseleave 同时创建一个悬停效果, 只要鼠标指针停留在元素上, 悬停效果就会持续.
表单事件
表单事件是与表单相关的操作, 例如正在选择或未选择的输入元素, 以及正在提交的表单.
事件 < br ztid="161" ow="0" oh="0"> | 描述 |
---|---|
submit | 提交表单时触发 |
focus | 当元素 (如输入) 收到焦点时触发 |
blur | 当元素失去焦点时触发 |
当选择一个元素时, 例如, 通过鼠标单击或通过 TAB 键导航到它, 就可以实现焦点.
JavaScript 通常用于提交表单并将值发送到后端语言. 使用 JavaScript 发送表单的优点是, 提交表单不需要重新加载页面, 并且可以使用 JavaScript 验证所需的输入字段.
键盘事件
键盘事件用于处理键盘操作, 例如按下一个键, 举起一个键和按住一个键.
事件 | 描述 < br ztid="181" ow="0" oh="0"> |
---|---|
keydown | 按下某个键时会触发一次 |
keyup | 释放钥匙时触发一次 |
keypress | 按键时连续激发 |
尽管它们看起来很相似, 但 keydown 和 keypress 事件不能访问所有完全相同的键. keydown 将确认按下的每个键, 而 keypress 将省略不生成字符的键, 如 SHIFT,ALT 或 DELETE.
键盘事件具有访问单个键的特定属性.
如果将一个称为事件对象的参数传递给事件侦听器, 我们就可以访问有关所发生的操作的更多信息. 与键盘对象相关的三个属性包括 keyCode,key 和 code.
例如, 如果用户按下键盘上的字母 a 键, 与该键相关的下列属性就会出现:
属性 | 描述 | 例 |
---|---|---|
keyCode | 与键有关的数字。 | 65 |
key | 表示字符名 | a |
code | 表示按下的物理键 | KeyA |
为了展示如何通过 JavaScript 控制台收集这些信息, 我们可以编写以下代码行.
- // Test the keyCode, key, and code properties
- document.addEventListener('keydown', event =>{
- console.log('key:' + event.keyCode);
- console.log('key:' + event.key);
- console.log('code:' + event.code);
- });
一旦在控制台上按下 ENTER 键, 现在就可以按键盘上的键了, 在本例中, 我们将按 a.
输出:
- keyCode: 65
- key: a
- code: KeyA
keyCode 属性是一个与已按下的键相关的数字. key 属性是字符的名称, 它可以更改 -- 例如, 用 SHIFT 键按下 a 将导致键为 a.code 属性表示键盘上的物理键.
注意, keyCode 正在被废弃, 最好在新项目中使用代码.
事件对象
该 Event 对象由所有事件都可以访问的属性和方法组成. 除了通用 Event 对象之外, 每种类型的事件都有自己的扩展名, 例如 KeyboardEvent 和 MouseEvent.
该 Event 对象作为参数传递给侦听器函数. 它通常写成 event 或 e. 我们可以访问事件的 code 属性 keydown 来复制 PC 游戏的键盘控件.
要试用它, 请使用 < p > 标记创建基本 HTML 文件并将其加载到浏览器中.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Events
- </title>
- </head>
- <body>
- <p>
- </p>
- </body>
- </HTML>
然后, 在浏览器的开发者控制台中键入以下 JavaScript 代码.
- // Pass an event through to a listener
- document.addEventListener('keydown', event =>{
- var element = document.querySelector('p');
- // Set variables for keydown codes
- var a = 'KeyA';
- var s = 'KeyS';
- var d = 'KeyD';
- var w = 'KeyW';
- // Set a direction for each code
- switch (event.code) {
- case a:
- element.textContent = 'Left';
- break;
- case s:
- element.textContent = 'Down';
- break;
- case d:
- element.textContent = 'Right';
- break;
- case w:
- element.textContent = 'Up';
- break;
- }
- });
当您按下一个键 - ,a,s,d 或者 w - 你会看到类似以下的输出:
从这里开始, 您可以继续开发浏览器的响应方式以及按下这些键的用户, 并可以创建更加动态的网站.
接下来, 我们将介绍一个最常用的事件属性: target 属性. 在下面的示例中, 我们 div 在一个内部有三个元素 section.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Events
- </title>
- </head>
- <body>
- <section>
- <div id="one">
- One
- </div>
- <div id="two">
- Two
- </div>
- <div id="three">
- Three
- </div>
- </section>
- </body>
- </HTML>
使用事件. 在浏览器的开发人员控制台中, 我们可以将一个事件侦听器放在外部 section 元素上, 并获得嵌套最深的元素.
- const section = document.querySelector('section');
- // Print the selected target
- section.addEventListener('click', event =>{
- console.log(event.target);
- });
单击其中任何一个元素都将使用 event.target 将相关特定元素的输出返回到控制台. 这非常有用, 因为它允许您只放置一个事件侦听器, 该侦听器可用于访问许多嵌套元素.
使用 Event 对象, 我们可以设置与所有事件相关的响应, 包括通用事件和更具体的扩展.
结论
事件是在网站上发生的操作, 例如单击, 悬停, 提交表单, 加载页面或按键盘上的键. 当我们能够让网站响应用户所采取的操作时, JavaScript 就变得真正具有互动性和动态性.
来源: http://www.css88.com/web/javascript/11665.html