# 浏览器的事件

# DOM 事件级别

  • DOM0
    • onXXX 类型的定义事件
    • element.onclick = function(e) { ... }
  • DOM2
    • addEventListener 方式
    • element.addEventListener('click', function (e) { ... })
    • btn.removeEventListener('click', func, false)
    • btn.attachEvent("onclick", func);
    • btn.detachEvent("onclick", func);
  • DOM3
    • 增加了很多事件类型
    • element.addEventListener('keyup', function (e) { ... })
    • eventUtil 是自定义对象,textInput 是 DOM3 级事件

# DOM 事件模型

捕获从上到下, 冒泡从下到上。先捕获,再到目标,再冒泡

# 描述 DOM 事件捕获的具体流程

从 window -> document -> html -> body -> ... -> 目标元素

# Event 对象常见应用

  • event.target 触发事件的元素
  • event.currentTarget 绑定事件的元素
  • event.preventDefault() 阻止默认行为
  • event.stopPropagation() 阻止在捕获阶段或冒泡阶段继续传播,而不是阻止冒泡
  • event.stopImmediatePropagation() 阻止事件冒泡并且阻止相同事件的其他侦听器被调用。

# 自定义事件

  • Event
  • CustomEvent
var btn = document.querySelector('#btn');
/*
 * 第一个参数是事件类型
 * 第二个参数是一个对象
 */
var ev = new CustomEvent('alert', {
  bubbles: 'true',
  cancelable: 'true',
  detail: 'button',
});
btn.addEventListener(
  'alert',
  function(event) {
    console.log(event.bubbles); //true
    console.log(event.cancelable); //true
    console.log(event.detail); //button
  },
  false,
);
btn.dispatchEvent(ev);

# 事件模型

W3C 中定义事件的发生经历三个阶段:捕获阶段(capturing)、目标阶段(targeting)、冒泡阶段(bubbling)

冒泡型事件:当你使用事件冒泡时,子级元素先触发,父级元素后触发 捕获型事件:当你使用事件捕获时,父级元素先触发,子级元素后触发

阻止冒泡:在 W3c 中,使用 stopPropagation()方法;在 IE 下设置 cancelBubble = true 阻止捕获:阻止事件的默认行为,例如 click 后的跳转。在 W3c 中,使用 preventDefault()方法,在 IE 下设置 window.event.returnValue = false

# DOM 事件流

事件流分为两种: 捕获事件流和冒泡事件流。

捕获事件流从根节点开始执行,一直往子节点查找执行,直到查找执行到目标节点。 冒泡事件流从目标节点开始执行,一直往父节点冒泡查找执行,直到查到到根节点。

DOM 事件流分为三个阶段,一个是捕获节点,一个是处于目标节点阶段,一个是冒泡阶段

阻止冒泡事件 event.stopPropagation()

function stopBubble(e) {
  if (e && e.stopPropagation) {
    // 如果提供了事件对象 event 这说明不是 IE 浏览器
    e.stopPropagation();
  } else {
    window.event.cancelBubble = true; // IE 方式阻止冒泡
  }
}

阻止默认行为 event.preventDefault()

function stopDefault(e) {
  if (e && e.preventDefault) {
    e.preventDefault();
  } else {
    // IE浏览器阻止函数器默认动作的行为
    window.event.returnValue = false;
  }
}

# 事件触发三阶段

  • document 往事件触发处传播,遇到注册的捕获事件会触发
  • 传播到事件触发处时触发注册的事件
  • 从事件触发处往 document 传播,遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的顺序进行,但是也有特例,如果给一个目标节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行

// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡');
  },
  false,
);
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ');
  },
  true,
);

# 注册事件

  • 通常我们使用 addEventListener 注册事件,该函数的第三个参数可以是布尔值,也可以是对象。对于布尔值 useCapture 参数来说,该参数默认值为 falseuseCapture 决定了注册的事件是捕获事件还是冒泡事件。对于对象参数来说,可以使用以下几个属性:

    • capture:布尔值,和 useCapture 作用一样
    • once:布尔值,值为 true 表示该回调只会调用一次,调用后会移除监听
    • passive:布尔值,表示永远不会调用 preventDefault
  • 一般来说,我们只希望事件只触发在目标上,这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的,其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件,但是还能阻止该事件目标执行别的注册事件

node.addEventListener(
  'click',
  event => {
    event.stopImmediatePropagation();
    console.log('冒泡');
  },
  false,
);
// 点击 node 只会执行上面的函数,该函数不会执行
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ');
  },
  true,
);

# 事件代理

事件代理又称之为事件委托。事件代理的原理是 DOM 元素的事件冒泡。 事件委托是指将事件绑定目标元素的到父元素上,利用冒泡机制触发该事件

优点:

  • 可以减少事件注册,节省大量内存占用
  • 可以将事件应用于动态添加的子元素上
  • 提高运行效率(尤其对于需要循环操作的列表)
  • 动态添加后的元素,仍然可以有这些事件(对比与给自己添加的事件,后续动态添加时,新来的这些元素不会有这些事件)

但使用不当会造成事件在不应该触发时触发

