深入了解JavaScript事件绑定：实现高效可靠的事件处理-灵析社区

Ned

事件绑定方式

什么是事件

  • 一个事件由什么东西组成
  • 触发谁的事件：事件源
  • 触发什么事件：事件类型
  • 触发以后做什么：事件处理函数
var oDiv = document.querySelector('div')
​
oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数
  • 我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面
var oDiv = document.querySelector('div')
​
oDiv.onclick = function () {
  console.log('你点击了 div')
}
  • 当我们点击 div 的时候，就会执行事件处理函数内部的代码每点击一次，就会执行一次事件处理函数

DOM0级 事件

1.常用事件

  1. onblur : 失焦事件
  2. onfocus : 得焦事件
  3. onchange : 内容改变事件

2.鼠标常用事件

  1. onclick : 点击事件
  2. ondblclick : 双击事件
  3. onmousedown : 鼠标按下事件
  4. onmouseup : 鼠标抬起事件
  5. onmouseenter : 鼠标移入事件
  6. onmouseleave : 鼠标移出事件
  7. onmouseover : 鼠标移入事件
  8. onmouseout ： 鼠标移出事件
  9. onmousemove ： 鼠标移动事件

3.键盘常用事件

  1. onkeydown : 键盘按下
  2. onkeyup : 键盘抬起
  3. onkeypress : 键盘按过（按下时触发）

4.其它事件

  1. onload : 加载成功事件
  2. error : 加载失败事件
  3. resize : 大小改变事件
  <script>        
//1. 获取元素对象
        var txt = document.querySelector('input');
        var box = document.querySelector('#box');
        //2. 添加事件
        txt.onfocus = function(){
            this.value = ''; //清空当前文本框
        }
        txt.onblur = function(){
            alert('失焦后：' + this.value);
        }
 
        txt.onblur = null;
        txt.onchange = function(){
            alert('改变后：' + this.value);
        }
        txt.oninput = function(){
            box.innerText = this.value;
        }
        box.onclick = function(){
            console.log('点击了div');
        }
        box.ondblclick = function(){
            console.log('双击了div')
        }
        box.onmousedown = function(){
            console.log('鼠标在div上按下');
        }
        box.onmouseup = function(){
            console.log('鼠标在div上抬起');
        }
        box.onmouseover = function(){
            console.log('over:','鼠标移入了div中');
        }
        box.onmouseout = function(){
            console.log('out:' + '鼠标移出了div');
        }
        box.onmouseenter = function(){
            console.log('enter:' + '鼠标移入了div');
        }
        box.onmouseleave = function(){
            console.log('leave:鼠标移出了div');
        }
        box.onmousemove = function(){
            console.log('鼠标在div上移动');
        }
        document.onkeydown = function(){
            console.log('按下键盘');
        }
        document.onkeyup = function(){
            console.log('抬起键盘')
        }
        document.onkeypress = function(){
            console.log('按过键盘');
        }
    </script>

DOM0级事件绑定

ele.onclick = function(){}

DOM2级 事件绑定

标准 浏览器： ele.addEventListener('click',function(){},false)IE 浏览器 ：ele.attachEvent('onclick',function(){})
  <script>
        //1. 获取元素
        var box = document.querySelector('#box');
        function fn1(){
            alert('开灯');
        }
        function fn2(){
            alert('开空调');
        }
        function fn3(){
            alert('开热水器');
        }
        2. 绑定事件
        box.onclick = fn1;
        box.onclick = fn2;
        box.onclick = fn3;
        标准浏览器添加事件监听器
        1. 第一个参数：事件类型
        2. 第二个参数：事件处理程序
        3. 第三个参数：是否进行捕获  false(默认) : 冒泡    true(捕获)
        box.addEventListener('click',fn1,false);
        box.addEventListener('click',fn2,false);
        box.addEventListener('click',fn3,false);
        IE浏览器添加事件监听器
        1. 第一个参数：事件驱动
        2. 第二个参数：事件处理程序
        box.attachEvent('onclick',fn1);
        box.attachEvent('onclick',fn2);
        box.attachEvent('onclick',fn3);
        兼容
        function addEventListener(dom,type,fn,bool){
            //1. 处理默认参数的问题
            bool = bool || false;
            //2. 是否支持addEventListener方法
            if(dom.addEventListener){
                dom.addEventListener(type,fn,bool);
            }else if(dom.attachEvent){
                dom.attachEvent('on' + type,fn);
            }
        }
 
        addEventListener(box,'click',fn1);
        addEventListener(box,'click',fn2);
        addEventListener(box,'click',fn3);
 
 
        //标准浏览器移除事件监听器
        // box.removeEventListener('click',fn2,false);
        //IE浏览器移除事件监听器
        // box.detachEvent('onclick',fn2);
        function removeEventListener(dom,type,fn,bool){
            //1. 处理默认参数的问题
            bool = bool || false;
            //2. 是否支持addEventListener方法
            if(dom.removeEventListener){
                dom.removeEventListener(type,fn,bool);
            }else if(dom.detachEvent){
                dom.detachEvent('on' + type,fn);
            }
        }
        removeEventListener(box,'click',fn2);
    </script>
