web-api 事件对象

WEB前端 waitig 499℃ 百度已收录 0评论

事件对象

事件对象的概述

在触发某个事件的时候,都会产生一个事件对象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;
    }
}

本文由【waitig】发表在等英博客
本文固定链接:web-api 事件对象
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)