web-api 事件对象

事件对象

事件对象的概述

在触发某个事件的时候，都会产生一个事件对象Event，这个对象中包含所有与事件相关的一些信息，包括触发事件的元素，事件的类型以及其他与事件相关的信息。

鼠标事件触发时，事件对象中会包含鼠标的位置信息。

键盘事件触发时，事件对象中会包含按下的键相关的信息。

每一个事件在触发时，都会产生一个事件对象。
你见或者不见，我就在那里，不悲不喜。
你爱或者不爱，爱就在那里，不增不减。
你用或者不用，我都会给你，不离不弃。 

获取事件对象

既然事件对象中存储了这么多的信息，我们首先需要做的就是获取到这个事件对象。获取事件对象的时候，存在浏览器的兼容问题。

对于现代浏览器，获取事件对象非常的简单，只需要在注册事件的时候，指定一个形参即可。这个形参就是我们想要获取到的事件对象。

btn.onclick = function(event){
    //event就是事件对象，里面包含了事件触发时的一些信息。
    console.log(event);
}

对于IE678来说，获取事件对象则是另一种方式，在事件里面，通过window.event来获取事件对象

btn.onclick = function(){
    //IE678通过window.event获取事件对象
    var event = window.event;
    console.log(event);
}

兼容性封装

btn.onclick = function(event){
    //只要用到了事件对象，就要记得处理浏览器兼容性
    event = event || window.event;
}

事件对象的常用属性

事件对象中有很多很多的属性，但是很多属性并不常用。我们经常用到的是鼠标位置信息 和键盘码 相关的信息。

记录了鼠标位置信息的相关属性

screenX与screenY：光标相对于屏幕左上角的水平位置与垂直位置。
clientX与clientY：光标相对于可视区左上角的水平位置和垂直位置。
pageX与pageY：光标相对于网页（文档document）左上角的水平位置与垂直位置（推荐使用）

记录了键盘码的属性

event.keyCode:键盘按下的那个键的键盘码

pageX与pageY的兼容性

在鼠标事件中，记录鼠标位置信息的属性有很多，使用最多的还是pageX与pageY这两个属性，但是pageX和pageY存在浏览器兼容性问题。

在现代浏览器中，直接通过事件对象就可以获得pageX与pageY

document.onclick = function (event) {
    event = event || window.event;
    console.log(event.pageX+"----"+event.pageY);
}

在IE678中，并没有pageX与pageY，但是我们可以通过scrollTop + clientY的方式进行计算来获得。

function getPage(event) {
    return {
        //在IE678中使用document.documentElement.scrollLeft就可以获取到scrollLeft的值
        x:event.pageX || event.clientX + document.documentElement.scrollLeft,
        y:event.pageY || event.clientY + document.documentElement.scrollTop
    }
}

mousemove事件：鼠标移动时会触发这个事件。

document.onmousemove = function(){
    console.log("鼠标移动事件在触发");  
};

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

var spaceX = getPage(event).x - box.offsetLeft;
var spaceY = getPage(event).y - box.offsetTop;

清除选中的文字（不用记）

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

注册事件的两种方式

on+事件名称

onclick、onmouseover这种on+事件名称的方式注册事件几乎所有的浏览器都支持。

注册事件：

box.onclick = function(){
    //事件处理程序    
}

移除事件：

box.onclick = null; 

on+事件名称注册事件的缺点：

同一个元素同一类型的事件，只能注册一个，如果注册了多个，会出现覆盖问题。

注册事件的新方式

addEventListener与removeEventListener

现代浏览器支持的注册事件的新方式，这种方式注册的事件不会出现覆盖问题。

addEventListener的语法

//第一个参数：事件的类型：click mouseover
//第二个参数：函数，监听者，每次点击，这个函数就执行。
//第三个参数：false
addEventListener(type, func, useCapture);

tips：如果想要让你注册的事件能够移除，不能使用匿名函数。

function fn1() {
    alert("hehe");
}
//如果想让注册的事件能移除，不能用匿名函数。
box.addEventListener("click", fn1, false);

removeEventListen的语法

//第一个参数：参数类型
//第二个参数：要移除的那个函数
//第三个参数：false
removeEventListener(type, func, useCapture);

attachEvent与detachEvent

IE678不支持addEventListener与removeEventListen两个方法，但是支持attachEvent与detachEvnet

attachEvent的用法：

//type:事件类型   需要加上on   onclick  onmouseenter
//func:需要执行的那个事件
attachEvent(type, func)

detachEvent的用法

//type:事件类型   需要加上on   onclick  onmouseenter
//func:需要执行的那个事件
detachEvent(type, func)

兼容性封装（了解）

注册事件的新方式的解决了事件覆盖的问题，但是存在浏览器兼容性问题，因此可以进行兼容性封装。

//添加事件
function addEvent(element, type, fn){
    //能力检测
    if(element.addEventListener){
        element.addEventListener(type, fn, false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type, fn);
    }else {
        //如果都不行，那就用on方式
        element["on"+type] = fn;
    }
}


//移除事件
function removeEvent(element, type, fn) {
    if(element.removeEventListener){
        element.removeEventListener(type, fn, false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type, fn);
    }else {
        element["on"+type] = null;
    }
}