浏览器事件

洺鱼
189 阅读11分钟

引言

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。浏览器的事件系统相对比较复杂。尽管所有的主要浏览器已经实现了“DOM2级事件”，但这个规范本身并没有涵盖所有事件类型，随着DOM3级的出现，DOM事件API变得更加丰富。另外浏览器对象模型（BOM）也支持一些事件，但这些事件与文档对象模型（DOM）之间的关系并不清晰，因为BOM事件长期没有规范可以遵循（HTML5后来给出了说明）。本文主要介绍浏览器DOM的事件系统，包括事件流的三个阶段，事件处理程序的三种方式的不同（DOM0，DOM2，IE），考虑到IE中的事件处理和事件对象的差异如何做兼容性处理，事件对象中的属性如何运用到实际应用中以及它们之间的差异，以及事件捕获与冒泡的先后顺序问题。

文章开头先简短介绍下本文的几个重要知识点：

  • DOM事件处理程序有三种方式，DOM0的onType，IE9以下的attachEvent与detachEvent，DOM2的addEventListener与removeEventListener。
  • DOM2级的优点是可以通过addEventListener的第三个参数来指定是捕获还是冒泡，并且可以为同一个DOM元素注册多个同类型的事件处理程序；而DOM0对每个事件只支持一个事件处理程序
  • DOM0和DOM2的事件处理程序都会自动传入event对象;IE中的event对象取决于指定的事件处理程序的方法,所以在IE中会有window.event、event两种情况；event对象里有一些很有用 处的属性，比如target、currentTarget，preventDefault，stopPropagation，stopImmediatePropagation等
  • 对于DOM0的 ontype，给元素的事件行为绑定方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。对于DOM2的addEventListener，为了最大限度的兼容，大多是情况下都是将事件处理程序添加到事件冒泡阶段。不是特别需要，不建议在事件捕获阶段注册事件处理程序。
  • 事件处理函数的兼容性处理要考虑到DOM0和IE9以下的事件处理方式，事件对象与事件对象属性的兼容性处理要考虑到IE中的不同
  • event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行（一般我们认为stopPropagation是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件）
  • event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget

多数支持DOM事件流的浏览器都实现了一种特定的行为；即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上操作事件。

事件流

事件流描述的是从页面中接受事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流，标准的浏览器事件流是事件捕获流。不过，W3C为了制定标准，采取了折中的方式：先捕获再冒泡（通过addEventListener给出的第三个参数同时支持冒泡与捕获）。具体地，同一个DOM元素可以注册多个同类型的事件，通过addEventListener来注册事件，removeEventListener来解除事件。

注意要想注册过的事件能够被解除，必须将回调函数保存起来，否则无法解除。

DOM事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数，其次调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。（下面的图中没有标html标签）

img

（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

捕获是从上到下，事件先从window对象，然后再到document（对象），然后是html标签（通过document.documentElement获取html标签），然后是body标签（通过document.body获取body标签），然后按照普通的html结构一层一层往下传，最后到达目标元素。

而事件冒泡的流程刚好是事件捕获的逆过程。 接下来我们看个事件冒泡的例子：

 体验AI代码助手 代码解读复制代码// 例3
<div id="outer">
    <div id="inner"></div>
</div>
......
window.onclick = function() {
    console.log('window');
};
document.onclick = function() {
    console.log('document');
};
document.documentElement.onclick = function() {
    console.log('html');
};
document.body.onclick = function() {
    console.log('body');
}
outer.onclick = function(ev) {
    console.log('outer');
};
inner.onclick = function(ev) {
    console.log('inner');
};

img

正如我们下面提到的onclick给元素的事件行为绑定方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。

DOM事件级别

DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。又因为IE和其他浏览器在DOM2级别上事件处理又不一样，因此一般可以将事件处理方式分为三类，即DOM0，DOM2，IE。下面是从DOM级别上来划分

DOM 0级事件

el.onclick=function(){}

 体验AI代码助手 代码解读复制代码var btn = document.getElementById('btn');
 btn.onclick = function(){
     alert(this.innerHTML);
 }

当希望为同一个元素/标签绑定多个同类型事件的时候（如给上面的这个btn元素绑定3个点击事件），是不被允许的。DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。

