DOM事件（DOM，BOM）

DOM事件类

  • 基本概念：DOM事件的级别

    DOM0 - element.onclick=function(){}
    DOM2 - element.addEventListener('click', function(){}, false/true) // 第三个参数设置为 true 则在 捕获阶段触发
    通过GIF理解 addEventListener，捕获和冒泡
    DOM3 - element.addEventListener('keyup', function(){},false/true)事件类型增加很多（鼠标事件，键盘事件）

  • DOM事件模型
    捕获从上往下，冒泡（目标元素/当前元素）从下往上

  • DOM事件流
    浏览器在当前页面与用户做交互中，比如我点击了左键，这个左键怎么传到页面元素上的，目标元素是怎么响应的，这个就是事件流。
    一个完整的事件流分为三个阶段：捕获 => 目标阶段 => 冒泡（事件通过捕获到达目标元素，这个阶段就是目标阶段，通过目标元素上传到 window 对象，这个就是冒泡阶段）
  • 描述DOM事件捕获的具体流程
    window => document => html ( document.documentElement 可以拿到 HTML标签 ) => body => …(父级元素，子级元素，一层一层往下找)
  • Event对象的常见应用
    event.preventDefault() // 阻止默认事件，比如我是一个 a 标签，组织链接跳转
    event.stopPropagation() // 阻止冒泡
    event.stopImmediatePropagation() // 一个标签绑定两个事件 a, b，通过优先级的方式，给 a 事件中设置此属性，则就会成功阻止到 b 事件的触发
    event.currentTarget // 当前所绑定的事件，比如父级元素绑定的事件，就是此事件
    event.target // 事件委托（事件代理，子元素事件全部绑定到父元素上）
  • 自定义事件 ```javascript var eve = new Event(‘custome’); ev.addEventListener(‘custome’, function(){ console.log(‘custome’); }); // ev 指的是绑定元素 ev.dispatchEvent(eve); // 触发

var eve = new CustomEvent(‘自定义事件名称’, 传参); // 与 Event 比较，此方法可以传参

  1. ```html
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <title>Event</title>
  7.   </head>
  8.   <body>
  9.       <div id="ev">
  10.         <style media="screen">
  11.           #ev{
  12.             width: 300px;
  13.             height: 100px;
  14.             background: red;
  15.             color: #fff;
  16.             text-align: center;
  17.             line-height: 100px;
  18.           }
  19.         </style>
  20.         目标元素
  21.       </div>
  22.       <script type="text/javascript">
  23.         var ev = document.getElementById('ev');
  25.         ev.addEventListener('click', function (e) {
  26.             console.log('ev captrue');
  27.         }, true); // 第三个参数，true 表示此事件是在捕获阶段触发
  29.         window.addEventListener('click', function (e) {
  30.             console.log('window captrue');
  31.         }, true);
  33.         document.addEventListener('click', function (e) {
  34.             console.log('document captrue');
  35.         }, true);
  37.         document.documentElement.addEventListener('click', function (e) {
  38.             console.log('html captrue');
  39.         }, true); // true 参数，html 元素
  41.         document.body.addEventListener('click', function (e) {
  42.             console.log('body captrue');
  43.         }, true);
  44.         // 以上事件的触发顺序：window => document => html => body => ev
  46.         var eve = new Event('test');
  47.         ev.addEventListener('test', function () {
  48.             console.log('test dispatch');
  49.         });
  50.         setTimeout(function () {
  51.             ev.dispatchEvent(eve); // ev.dispatchEvent('事件对象') 注意不是绑定的事件名称
  52.         }, 1000);
  53.       </script>
  54.   </body>
  55. </html>