事件

 

了解事件

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

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

事件三要素

      

  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 与网页结合的主要方式。虽然基本的事件都有规范定义，但很多浏览器在规范之外实现了自己专有的事件,大家要自己慢慢理解。好了今天就到这里吧 这也是记录我写作的第二十天，慢慢坚持整理自己的思路一边后面更好的帮助大家理解js。