DOM 2级事件

el.addEventListener(event-name, callback, useCapture)

  • event-name: 事件名称，可以是标准的DOM事件

  • callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event

  • useCapture: 默认是false，代表事件句柄在冒泡阶段执行（或者说注册的是冒泡事件）,true表示事件句柄在捕获阶段执行 （或者说注册的是捕获事件）

    体验AI代码助手 代码解读复制代码var btn = document.getElementById('btn'); btn.addEventListener("click", test, false); function test(e){ e = e || window.event; alert((e.target || e.srcElement).innerHTML); btn.removeEventListener("click", test) } //IE9-:attachEvent()与detachEvent()。 //IE9+/chrom/FF:addEventListener()和removeEventListener()

IE9以下的IE浏览器不支持 addEventListener()和removeEventListener()，使用 attachEvent()与detachEvent() 代替，因为IE9以下是不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。可以对此做个兼容性处理：

DOM 3级事件

在DOM 2级事件的基础上添加了更多的事件类型。

  • UI事件，当用户与页面上的元素交互时触发，如：load、scroll

  • 焦点事件，当元素获得或失去焦点时触发，如：blur、focus

  • 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

  • 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

  • 文本事件，当在文档中输入文本时触发，如：textInput

  • 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

  • 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

  • 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

  • 同时DOM3级事件也允许使用者自定义一些事件。

总结：

  • DOM2级的好处是可以添加多个事件处理程序；DOM0对每个事件只支持一个事件处理程序；

  • 通过DOM2添加的匿名函数无法移除，addEventListener和removeEventListener的handler必须同名

  • 作用域：DOM0的handler会在所属元素的作用域内运行，IE的handler会在全局作用域运行，this === window

  • 触发顺序：添加多个事件时，DOM2会按照添加顺序执行，IE会以相反的顺序执行，请谨记

跨浏览器的事件处理程序

兼容ie9以下的浏览器和DOM0

 体验AI代码助手 代码解读复制代码var EventUtil = {
  // element是当前元素，可以通过getElementById(id)获取
  // type 是事件类型，一般是click ,也有可能是鼠标、焦点、滚轮事件等等
  // handle 事件处理函数
  addHandler: (element, type, handler) => {
    // 先检测是否存在DOM2级方法,再检测IE的方法，最后是DOM0级方法（一般不会到这）
    if (element.addEventListener) {
      // 第三个参数false表示冒泡阶段
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = handler;
    }
  },

  removeHandler: (element, type, handler) => {
    if (element.removeEventListener) {
      // 第三个参数false表示冒泡阶段
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = null;
    }
  }
}

// 获取元素
var btn = document.getElementById('btn');
// 定义handler
var handler = function(e) {
  console.log('我被点击了');
}
// 监听事件
EventUtil.addHandler(btn, 'click', handler);
// 移除事件监听
// EventUtil.removeHandler(button1, 'click', clickEvent);

事件代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）,也叫事件委托。事件代理有以下两个优点：

  • 减少内存消耗，提高性能

假设有一个列表，列表之中有大量的列表项，我们需要在点击每个列表项的时候响应一个事件

 体验AI代码助手 代码解读复制代码// 例4
<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>

如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。借助事件代理，我们只需要给父容器ul绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。

  • 动态绑定事件

在很多时候，我们需要通过用户操作动态的增删列表项元素，如果一开始给每个子元素绑定事件，那么在列表发生变化时，就需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，如果用事件代理就会省去很多这样麻烦。

接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上：

 体验AI代码助手 代码解读复制代码// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
});

事件对象

DOM0和DOM2的事件处理程序都会自动传入event对象,即触发DOM上的某个事件时，会产生一个事件对象，里面包含着所有和事件有关的信息。IE中的event对象取决于指定的事件处理程序的方法

IE的handler会在全局作用域运行，this === window 所以在IE中会有window.event、event两种情况

另外在IE中，事件对象的属性也不一样，对应关系如下：

srcElement => target returnValue => preventDefault() cancelBubble => stopPropagation() IE 不支持事件捕获，因而只能取消事件冒泡，但stopPropagation可以同时取消事件捕获和冒泡

只有在事件处理程序期间，event对象才会存在，一旦事件处理程序执行完成，event对象就会被销毁