ulEl.addEventListener(
  'click',
  function(e) {
    var target = event.target || event.srcElement;
    if (target && target.nodeName.toUpperCase() === 'LI') {
      console.log(target.innerHTML);
    }
  },
  false,
);

# 写一个通用的事件侦听器函数

my.Event = {
  // 页面加载完成后
  readyEvent: function(fn) {
    if (fn == null) {
      fn = document;
    }
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = fn;
    } else {
      window.onload = function() {
        oldonload();
        fn();
      };
    }
  },
  // 视能力分别使用dom0||dom2||IE方式 来绑定事件
  // 参数: 操作的元素,事件名称 ,事件处理程序
  addEvent: function(element, type, handler) {
    if (element.addEventListener) {
      //事件类型、需要执行的函数、是否捕捉
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, function() {
        handler.call(element);
      });
    } else {
      element['on' + type] = handler;
    }
  },
  // 移除事件
  removeEvent: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.datachEvent) {
      element.detachEvent('on' + type, handler);
    } else {
      element['on' + type] = null;
    }
  },
  // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
  stopPropagation: function(ev) {
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
  },
  // 取消事件的默认行为
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  // 获取事件目标
  getTarget: function(event) {
    return event.target || event.srcElement;
  },
  // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
  getEvent: function(e) {
    var ev = e || window.event;
    if (!ev) {
      var c = this.getEvent.caller;
      while (c) {
        ev = c.arguments[0];
        if (ev && Event == ev.constructor) {
          break;
        }
        c = c.caller;
      }
    }
    return ev;
  },
};

# target 和 currentTarget

target 是触发事件的某个具体的对象,只会出现在事件机制的目标阶段,即 "谁触发了事件,谁就是 target "。 currentTarget 是绑定事件的对象。

# 事件冒泡中 ​this 和 event.target 的区别?

js 中事件是会冒泡的,所以 this 是可以变化的,但 event.target 不会变化,它永远是直接接受事件的目标 DOM 元素;

# onchange 是怎么触发的?

当 input 捕获到焦点后,系统储存当前值,当 input 焦点离开后,判断当前值与之前存储的值是否不等,如果为 true 则触发 onchange 事件。非 ie 敲回车也可以实现触发

# 事件、IE 与火狐的事件机制有什么区别? 如何阻止冒泡?

  1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
  2. 事件处理机制:IE 是事件冒泡、firefox 同时支持两种事件模型,也就是:捕获型事件和冒泡型事件。;
  3. ev.stopPropagation();注意旧 ie 的方法 ev.cancelBubble = true;

# 事件概念

# 关于 setTimeOut、setImmediate、process.nextTick()的比较

# setTimeout()

将事件插入到了事件队列,必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。 当主线程时间执行过长,无法保证回调会在事件指定的时间执行。 浏览器端每次 setTimeout 会有 4ms 的延迟,当连续执行多个 setTimeout,有可能会阻塞进程,造成性能问题。

# setImmediate()

事件插入到事件队列尾部,主线程和事件队列的函数执行完成之后立即执行。和 setTimeout(fn,0)的效果差不多。 服务端 node 提供的方法。浏览器端最新的 api 也有类似实现:window.setImmediate,但支持的浏览器很少。

# process.nextTick()

插入到事件队列尾部,但在下次事件队列之前会执行。也就是说,它指定的任务总是发生在所有异步任务之前,当前主线程的末尾。 大致流程:当前”执行栈”的尾部–>下一次 Event Loop(主线程读取”任务队列”)之前–>触发 process 指定的回调函数。 服务器端 node 提供的办法。用此方法可以用于处于异步延迟的问题。 可以理解为:此次不行,预约下次优先执行。

# 在一个 DOM 上同时绑定两个点击事件:一个用捕获,一个用冒泡。事件会执行几次,先执行冒泡还是捕获?

  • 该 DOM 上的事件如果被触发,会执行两次(执行次数等于绑定次数)
  • 如果该 DOM 是目标元素,则按事件绑定顺序执行,不区分冒泡/捕获
  • 如果该 DOM 是处于事件流中的非目标元素,则先执行捕获,后执行冒泡

# W3C 事件的 target 与 currentTarget 的区别?

  • target 只会出现在事件流的目标阶段
  • currentTarget 可能出现在事件流的任何阶段
  • 当事件流处在目标阶段时,二者的指向相同
  • 当事件流处于捕获或冒泡阶段时:currentTarget 指向当前事件活动的对象(一般为父级)

# 如何派发事件(dispatchEvent)?(如何进行事件广播?)

  • W3C: 使用 dispatchEvent 方法
  • IE: 使用 fireEvent 方法
var fireEvent = function(element, event) {
  if (document.createEventObject) {
    var mockEvent = document.createEventObject();
    return element.fireEvent('on' + event, mockEvent);
  } else {
    var mockEvent = document.createEvent('HTMLEvents');
    mockEvent.initEvent(event, true, true);
    return !element.dispatchEvent(mockEvent);
  }
};

# addEventListener 有哪些参数?

有三个参数,第一个是事件的类型,第二个是事件的回调函数,第三个是一个表示事件是冒泡阶段还是捕获阶段捕获的布尔值,true 表示捕获,false 表示冒泡

  • browser Event

    window.event; // 事件什么时候能够使用 ?