浏览器常用事件

coolFish
794 阅读3分钟

这是我参与8月更文挑战的第21天，活动详情查看：        8月更文挑战 ​

序言

我们经常有使用浏览器中的事件，但是对我们而言，仅仅是调用 API 而已，甚至不知道事件是如何触发，和为什么事件触发会执行我们的回调函数，今天我们来细致的了解一下浏览器事件的相关问题。 ​

浏览器中的各种事件

事件就是一件事情发生的信号，在浏览器中，每个DOM发出的信号，都是一个事件，根据不同的操作，发出不同的信号，就是不同的事件，以下是一些常用事件 鼠标事件：

  1. click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
  2. contextmenu —— 当鼠标右键点击一个元素时。
  3. mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。
  4. mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
  5. mousemove —— 当鼠标移动时。

键盘事件：

keydown 和 keyup —— 当按下和松开一个按键时。

表单（form）元素事件：

  1. submit —— 当访问者提交了一个 时。
  2. focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 。

Document 事件： DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。 CSS 事件： transitionend —— 当一个 CSS 动画完成时。

事件处理程序

在对事件作出响应时，我们可以分配一个处理程序，一个事件发生的时候触发的函数，也就是我们定义的回调函数，有以下几种分配方法

HTML 特性

处理程序可以设置在 HTML 中名为 on 的特性（attribute）中。 例如，要为一个 input 分配一个 click 处理程序，我们可以使用 onclick，像这样；

<input value="Click me" onclick="alert('Click!')" type="button">

在鼠标点击时，onclick 中的代码就会运行。 HTML 特性不是编写大量代码的好位置，因此我们最好创建一个 JavaScript 函数，然后在 HTML 特性中调用这个函数。 在这里点击会运行 countRabbits()：

<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert("Rabbit number " + i);
    }
  }
</script>
​
<input type="button" onclick="countRabbits()" value="Count rabbits!">

我们知道，HTML 特性名是大小写不敏感的，所以 ONCLICK 和 onClick 以及 onCLICK 都一样可以运行。但是特性通常是小写的：onclick。

DOM 属性

我们可以使用 DOM 属性（property）on 来分配处理程序。 例如 elem.onclick​

<input id="elem" type="button" value="Click me">
<script>
  elem.onclick = function() {
    alert('hello coolFish');
  };
</script>

如果一个处理程序是通过 HTML 特性（attribute）分配的，那么随后浏览器读取它，并从特性的内容创建一个新函数，并将这个函数写入 DOM 属性（property）。 因此，这种方法实际上与前一种方法相同。 这两段代码工作相同：

  1. HTML
<input type="button" onclick="alert('Click!')" value="Button">
  1. HTML + JS
<input type="button" id="button" value="Button">
<script>
  button.onclick = function() {
    alert('Click!');
  };
</script>

在第一个例子中，button.onclick 是通过 HTML 特性（attribute）初始化的，而在第二个例子中是通过脚本初始化的。这是它们唯一的不同之处。 因为这里只有一个 onclick 属性，所以我们无法分配更多事件处理程序。 在下面这个示例中，我们使用 JavaScript 添加了一个处理程序，覆盖了现有的处理程序

<input type="button" id="elem" onclick="alert('Before')" value="Click me">
<script>
  elem.onclick = function() { // 覆盖了现有的处理程序
    alert('After'); // 只会显示此内容
  };
</script>

要移除一个处理程序 —— 赋值 elem.onclick = null。

avatar
文章
阅读
粉丝