1. event. preventDefault()

如果调用这个方法，默认事件行为将不再触发。什么是默认事件呢？例如表单一点击提交按钮(submit)跳转页面、a标签默认页面跳转或是锚点定位等。

很多时候我们使用a标签仅仅是想当做一个普通的按钮，点击实现一个功能，不想页面跳转，也不想锚点定位。

 体验AI代码助手 代码解读复制代码//方法一：
<a href="javascript:;">链接</a>

也可以通过JS方法来阻止，给其click事件绑定方法，当我们点击A标签的时候，先触发click事件，其次才会执行自己的默认行为

 体验AI代码助手 代码解读复制代码//方法二:
<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick = function(e){
    e = e || window.event;
    return false;
}
</script>

//方法三：
<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick = function(e){
    e = e || window.event;
    e.preventDefault();
}
</script>

接下来我们看个例子：输入框最多只能输入六个字符，如何实现？

 体验AI代码助手 代码解读复制代码// 例5
 <input type="text" id='tempInp'>
 <script>
    tempInp.onkeydown = function(ev) {
        ev = ev || window.event;
        let val = this.value.trim() //trim去除字符串首位空格（不兼容）
        // this.value=this.value.replace(/^ +| +$/g,'') 兼容写法
        let len = val.length
        if (len >= 6) {
            this.value = val.substr(0, 6);
            //阻止默认行为去除特殊按键（DELETE\BACK-SPACE\方向键...）
            let code = ev.which || ev.keyCode;
            if (!/^(46|8|37|38|39|40)$/.test(code)) {
                ev.preventDefault()
            }
        }
    }
 </script>
2. event.stopPropagation() & event.stopImmediatePropagation()

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行（一般我们认为stopPropagation是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件）。上面提到事件冒泡阶段是指事件从目标节点自下而上向window对象传播的阶段。 我们在上面例子中的inner元素click事件上，添加 event.stopPropagation()这句话后，就阻止了父事件的执行，最后只打印了'inner'。

 体验AI代码助手 代码解读复制代码 inner.onclick = function(ev) {
    console.log('inner');
    ev.stopPropagation();
};

stopImmediatePropagation 既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其它监听器被触发。而 stopPropagation 只能实现前者的效果。我们来看个例子：

 体验AI代码助手 代码解读复制代码<body>
  <button id="btn">click me to stop propagation</button>
</body>
......
const btn = document.querySelector('#btn');
btn.addEventListener('click', event => {
  console.log('btn click 1');
  event.stopImmediatePropagation();
});
btn.addEventListener('click', event => {
  console.log('btn click 2');
});
document.body.addEventListener('click', () => {
  console.log('body click');
});
// btn click 1

如上所示，使用stopImmediatePropagation后，点击按钮时，不仅body绑定事件不会触发，与此同时按钮的另一个点击事件也不触发。

3. event.target & event.currentTarget

老实说这两者的区别，并不好用文字描述，我们先来看个例子：

 体验AI代码助手 代码解读复制代码<div id="a">
  <div id="b">
    <div id="c">
      <div id="d"></div>
    </div>
  </div>
</div>
<script>
  document.getElementById('a').addEventListener('click', function(e) {
    console.log(
      'target:' + e.target.id + '&currentTarget:' + e.currentTarget.id
    )
  })
  document.getElementById('b').addEventListener('click', function(e) {
    console.log(
      'target:' + e.target.id + '&currentTarget:' + e.currentTarget.id
    )
  })
  document.getElementById('c').addEventListener('click', function(e) {
    console.log(
      'target:' + e.target.id + '&currentTarget:' + e.currentTarget.id
    )
  })
  document.getElementById('d').addEventListener('click', function(e) {
    console.log(
      'target:' + e.target.id + '&currentTarget:' + e.currentTarget.id
    )
  })
</script>

img

当我们点击最里层的元素d的时候，会依次输出:

 体验AI代码助手 代码解读复制代码target:d&currentTarget:d
target:d&currentTarget:c
target:d&currentTarget:b
target:d&currentTarget:a

从输出中我们可以看到，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。也就是说，event.currentTarget始终是监听事件者，而event.target是事件的真正发出者。

