Day17-18前端学习之路——Javascript事件

时间：2023-02-13 15:39:06
  • 用户在某个元素上点击鼠标或悬停光标。
  • 用户在键盘中按下某个按键。
  • 用户调整浏览器的大小或者关闭浏览器窗口。
  • 一个网页停止加载。
  • 提交表单。
  • 播放、暂停、关闭视频。
  • 发生错误。

更多事件：https://developer.mozilla.org/zh-CN/docs/Web/Events

一、概念

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回

应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

不同的编程环境下事件机制是不同的

二、使用网页事件的方式

（1）机制一——事件处理器属性

var btn = document.querySelector('button');

btn.onclick = function() {

  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';

  document.body.style.backgroundColor = rndCol;

}

这个 onclick 是被用在这个情景下的事件处理器的属性，它就像 button 其他的属性（如 btn.textContent, or btn.style), 但是有一个特别的地方——当您将一些代码赋值给它的时候，只要事件触发代码就会运行。

您也可以将一个有名字的函数赋值给事件处理参数（正如我们在 Build your own function 中看到的），下面的代码也是这样工作的：

var btn = document.querySelector('button');

function bgChange() {

  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';

  document.body.style.backgroundColor = rndCol;

}

btn.onclick = bgChange;
  • btn.onfocus及btn.onblur — 颜色将于按钮被置于焦点或解除焦点时改变（尝试使用Tab移动至按钮上，然后再移开）。这些通常用于显示有关如何在置于焦点时填写表单字段的信息，或者如果表单字段刚刚填入不正确的值，则显示错误消息。
  • btn.ondblclick — 颜色将仅于按钮被双击时改变。
  • window.onkeypress, window.onkeydown, window.onkeyup — 当按钮被按下时颜色会发生改变. keypress 指的是通俗意义上的按下按钮 (按下并松开), 而 keydown 和 keyup 指的是按键动作的一部分,分别指按下和松开. 注意如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window对象中。
  • btn.onmouseover 和 btn.onmouseout — 颜色将会在鼠标移入按钮上方时发生改变, 或者当它从按钮移出时.

(2)机制二——行内事件处理器-请勿使用

在html文件中写入js代码，一开始，您不应该混用 HTML 和 JavaScript，因为这样文档很难解析——最好的办法是只在一块地方写 JavaScript 代码。

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

（3）机制三——addEventListener()和removeEventListener()

var btn = document.querySelector('button');

function bgChange() {

  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';

  document.body.style.backgroundColor = rndCol;

}   

btn.addEventListener('click', bgChange);

removeEventListener()，这个方法移除事件监听器。例如，下面的代码将会移除上个代码块中的事件监听器：

btn.removeEventListener('click', bgChange);

在这个简单的、小型的项目中可能不是很有用，但是在大型的、复杂的项目中就非常有用了，可以非常高效地清除不用的事件处理器，另外在其他的一些场景中也非常有效——比如您需要在不同环境下运行不同的事件处理器，您只需要恰当地删除或者添加事件处理器即可。

您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：

myElement.onclick = functionA;

myElement.onclick = functionB;

第二行会覆盖第一行，但是下面这种方式就会正常工作了：

myElement.addEventListener('click', functionA);

myElement.addEventListener('click', functionB);

当元素被点击时两个函数都会工作：

此外，该事件机制还提供了许多其他强大的特性和选项。这对于本文来说有点超出范围，但是如果您想要阅读它们，请查看addEventListener()和removeEventListener()参考页面。

（4）使用哪种机制

  • 绝对不应该使用HTML事件处理程序属性 - 这些属性已经过时了，而且也是不好的做法
  • 事件处理属性机制：具有更好的跨浏览器兼容性
  • addEventListener()和removeEventListener()机制： 可使用removeEventListener()删除事件处理程序代码；可以给用一类型的元素添加多个监听器；您可以在一个元素上多次调用addEventListener('click', function() { ... })，并可在第二个参数中指定不同的函数。对于事件处理程序属性来说，这是不可能的，因为后面任何设置的属性都会尝试覆盖较早的属性

三、其他事件概念

（1）事件对象

有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。 这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。 例如，让我们稍稍重写一遍我们的随机颜色示例：

function bgChange(e) {

  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';

  e.target.style.backgroundColor = rndCol;

  console.log(e);

}  

btn.addEventListener('click', bgChange);

在这里，您可以看到我们在函数中包括一个事件对象e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。 事件对象 e 的target属性始终是事件刚刚发生的元素的引用。 所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

Note: 您可以使用任何您喜欢的名称作为事件对象 - 您只需要选择一个名称，然后可以在事件处理函数中引用它。 开发人员最常使用 e / evt / event，因为它们很简单易记。 坚持标准总是很好。

（2）阻止默认行为

当用户没有正确提交数据时，麻烦就来了 - 作为开发人员，你希望停止提交信息给服务器，并给他们一个错误提示，告诉他们什么做错了，以及需要做些什么来修正错误。 一些浏览器支持自动的表单数据验证功能，但由于许多浏览器不支持，因此建议你不要依赖这些功能，并实现自己的验证检查。 我们来看一个简单的例子。

首先，一个简单的HTML表单，需要你填入名（first name）和姓（last name）

<form>

  <div>

    <label for="fname">First name: </label>

    <input id="fname" type="text">

  </div>

  <div>

    <label for="lname">Last name: </label>

    <input id="lname" type="text">

  </div>

  <div>

     <input id="submit" type="submit">

  </div>

</form>

<p></p>
var form = document.querySelector('form');

var fname = document.getElementById('fname');

var lname = document.getElementById('lname');

var submit = document.getElementById('submit');

var para = document.querySelector('p');

form.onsubmit = function(e) {

  if (fname.value === '' || lname.value === '') {

    e.preventDefault();

    para.textContent = 'You need to fill in both names!';

  }

}

这里我们用一个onsubmit事件处理程序（在提交的时候，在一个表单上发起submit事件）来实现一个非常简单的检查，用于测试文本字段是否为空。如果是，我们在事件对象上调用preventDefault()函数，这样就停止了表单提交，然后在我们表单下面的段落中显示一条错误消息，告诉用户什么是错误的。

显然，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交——这不是我们例子想要达到的目的。

（3）事件冒泡以及捕获

事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events

四、HTML DOM Text对象

  • Text对象代表HTML表单中的文本输入域，在 HTML 表单中 <input type="text"> 每出现一次，Text 对象就会被创建。
  • 该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件句柄。
  • 您可以使用 HTML <textarea> 标记来创建多行文本输入。
  • 对于掩码文本输入，把 <input type="text"> 中的 type 设置为 "password"。
  • 可以通过表单的 elements[] 数组来访问文本输入域，或者通过使用 document.getElementById()。

五、HTML DOM Button对象

相关文章