JavaScript 事件

DOM事件

DOM事件的级别

DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理

• 1. DOM0 : element.onclick = function(e) {}
• 2. DOM1 ：该标准中未涉及到事件绑定的相关东西
• 3. DOM2 : element.addEventListener('click', function(e){}, false)， 一个DOM元素可以添加多个事件
• 4. DOM3 : element.addEventListener('keyup', function(e){}, false)，在DOM2标准基础上面增加了新的事件类型：鼠标事件，键盘事件，焦点事件

DOM事件模型

1. 事件捕获：从外向内, window -> document -> body -> button
2. 事件冒泡：从内向外，button -> body -> document -> window

DOM事件流

浏览器为当前的页面与用户进行交互的过程中，点击鼠标后事件如何传入和响应的呢？

捕获阶段：从外部容器开始向内
目标阶段：事件通过捕获到达目标阶段
冒泡阶段：从目标元素再上传到window对象

事件委托

什么事件可以代理？什么事件不可以代理呢？

• 通常支持事件冒泡（Event Bubbling）的事件类型为鼠标事件和键盘事件，例如：mouseover, mouseout, click, keydown, keypress。
• 接口事件(指的是那些不一定与用户操作有关的事件)则通常不支持事件冒泡（Event Bubbling），例如：load, change, submit, focus, blur。

事件对象event的属性方法的差别

事件	IE	DOM
停止冒泡	cancelBubble = true	stopPropagation()
阻止元素默认事件	returnValue = false	preventDefault()
事件目标	srcEelement	target

自定义事件

• 如何给一个按钮绑定一个自己定义的事件呢？

  // 1. 使用Event对象来自定义事件
  // 开始创建一个自己定义的事件对象
  var eve = new Event('customEvent');
  // 使用dom2事件处理的方式来给这个元素绑定一个事件
  var dom = document.documentElement;
  dom.addEventListener('customEvent', function(e) {
    console.log('customEvent called!');
  });
  // 下面的这句话可以在适合的场景中来触发一个自己定义的事件对象
  setTimeout(function(){
    // 在1s之后触发这个事件
    dom.dispatchEvent(eve);
  }, 1000)


  // 2. 使用CustomEvent来实现自定义事件
  var dom = document.documentElement;
  // 使用CustomEvent的方式可以在事件触发的时候传递一个参数，然后通过e.detail 的方式来获取这个参数信息
  var myClick = new CustomEvent('myClick', {detail : {name : 'zhangsan', age : 24}});
  dom.addEventListener('myClick', function(e){
    console.log(e.detail, e.target)
  })
  dom.dispatchEvent(myClick);