4. 跨浏览器的事件对象
 体验AI代码助手 代码解读复制代码var EventUtil = {
    addHandler: function (el, type, handler) {
        if (el.addEventListener) {
            el.addEventListener(type, handler, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + type, handler);
        } else {
            el['on' + type] = handler;
        }
    },
    removeHandler: function (el, type, handler) {
        if (el.removeEventListener) {
            el.removeEventListerner(type, handler, false);
        } else if (el.detachEvent) {
            el.detachEvent('on' + type, handler);
        } else {
            el['on' + type] = null;
        }
    },
    getEvent: function (e) {
        return e ? e : window.event;
    },
    getTarget: function (e) {
        return e.target ? e.target : e.srcElement;
    },
    preventDefault: function (e) {
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    },
    stopPropagation: function (e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }
};

捕获与冒泡的顺序问题

当有多层交互嵌套时，事件捕获和冒泡的先后顺序看起来是不好确定的。下将分 5 种情况讨论它们的顺序，以及如何规避意外情况的发生。

1.在外层 div 注册事件，点击内层 div 来触发事件时，捕获事件总是要比冒泡事件先触发(与代码顺序无关)

假设，有这样的 html 结构：

 体验AI代码助手 代码解读复制代码<div id="test" class="test">
   <div id="testInner" class="test-inner"></div>
</div>

然后，我们在外层 div 上注册两个 click 事件，分别是捕获事件和冒泡事件，代码如下：

 体验AI代码助手 代码解读复制代码const btn = document.getElementById("test");
 
//捕获事件
btn.addEventListener("click", function(e){
    alert("capture is ok");
}, true);
 
//冒泡事件
btn.addEventListener("click", function(e){
    alert("bubble is ok");
}, false);

点击内层的 div，先弹出 capture is ok，后弹出 bubble is ok。只有当真正触发事件的 DOM 元素是内层的时候，外层 DOM 元素才有机会模拟捕获事件和冒泡事件。

2.当在触发事件的 DOM 元素上注册事件时，哪个先注册，就先执行哪个

html 结构同上，js 代码如下：

 体验AI代码助手 代码解读复制代码const btnInner = document.getElementById("testInner");

//冒泡事件
btnInner.addEventListener("click", function(e){
    alert("bubble is ok");
}, false);
 
//捕获事件
btnInner.addEventListener("click", function(e){
    alert("capture is ok");
}, true);

本例中，冒泡事件先注册，所以先执行。所以，点击内层 div，先弹出 bubble is ok，再弹出 capture is ok。

3.当外层 div 和内层 div 同时注册了捕获事件时，点击内层 div 时，外层 div 的事件一定会先触发

 体验AI代码助手 代码解读复制代码const btn = document.getElementById("test");
const btnInner = document.getElementById("testInner");

btnInner.addEventListener("click", function(e){
    alert("inner capture is ok");
}, true);

btn.addEventListener("click", function(e){
    alert("outer capture is ok");
}, true);

虽然外层 div 的事件注册在后面，但会先触发。所以，结果是先弹出 outer capture is ok，再弹出 inner capture is ok。

4.同理，当外层 div 和内层 div 都同时注册了冒泡事件，点击内层 div 时，一定是内层 div 事件先触发。

 体验AI代码助手 代码解读复制代码const btn = document.getElementById("test");
const btnInner = document.getElementById("testInner");

btn.addEventListener("click", function(e){
    alert("outer bubble is ok");
}, false);

btnInner.addEventListener("click", function(e){
    alert("inner bubble is ok");
}, false);

先弹出 inner bubble is ok，再弹出 outer bubble is ok。

5.阻止事件的派发

通常情况下，我们都希望点击某个div 时，就只触发自己的事件回调。比如，明明点击的是内层 div，但是外层div的事件也触发了，这是就不是我们想要的了。这时，就需要阻止事件的派发。

事件触发时，会默认传入一个 event 对象，这个 event 对象上有一个方法：stopPropagation。MDN 上的解释是：阻止 捕获 和 冒泡 阶段中，当前事件的进一步传播。所以，通过此方法，让外层 div 接收不到事件，自然也就不会触发了。

 体验AI代码助手 代码解读复制代码btnInner.addEventListener("click", function(e){
    //阻止冒泡
    e.stopPropagation();
    alert("inner bubble is ok");
}, false);

