JavaScript-高级篇之事件

1. 什么是事件
2. 掌握事件流
3. 掌握DOM事件流与IE事件处理程序
4. 掌握跨浏览器的事件处理程序
5. 掌握event对象的常用属性及方法
6. 掌握常用的事件类型

事件

事件是可以被JavaScript侦测到的行为,通俗的讲就是当用户与Web页面进行某些交互时,解释器就会创建响应的event对象以描述事件信息

事件定义

一共有三种方式:

1. 直接在HTML中定义元素的事件相关属性
   缺点:违反了内容与行为相分离的原则,应尽可能少用

<button onclick=alert('hello')>按钮</button>

2. DOM0级事件,在JS中为元素的事件相关属性赋值
   此语法实现了内容与行为相分离,但元素扔只能绑定一个监听函数

document.getElementById('btn').onclick = function(){
    //...
}
document.body.onload = init;
function init(){
    //...
}

3. DOM2级事件,高级事件处理方式,一个事件可以绑定多个监听函数
   此语法可以为一个元素绑定多个监听函数,但需要注意浏览器兼容性问题

参数 : 事件类型 事件句柄 false冒泡(默认false)/true捕获

btn.addEventListener('click',function(){     
    //...
},false) 

btn.addEventListener('click',function(){},flase);   //DOM
btn.attachEvent('onclick',function(){});    //IE
document.body.addEventListener('load',init);
document.body.attachEvent('onload',init);
function init(){
    //...
}

1.html中定义,html中写js代码,强耦合,不利于复用代码
2.DOM0级事件,事件对象的属性添加绑定事件,松耦合,缺点是有且只有一个事件句柄
3.DOM2级事件,通过addEventListener函数绑定事件,松耦合,绑定多个事件,事件捕获和事件冒泡

事件解绑

移除addEventListener()方法添加的事件句柄

element.removeEventListener(event,function,useCapture)

参数:
event : 必须,字符串,要移除的事件名称
function : 必须,指定要移除的函数
useCapture : 可选,布尔值,指定移除事件句柄的阶段

var fun = function(){   //解绑成功需要将事件句柄定义
    //...
}
btn.removeEventListener('click',fun,false)   

解绑成功要保证参数一致

IE事件流

添加事件

用于IE8以及以下的浏览器
attachEvent()
语法 : element.attachEvent(event,function)
功能 : 用于向指定元素添加事件句柄
参数 : event事件名,必须加'on'前缀
function绑定事件的函数

移除事件

detachEvent()
同上

跨浏览器事件处理程序

事件句柄中,IE中的事件句柄 this是指向window

<button id="mybtn">点击我</button>
<script>
    //兼容所有浏览器
    //addEventListener attachEvent
    var eventUtil = {
        addHandler : function(element,type,handler){
            //绑定事件
            //chrome,firefox,ie9等
            //ie8及以下浏览器
            if (element.addEventListener) {
                element.addEventListener(type,handler,false);
            }else if (element.attachEvent) {
                element.attachEvent('on'+type,handler);
            }else{
                element['on'+type] = null;
            }
        },
        removeHandler : function(element,type,handler){
            //移除事件
            if (element.removeEventListener) {
                element.removeEventListener(type,handler,false);
            }else if (element.detachEvent) {
                element.detachEvent('on'+type,handler);
            }else{
                element['on'+type] = null
            }
        }
    }
    var btn = document.getElementById('mybtn');
    var handler = function(){
        alert('clicked');
    }
    eventUtil.addHandler(btn,'click',handler);
    // eventUtil.removeHandler(btn,'click',handler);
</script>

事件冒泡和事件捕获

事件周期

解释器创建一个event对象后,会按如下过程将其在html元素间进行传播:
第一阶段 : 事件捕获,事件对象沿DOM树向下传播
第二阶段 : 目标触发,运行事件监听函数
第三阶段 : 事件冒泡,事件沿DOM树向上传播

IE的事件模型中没有事件捕获阶段

事件周期

<div id="parent">
    <div id="child">click son</div>     
</div>
<script>
    //事件冒泡 
    document.getElementById('parent').addEventListener('click',function(e){
        alert('parent事件触发,'+this.id)    
    },false);
    document.getElementById('child').addEventListener('click',function(e){
        alert('child事件触发,'+this.id)
    },false);
    //点击后 child事件触发 parent事件触发

    //事件捕获
    document.getElementById('parent').addEventListener('click',function(e){
        alert('parent事件触发,'+this.id)    
    },true);
    document.getElementById('child').addEventListener('click',function(e){
        alert('child事件触发,'+this.id)
    },true);
    //点击后 parent事件触发 child事件触发
