事件持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情了解事件

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

了解事件

我们提前和浏览器约定好一些行为

当用户在浏览器触发这些行为的时候, 有一个事件处理函数执行

事件三要素

1. 事件源: 在谁的身上绑定事件

2. 事件类型: 什么事件

3. 事件处理函数: 当行为发生的时候, 执行哪一个函数

//举例
div.onclick = function () {}；
div: 事件源(绑定在 div 身上的事件)； 
click: 事件类型；
function () {}: 事件处理函数, 当行为发生的时候, 执行这个函数；

事件绑定分类

1. dom0 级事件

事件源.onclick = function () {}

2. dom2 级事件

2-1. addEventListener()

标准浏览器使用

使用方法: 事件源.addEventListener('事件类型', 事件处理函数)

可以同时给一个事件类型绑定多个事件处理函数

多个事件处理函数的时候, 顺序绑定顺序执行

至少两个参数

2-2. attachEvent()

IE 低版本使用

使用方法: 事件源.attachEvent('on 事件类型', 事件处理函数)

可以同时给一个事件类型绑定多个事件处理函数

多个事件处理函数的时候, 顺序绑定倒叙执行

只有两个参数

这里大家一定要区别一下参数的个数问题；

 //CSS样式部分 <style>  
 div {    
 width: 200px;    
 height: 200px;   
 background-color: pink;  
 } 
 </style>

第一件事就是要先获取元素

var div = document.getElementById('box')；

 //dom0级事件  
 div.onclick = function ()  
 { console.log('我被点击了');  
 }// 2-1. addEventListener()  
 div.addEventListener('click', function () 
 {       console.log('你好 世界')  
 })    // 2-2. attachEvent() 
 div.attachEvent('onclick', function ()
 {       console.log('你好 世界')     })

事件的解绑

1. 解绑 dom0 级事件

赋值的行为执行过一次后，再次给他赋值为 null

2. 解绑 dom2 级事件

2-1. removeEventListener('事件类型', 要解绑的事件处理函数)

2-2. detachEvent('on 事件类型', 要解绑的事件处理函数)

注意: 如果你想解绑事件, 那么在你绑定事件的时候, 一定要把函数单独书写

写成一个具名函数的形式, 以函数名的形式绑定事件处理函数

3.绑定事件

向一个事件类型身上绑定多个事件处理函数的时候

click: [ 事件处理函数 1, 事件处理函数 2, 事件处理函数 3, ... ]

当行为触发的时候, 找到对应的这个数组, 循环遍历, 依次执行

当你解绑的时候, 就会循环遍历, 依次去比较, 找到一个一样的, splice()

div.addEventListener('click', function b() 
{ console.log('hello world') })    
btn.onclick = function () {     
// 给 div 解绑 dom2级 事件    
// 在解绑的时候, 你传递进去了一个 叫做 a 的函数  
// 就要找到 div 身上有没有绑定一个叫做 a 的函数, 发现没有, 解绑不掉       div.removeEventListener('click', function a()
{ console.log('hello world') })     
console.log('执行完毕解绑代码')     }

封装事件绑定和解绑

1. 为什么要封装 ?

一是考虑到兼容问题，还有使用起来更方便

2. 封装需要几个参数 ?

事件源, 事件类型, 事件处理函数

手动抛出异常

使用方法: throw new Error('错误信息')

用代码的方式在控制台报错

一旦代码执行, 会直接中断程序

开始封装 1. 参数验证  
1-1. ele 必传, 如果没有传递, 直接报错  
1-2. ele 需要是一个 元素节点      
节点类型, nodeType: 1     
2. 兼容处理    
2-1. if ()
{}else {
}

  //兼容处理   
  div.addEventListener()   
  div.attachEvent()
  //只要 元素 身上有这个函数, 就可以执行 
  //   没有这个函数就去换另一个函数试试     
  if (ele.addEventListener) {    
  ele.addEventListener(type, handler)   
  } else if (ele.attachEvent) {  
  ele.attachEvent('on' + type, handler)  
  } else {   
  //对象操作语法 - 点语法    
  ele.onclick = handler     
  //对象操作语法 - 数组关联语法  
  ele['onclick'] = handler    
  ele['on' + type] = handler      
  }       
  }

事件对象

当一个事件触发的时候, 对本次事件的描述

例子: 键盘事件

当你在按下键盘的时候触发

需要记录一些信息

按下的是哪一个按键

你按下的是不是组合按键

如何获取事件对象

标准浏览器

在事件处理函数上接收一个形参

事件触发时, 浏览器自动传递实参

IE 低版本浏览器

不需要接收形参

直接使用 window.event

标准浏览器下也可以使用

书写一个兼容方式

=> e = e || window.event

// 0. 获取元素    
var div = document.getElementById('box')
    // 1. 绑定事件     
    div.onclick = function (e) { 
    console.log(e)       
    console.log(window.event)    
    e = e || window.event   
    console.log(e)     }  
    div.addEventListener('click', function (e)
    {       console.log(e)     
    })   
    on(div, 'click', function (e) {  
    // 处理事件对象兼容     
    e = e || window.event  
    console.log(e)   
    })

事件是 JavaScript 与网页结合的主要方式。虽然基本的事件都有规范定义，但很多浏览器在规范之外实现了自己专有的事件,大家要自己慢慢理解。好了今天就到这里吧陆陆续续更新了近20天，后面我会慢慢坚持整理自己的思路一边后面更好的帮助大家理解 js。

事件