作者：八叉树
链接：juejin.cn/post/684490…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

下面，复习一下浏览器中的事件。

资源事件

beforeunload 事件

beforeunload事件在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。

如果该事件对象的returnValue属性是一个非空字符串，那么浏览器就会弹出一个对话框，询问用户是否要卸载该资源。但是，用户指定的字符串可能无法显示，浏览器会展示预定义的字符串。如果用户点击“取消”按钮，资源就不会卸载。

window.addEventListener('beforeunload', function (event) {
  event.returnValue = '你确定离开吗？';//用户如果关闭窗口，浏览器会弹出一个窗口，要求用户确认
});

浏览器对这个事件的行为很不一致，可以采用下面的写法，取得最大的兼容性。

window.addEventListener('beforeunload', function (e) {
  var confirmationMessage = '确认关闭窗口？';

  e.returnValue = confirmationMessage;
  return confirmationMessage;
});

注意，许多手机浏览器（比如 Safari）默认忽略这个事件，桌面浏览器也有办法忽略这个事件。所以，它可能根本不会生效，不能依赖它来阻止用户关闭浏览器窗口，最好不要使用这个事件。

另外，一旦使用了beforeunload事件，浏览器就不会缓存当前网页，使用“回退”按钮将重新向服务器请求网页。这是因为监听这个事件的目的，一般是为了网页状态，这时缓存页面的初始状态就没意义了。

 unload 事件

unload事件在窗口关闭或者document对象将要卸载时触发。它的触发顺序排在beforeunload、pagehide事件后面。

unload事件发生时，文档处于一个特殊状态。所有资源依然存在，但是对用户来说都不可见，UI 互动全部无效。

这个事件是无法取消的，即使在监听函数里面抛出错误，也不能停止文档的卸载。

window.addEventListener('unload', function(event) {
  console.log('文档将要卸载');
});

一旦使用了unload事件，浏览器就不会缓存当前网页，理由同上

因此，任何情况下都不应该依赖这个事件，指定网页卸载时要执行的代码，可以考虑完全不使用这个事件。

该事件可以用pagehide代替。

 load 、error 事件

load事件在页面或某个资源加载成功时触发。注意，页面或资源从浏览器缓存加载，并不会触发load事件。

error事件是在页面或资源加载失败时触发。abort事件在用户取消加载时触发。

这三个事件实际上属于进度事件，不仅发生在document对象，还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程，图像（image）、样式表（style sheet）、脚本（script）、视频（video）、音频（audio）、Ajax请求（XMLHttpRequest）等等。这些资源和document对象、window对象、XMLHttpRequestUpload 对象，都会触发load事件和error事件。

最后，页面的load事件也可以用pageshow事件代替。

session 历史事件

 pageshow 、pagehide 事件

默认情况下，浏览器会在当前会话（session）缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。

pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载（不管是不是从浏览器缓存）时都运行的代码，可以放在这个事件的监听函数。

第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。

同理，如果是从缓存中加载页面，网页内初始化的 JavaScript 脚本（比如 DOMContentLoaded 事件的监听函数）也不会执行。

pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。

window.addEventListener('pageshow', function(event){
  if (event.persisted) {
    // ...
  }
});

pagehide事件与pageshow事件类似，当用户通过“前进/后退”按钮，离开当前页面时触发。

它与 unload 事件的区别在于，如果在 window 对象上定义unload事件的监听函数之后，页面不会保存在缓存中，而使用pagehide事件，页面会保存在缓存中。

pagehide事件实例也有一个persisted属性，将这个属性设为true，就表示页面要保存在缓存中；设为false，表示网页不保存在缓存中，这时如果设置了unload 事件的监听函数，该函数将在 pagehide 事件后立即运行。

如果页面包含<frame>或<iframe>元素，则<frame>页面的pageshow事件和pagehide事件，都会在主页面之前触发。

注意，这两个事件只在浏览器的history对象发生变化时触发，跟网页是否可见没有关系。

popstate 事件

popstate事件在浏览器的history对象的当前记录发生显式切换时触发。