</script>

事件委托(原理是事件冒泡)

<div id="parent">
    <div id="child">click son</div>     
</div>
<ul id="ul">
    <li class="theli">1</li>
    <li class="theli2">2</li>
    <li class="theli3">3</li>
    <li class="theli4">4</li>
    <li class="theli5">5</li>
</ul>
<script>
    var ul = document.getElementById('ul');
    ul.addEventListener('click',function(){
        alert(event.target.className)
    })
</script>

event

event对象常用属性和方法

• type : 事件的类型
• srcElement/target : 事件源,就是发生事件的元素;
• cancelBubble : 布尔属性,设为true的时候,将停止事件进一步气泡到包容层次的元素
  (e.cancelBubble = true相当于e.stopPropagation())
• returnValue : 布尔属性,设置为false的时候可以阻止浏览器执行默认的事件动作
  (e.returnValue = false相当于e.preventDefault())
• event.clientY,pageY,screenY : 浏览器顶部底边到鼠标位置(不包括滚动轴的距离) 浏览器顶部底边到鼠标位置(包括滚动轴) 屏幕顶部底边到鼠标位置

var btn = document.getElementById('child');
btn.addEventListener('click',function(e){
    alert(e.type)   //click
})

var parent = document.getElementById('parent');
parent.addEventListener('click',function(event){
    console.log(event.target);  //点击谁谁就是target
    console.log(event.currentTarget);   //事件绑定在谁身上,就指向谁
})

*srcElement,cancelBubble,returnValue是IE的属性 *

事件类型

• onclick : 点击
• onfocus : 元素获得焦点
• onblur : 元素失去焦点
• onmouseover : 鼠标移到某元素纸上
• onmouseout : 鼠标从某元素移开
• onmousedown : 鼠标按钮被按下
• onmousemove : 鼠标被移动
• onmouseup : 鼠标按键被松开

UI事件

1. load : 当页面完全加载后在window上面触发

EventUtil.addHandler(window,'load',function(e){
    alert('loaded');
});
//图片预加载
var image = new Image();
EventUtil.addHandler(image,'load',function(event){
    alert('image loaded');
})

2. resize : 窗口大小发生变化时触发
3. scroll : 窗口发生滚动时触发

焦点事件

1. blur : 元素失去焦点的时候触发
2. focus : 元素获得焦点的时候触发(不支持冒泡)
3. focusin : 元素获得焦点的时候触发,支持事件浏览器是IE5.5...支持冒泡
4. focusout : 元素失去焦点的时候触发,支持事件浏览器是IE5.5...支持冒泡

鼠标事件

1. click : 点击
2. dblclick : 双击
3. mousedown : 鼠标按下时触发的事件
4. mouseup : 鼠标松开时触发的事件
5. mousemove : 鼠标移动时触发的事件
6. mouseout : 进入目标元素触发(目标元素与其子元素都会执行)
7. mouseover : 离开目标元素触发(目标元素与其子元素都会执行)
8. mouseenter : 只能进入目标元素触发
9. mouseleave : 只能离开目标元素触发

键盘事件

1. keydown

var myText = document.getElementById('myText');
//键码,任意键触发
EventUtil.addHandler(myText,'keydown',function(event){
    console.log(event.keyCode);
})

2. keyup
3. keypress : 按下字符键
4. textInput : 输入信息时触发

EventUtil.addHandler(myText,'textInput',function(event){
    console.log(event.data);
})

5. DOMContentLoaded : 在DOM树之后触发,快于load

移动端事件类型

1. 手指触摸屏幕时触发

EventUtil.addHandler(myBtn,'touchstart',function(event){
    console.log('当前触摸屏幕的触摸点数组' + event.touches);
    console.log('数组中只包含引起事件的触摸点信息' + event.changedTouches);
    console.log('只包含放在元素上的触摸信息' + event.targetTouches);
})

2. 手指在屏幕上滑动时触发

EventUtil.addHandler(myBtn,'touchmove',function(event){
    console.log(123456789);
})

3. 手指从屏幕上移开时触发

EventUtil.addHandler(myBtn,'touchend',function(event){
    console.log(123456789);
})