JavaScript的事件

事件的组成

1. 示例代码

       obox.onclick = function(){
           console.log("123")
       }
   

2. 组成
   • 事件源 绑定事件的元素 obox
   • 绑定事件的方式 赋值式
   • 事件类型 click
   • 赋值 = 赋值式绑定的标志
   • 数件处理函数 function(){…},触发指定行为时要做的事情
   • 事件目标 触发事件的元素
   • 隐藏信息 事件对象
     • 记录事件发生时产生的信息
     • 默认隐藏，需要手动获取

---

获取事件对象

1. 通过形参获取

       obox.onclick = function(a){
           console.log(a)
       }
   

2. 通过window获取
   • window.event
   • 兼容低版本IE
3. 兼容写法
   • var e = a || window.event
4. 事件对象的子对象
   • 相对于当前触发事件的元素的点击位置
     • .offsetX .offsetY
   • 相对于浏览器可视区域的点击位置
     • .clientX .clientY
   • 相对于页面的坐标
     • .pageX .pageY
   • 相对于显示器的坐标
     • .screenX .screenY

---

键盘事件

1. 键盘事件只能被获取焦点的元素触发
   • 主动失去焦点 .blur()
2. 通过事件对象去找键盘事件按下的键是什么
   • 事件对象.keyCode
   • 输出内容是ASCII码
3. 特殊按键的状态
   • .ctrlKey
   • .shiftKey
   • .altKey
   • .metaKey win键，IE不支持

---

事件流

在js中，事件并不是绑定了才存在，所有的事件都是已经被系统绑定好的，只是没有事件处理函数

1. 事件冒泡
   • 一个元素的事件被触发后，会依次向上触发所有父元素的相同事件 从里往外触发
   • 事件冒泡是一种现象，根据需要有时候需要阻止事件冒泡
   • 阻止事件冒泡
     • 事件所在的对象.event里的cancelBubble属性,属性值为true时取消冒泡兼容IE
     • 所在对象.stopPropagation()
     • 兼容问题的解决办法

         if(e.stopPropagation){
             e.stopPropagation();
         }else{
             e.cancelBubble = true;
         }
     

     利用了if内对undefined的隐式转换（false）
2. 事件捕获
   • 一个元素的事件被触发后，会从根元素依次向内触发所有关联子元素的相同事件 从外向内触发
   • 不会主动触发，IE浏览器没有捕获
   • 如果要实现事件捕获，需要配合监听式绑定 IE不支持
3. 事件流的执行顺序
   捕获–>事件目标–>冒泡

---

绑定事件的方式

赋值式绑定

• • DOM0级绑定
  • 绑定方式
    • 元素.onclick = function(){}
    • 一个元素相同事件无法绑定多个事件处理函数，因为赋值会覆盖
  • 删除方式
    • 利用赋值覆盖
    • 元素.onclick = null;

监听式绑定

• • DOM2级绑定
  • 绑定方式
    • 元素.addEventListener(1,2,3)
      • 参数1 “事件类型”
      • 参数2 事件执行函数
      • 参数3 布尔值，true为捕获，false为冒泡
    • 可以重复绑定，不会覆盖
  • 删除事件处理函数的方法
    • 元素.removeEventListener(1,2,3)
      • 参数1 要删除的事件类型
      • 参数2 要删除的事件处理函数
      • 参数3 布尔值
    • 需要找到同一个函数才能删除，可以给函数起名字方便删除
  • IE不支持

---

默认事件

• • 没有主动写，系统默认存在的事件
  • 阻止方式
    • e.returnValue = false
    • e.preventDefault()

---

事件委托

• • 将多个子元素的相同事件利用事件冒泡委托给父元素，通过事件目标找到真正触发事件的子元素，完成事件处理的过程，叫做事件委托
  • 事件委托的好处
    • 节省内存
    • 可以给页面上暂时不存在的元素绑定事件(给动态的HTML绑定)

---

事件源和事件目标

• • 事件源 绑定事件的元素 通过this拿到
  • 事件目标 触发事件的元素 可以通过事件对象拿到
    • var target = e.target || e.srcElement