注意，调用history.pushState()或history.replaceState()，并不会触发popstate事件

该事件只在用户在history记录之间显式切换时触发，比如鼠标点击“后退/前进”按钮，或者在脚本中调用history.back()、history.forward()、history.go()时触发。

该事件对象有一个state属性，保存history.pushState方法和history.replaceState方法为当前记录添加的state对象。

window.onpopstate = function (event) {
  console.log('state: ' + event.state);
};
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back(); // state: {"page":1}
history.back(); // state: null
history.go(2);  // state: {"page":3}

pushState方法向history添加了两条记录，然后replaceState方法替换掉当前记录。因此，连续两次back方法，会让当前条目退回到原始网址，它没有附带state对象，所以事件的state属性为null，然后前进两条记录，又回到replaceState方法添加的记录。

浏览器对于页面首次加载，是否触发popstate事件，处理不一样。

 hashchange 事件

hashchange事件在 URL 的 hash 部分（即#号后面的部分，包括#号）发生变化时触发。该事件一般在window对象上监听。

hashchange的事件实例具有两个特有属性：oldURL属性和newURL属性，分别表示变化前后的完整 URL。

// URL 是 http://www.example.com/
window.addEventListener('hashchange', myFunction);

function myFunction(e) {
  console.log(e.oldURL);
  console.log(e.newURL);
}

location.hash = 'part2';
// http://www.example.com/
// http://www.example.com/#part2

网页状态事件

 DOMContentLoaded 

网页下载并解析完成以后，浏览器就会在document对象上触发 DOMContentLoaded 事件。这时，仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件，发生时间早得多。

注意，网页的 JavaScript 脚本是同步执行的，脚本一旦发生堵塞，将推迟触发DOMContentLoaded事件。

document.addEventListener('DOMContentLoaded', function (event) {
  console.log('DOM 生成');
});

// 这段代码会推迟触发 DOMContentLoaded 事件
for(var i = 0; i < 1000000000; i++) {
  // ...
}

readystatechange 

当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发。document.readyState有三个可能的值：loading（网页正在加载）、interactive（网页已经解析完成，但是外部资源仍然处在加载状态）和complete（网页和所有外部资源已经结束加载，load事件即将触发）。

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    // ...
  }
}

这个事件可以看作DOMContentLoaded事件的另一种实现方法。

窗口事件

scroll 事件

scroll事件在文档或文档元素滚动时触发，主要出现在用户拖动滚动条。

window.addEventListener('scroll', callback);

该事件会连续地大量触发，所以它的监听函数之中不应该有非常耗费计算的操作。推荐的做法是使用requestAnimationFrame或setTimeout控制该事件的触发频率，然后可以结合customEvent抛出一个新事件。

(function () {
  var throttle = function (type, name, obj) {
    var obj = obj || window;
    var running = false;
    var func = function () {
      if (running) { return; }
      running = true;
      requestAnimationFrame(function() {
        obj.dispatchEvent(new CustomEvent(name));
        running = false;
      });
    };
    obj.addEventListener(type, func);
  };

  // 将 scroll 事件重定义为 optimizedScroll 事件
  throttle('scroll', 'optimizedScroll');
})();

window.addEventListener('optimizedScroll', function() {
  console.log('Resource conscious scroll callback!');
});

throttle函数用于控制事件触发频率，requestAnimationFrame方法保证每次页面重绘（每秒60次），只会触发一次scroll事件的监听函数。上面方法将scroll事件的触发频率，限制在每秒60次。

改用setTimeout方法，可以放置更大的时间间隔：

(function() {
  window.addEventListener('scroll', scrollThrottler, false);

  var scrollTimeout;
  function scrollThrottler() {
    if (!scrollTimeout) {
      scrollTimeout = setTimeout(function () {
        scrollTimeout = null;
        actualScrollHandler();
      }, 66);
    }
  }

  function actualScrollHandler() {
    // ...
  }
}());

每次scroll事件都会执行scrollThrottler函数。该函数里面有一个定时器setTimeout，每66毫秒触发一次（每秒15次）真正执行的任务actualScrollHandler。

更一般的throttle函数的写法：

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

// 将scroll事件的触发频率，限制在一秒一次。
window.addEventListener('scroll', throttle(callback, 1000));

