javascript事件详解

注册、移除事件的三种方式

var box=document.getElementById('box');
//1
box.onclick=function(){
    console.log("点击后执行");
};
box.onclick=null;
//2
box.addEventListener('click',eventCode,false);
box.removeEventListener('click',eventCode,false);

//3
box.attachEvent('onclick',eventCode);
box.detachEvent('onclick',eventCode);

function eventCode(){
    console.log('点击后执行');
}

btn.onclick=function(){
    console.log("111");
};
btn.onclick=function(){
    console.log("222");
};
//只会执行其中一个，这种注册事件的方法不能给同一个元素注册多个事件处理函数。

//addEventListener(是w3c定义的标准方法，但是有兼容性问题，ie9以后才支持)
//优点：可以给同一个元素注册多个事件处理函数
var btn=document.getElementById('btn')
//三个参数含义 事件名 时间处理函数 时间冒泡/事件捕获
btn.addEventListener('click',function(){
    alert('abc')
},false);
btn.addEventListener('click',function(){
    alert('hello')
},false);

封装处理注册事件兼容性问题的函数

function addEventListener(element,eventName,callback){
    if(element.addEventListener){
        //ie9+
        element.addEventListener(eventName,callback,false);
    }else if(element.attachEvent){
        //ie9以前
        element.attachEvent('on'+eventName,callback);
    }else{
        element['on'+eventName]=callback;
    }
}

只执行一次就移除事件的写法
1.

btn.onclick=function(){
    alert("hello");
    this.onclick=null;
}

2.

btn.addEventListener('click',callback,false);
function btnClick(){
    alert('hello');
    //移除事件
    this.removeEventListener('click',btnClick,false);
}

3.

//ie9以前
btn.attachEvent('onclick',btnClick);
function btnClick(){
    alert("hello");
    //移除事件
    btn.detachEvent('onclick',btnClick);
}

封装处理移除事件兼容性问题的函数

function removeEventListener(element,eventName,callback){
    if(element.removeEventListener){
        element.removeEventListener(eventName,callback,false);
    }else if(element.detachEvent){
        element.detachEvent('on'+eventName,callback);
    }else{
        element['on'+eventName]=null;
    }
}

事件冒泡

界面与点击box3时的打印结果

• js事件的三个阶段分别为：
  
  • 捕获：捕获到的其他同样有事件处理函数的对象
  • 目标：点击并执行处理函数的当前对象
  • 冒泡：当点击的对象执行完事件处理函数以后再往父级冒泡（传递）
    第三个参数为true是事件捕获，false事件冒泡

事件冒泡的应用之事件委托

关于鼠标事件参数e

打印结果：

e.type获取事件名

处理e的兼容性问题

鼠标移动事件之跟着鼠标飞的图片

但当页面有滚动条时，使用pageX pageY

然而pageX pageY在ie9以下存在兼容性问题，这里使用另一种方法
首先，封装获取页面滚动出去的距离的函数：

则鼠标在页面中的位置等于鼠标在可视区域中的位置加上滚动出去的距离

再次封装：

调用：

事件对象

阻止事件冒泡


取消默认行为

获取鼠标在div盒子中的位置

键盘事件

• 常用的键盘事件
  
  
• 回车切换