//添加事件监听器
//标准浏览器
//第一个参数：事件类型 （名词）
//第二个参数：事件处理程序
//第三个参数：是否进行事件捕获？ false(冒泡-默认值) true(捕获)
// o_btn.addEventListener('click',fn1,false);
// o_btn.addEventListener('click',fn2,false);
// o_btn.addEventListener('click',fn3,false);
//IE浏览器
第一个参数:事件驱动
第二个参数:事件处理程序
​
// o_btn.attachEvent('onclick',fn1);
// o_btn.attachEvent('onclick',fn2);
// o_btn.attachEvent('onclick',fn3);
//兼容
function addEventListener(obj,type,fn,bool){
    //初始化bool参数
    bool = bool || false;
    if(obj.addEventListener){
        obj.addEventListener(type,fn,bool);
    }else if(obj.attachEvent){
        obj.attachEvent('on' + type,fn);
    }
}

事件解绑方式

DOM0级事件解绑

ele.onclick = null;

DOM2级事件解绑

标准 浏览器： ele.removeEventListener('click',function(){},false)
IE 浏览器 ：ele.detachEvent('onclick',function(){})
//移除事件监听
//标准浏览器
// o_btn.removeEventListener('click',fn2,false);
//IE浏览器
// o_btn.detachEvent('onclick',fn2);
//兼容
function removeEventListener(obj,type,fn,bool){
    //初始化bool参数
    bool = bool || false;
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,bool);
    }else if(obj.detachEvent){
        obj.detachEvent('on' + type,fn);
    }
}

事件对象的认识

什么是事件对象？（类似于飞机上的黑匣子、汽车上的行车记录仪、教室中的摄像头)

当绑定事件的对象，在触发事件时，所发生的事情记录在一个地方，而这个地方称为事件对象。

如何获取事件对象？

  1. 标准浏览器获取事件对象的方式： 触发事件后，会自动给事件处理程序传递一个参数，这个参数就是事件对象。
  2. IE浏览器获取事件对象的方式： window.event
  3. 兼容：
  4. arguments : 内置的对象,是一个伪数组,是实参副本.
function getEvent(){
    return arguments[0] || window.event;
}

事件对象内鼠标相关信息

鼠标的相对坐标值：（鼠标相对于所在对象上的坐标值）

  1. event.offsetX / event.offsetY

鼠标的可视区坐标值：（当前鼠标触发点距离当前窗口左上角的X/Y坐标）

  1. event.clientX / event.clientY

鼠标的绝对坐标值：（当前鼠标触发点距离BODY左上角的X/Y坐标(IE9以下没有这两个属性)

//兼容处理：
event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)

事件对象内键盘相关信息

  1. onkeydown/onkeyup : event.keyCode
监听整个键盘，其中字母键只返回大写的编码值。
  1. onkeypress : event.keyCode || event.charCode || event.which
监听编辑键区，字母键返回大小的编码值。 低版本浏览器中有可能监听功能键区、回车键出现过10 兼容：
//7. 获取键盘编码值的兼容
function getKeyCode(evt){
    var e = evt || window.event;
    return e.keyCode || e.charCode || e.which;
}

altKey / shiftKey / ctrlKey / metakey

  1. event.metaKey : 返回一个布尔值标识meta键(windows键)是否被按键并被保持。
返回true表示meta键按下并保持
返回false表示没有满足meta键按下并保持的情况。

阅读量：523

点赞量：0

收藏量:0