lodash函数库提供了现成的throttle函数，可以直接使用。

window.addEventListener('scroll', _.throttle(callback, 1000));

throttle与debounce区别在于，throttle是“节流”，确保一段时间内只执行一次，而debounce是“防抖”，要连续操作结束后再执行。以网页滚动为例，debounce要等到用户停止滚动后才执行，throttle则是如果用户一直在滚动网页，那么在滚动过程中还是会执行。

resize 事件

resize事件在改变浏览器窗口大小时触发，主要发生在window对象上面。

var resizeMethod = function () {
  if (document.body.clientWidth < 768) {
    console.log('移动设备的视口');
  }
};

window.addEventListener('resize', resizeMethod, true);

该事件也会连续地大量触发，所以最好像上面的scroll事件一样，通过throttle函数控制事件触发频率。

fullscreenchange 、fullscreenerror 

fullscreenchange事件在进入或退出全屏状态时触发，该事件发生在document对象上面。

document.addEventListener('fullscreenchange', function (event) {
  console.log(document.fullscreenElement);
});

fullscreenerror事件在浏览器无法切换到全屏状态时触发。

剪贴板事件

以下三个事件属于剪贴板操作的相关事件。

  • cut：将选中的内容从文档中移除，加入剪贴板时触发。
  • copy：进行复制动作时触发。
  • paste：剪贴板内容粘贴到文档后触发。

这三个事件都是ClipboardEvent接口的实例。ClipboardEvent有一个实例属性clipboardData，是一个 DataTransfer 对象，存放剪贴的数据.

document.addEventListener('copy', function (e) {
  e.clipboardData.setData('text/plain', 'Hello, world!');
  e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
  e.preventDefault();
});

上面的代码使得复制进入剪贴板的，都是开发者指定的数据，而不是用户想要拷贝的数据。

焦点事件

焦点事件发生在元素节点和document对象上面，与获得或失去焦点相关。它主要包括以下四个事件。

  • focus：元素节点获得焦点后触发，该事件不会冒泡。
  • blur：元素节点失去焦点后触发，该事件不会冒泡。
  • focusin：元素节点将要获得焦点时触发，发生在focus事件之前。该事件会冒泡。
  • focusout：元素节点将要失去焦点时触发，发生在blur事件之前。该事件会冒泡。

这四个事件都继承了FocusEvent接口。FocusEvent实例具有以下属性。

  • FocusEvent.target：事件的目标节点。
  • FocusEvent.relatedTarget：对于focusin事件，返回失去焦点的节点；对于focusout事件，返回将要接受焦点的节点；对于focus和blur事件，返回null。

由于focus和blur事件不会冒泡，只能在捕获阶段触发，所以addEventListener方法的第三个参数需要设为true。

form.addEventListener('focus', function (event) {
  event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', function (event) {
  event.target.style.background = '';
}, true);

上面代码针对表单的文本输入框，接受焦点时设置背景色，失去焦点时去除背景色。

CustomEvent 接口

CustomEvent 接口用于生成自定义的事件实例。那些浏览器预定义的事件，虽然可以手动生成，但是往往不能在事件上绑定数据。如果需要在触发事件的同时，传入指定的数据，就可以使用 CustomEvent 接口生成的自定义事件对象。

浏览器原生提供CustomEvent()构造函数，用来生成 CustomEvent 事件实例。

new CustomEvent(type, options)

第一个参数是字符串，表示事件的名字，这是必须的。第二个参数是事件的配置对象，这个参数是可选的。CustomEvent的配置对象除了接受 Event 事件的配置属性，只有一个自己的属性。

  • detail：表示事件的附带数据，默认为null。

    var myEvent = new CustomEvent('myevent', { detail: { foo: 'bar' }, bubbles: true, cancelable: false });

    el.addEventListener('myevent', function (event) { console.log('Hello ' + event.detail.foo); });

    el.dispatchEvent(myEvent);

CustomEvent 的事件实例，除了具有 Event 接口的实例属性，还具有detail属性。

GlobalEventHandlers 接口

指定事件的回调函数，推荐使用的方法是元素的addEventListener方法。

div.addEventListener('click', clickHandler, false);

除了之外，还有一种方法可以直接指定事件的回调函数。

div.onclick = clickHandler;

这个接口是由GlobalEventHandlers接口提供的。它的优点是使用比较方便，缺点是只能为每个事件指定一个回调函数，并且无法指定事件触发的阶段（捕获阶段还是冒泡阶段）。

HTMLElement、Document和Window都继承了这个接口，也就是说，各种 HTML 元素、document对象、window对象上面都可以使用GlobalEventHandlers接口提供的属性。下面就列出这个接口提供的主要的事件属性。

onabort

某个对象的abort事件（停止加载）发生时，就会调用onabort属性指定的回调函数。

各种元素的停止加载事件，到底如何触发，目前并没有统一的规定。因此实际上，这个属性现在一般只用在图片元素上面。

// HTML 代码如下
// <img src="example.jpg" id="img">
var img = document.getElementById('img');
img.onabort = function () {
  console.log('image load aborted.');
}

onerror

error事件发生时，就会调用onerror属性指定的回调函数。

error事件分成两种：

一种是 JavaScript 的运行时错误，这会传到window对象，导致window.onerror()

window.onerror = function (message, source, lineno, colno, error) {
  // ...
}

window.onerror的处理函数共接受五个参数，含义如下。

  • message：错误信息字符串
  • source：报错脚本的 URL
  • lineno：报错的行号，是一个整数
  • colno：报错的列号，是一个整数
  • error： 错误对象

另一种是资源加载错误，比如<img>或<script>加载的资源出现加载错误。这时，Error 对象会传到对应的元素，导致该元素的onerror属性开始执行。

element.onerror = function (event) {
  // ...
}

一般来说，资源的加载错误不会触发window.onerror。

onload、onloadstart

元素完成加载时，会触发load事件，执行onload()。它的典型使用场景是window对象和<img>元素。对于window对象来说，只有页面的所有资源加载完成（包括图片、脚本、样式表、字体等所有外部资源），才会触发load事件。

对于<img>和<video>等元素，加载开始时还会触发loadstart事件，导致执行onloadstart。

onfocus、onblur

当前元素获得焦点时，会触发element.onfocus；失去焦点时，会触发element.onblur。

注意，如果不是可以接受用户输入的元素，要触发onfocus，该元素必须有tabindex属性。

onscroll

页面或元素滚动时，会触发scroll事件，导致执行onscroll()

oncontextmenu、onshow

用户在页面上按下鼠标的右键，会触发contextmenu事件，导致执行oncontextmenu()。如果该属性执行后返回false，就等于禁止了右键菜单。document.oncontextmenu与window.oncontextmenu效果一样。

document.oncontextmenu = function () {
  return false;
};

oncontextmenu属性执行后返回false，右键菜单就不会出现

元素的右键菜单显示时，会触发该元素的onshow监听函数。

7. 其他的事件属性

1、鼠标的事件属性。

onclick
ondblclick
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onwheel

2、键盘的事件属性。

onkeydown
onkeypress
onkeyup

3、焦点的事件属性。

onblur
onfocus

4、表单的事件属性。

oninput
onchange
onsubmit
onreset
oninvalid
onselect

5、触摸的事件属性。

ontouchcancel
ontouchend
ontouchmove
ontouchstart

拖动的事件属性分成两类：一类与被拖动元素相关，另一类与接收被拖动元素的容器元素相关

6、被拖动元素的事件属性。

ondragstart：拖动开始
ondrag：拖动过程中，每隔几百毫秒触发一次
ondragend：拖动结束

7、接收被拖动元素的容器元素的事件属性。

ondragenter：被拖动元素进入容器元素。
ondragleave：被拖动元素离开容器元素。
ondragover：被拖动元素在容器元素上方，每隔几百毫秒触发一次。
ondrop：松开鼠标后，被拖动元素放入容器元素。

8、

<dialog>对话框元素的事件属性。

oncancel
onclose

参考：

JS学习系列20-常见事件、GlobalEventHandlers接口

JS学习系列19-表单事件、触摸事件、拖拉事件

JS学习系列18-鼠标事件、键盘事件、进度事件

JS学习系列17-EventTarget接口、事件模型、Event对象

avatar
文章
阅读
粉丝