javascript基础：事件3事件对象

一、事件对象简介

事件处理三部分组成:对象.事件处理函数=函数。例如:单击文档任意处。

document.onclick = function () {
    alert('Lee');
}; 

click表示一个事件类型,单击。onclick表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。

document表示一个绑定的对象,用于触发某个元素区域。

function()匿名函数是被执行的函数,用于触发后执行。 

除了用匿名函数的方法作为被执行的函数,也可以设置成独立的函数。

document.onclick = box; //直接赋值函数名即可,无须括号
function box() {
    alert('Lee');
} 

当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息 。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

事件对象,我们一般称作为event 对象,这个对象是浏览器通过被执行的函数把这个对象作为参数传递过来的。

input.onclick = function (evt) { //接受 event 对象,名称不一定非要 event
    alert(evt); //MouseEvent ,鼠标事件对象
};

直接接收event对象,是W3C的做法,IE不支持,IE自己定义了一个event对象,直接在window.event获取即可。

input.onclick = function (evt) {
    var e = evt || window.event;
    alert(e);
}; 

二、鼠标事件

鼠标事件是Web上面最常用的一类事件,毕竟鼠标还是最主要的定位设备。那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。 

1、按钮信息

只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发click事件,因此检测按钮的信息并不是必要的。但对于mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮。

event.button == 0;代表主键

event.button == 1;代表中间键

event.button == 2;代表付键

但IE比较特殊，IE的window.event.button返回的数字于W3C的代表意思不同需要做兼容

 

window.onload = function(){
    document.onmousedown = function(evt){
        var num = getButtonValue(evt);
        switch (num){
            case 0:
                alert('点击了鼠标左键');
                break;
            case 1:
                alert('点击了鼠标中键');
                break;
            case 2:
                alert('点击了鼠标右键');
                break;
            default:
                alert('未知按键');
        }
    };
};

//跨浏览器左中右键单击相应
function getButtonValue (evt){
    var e = evt ||window.event;
    if(evt){                //Chrome 浏览器支持 W3C 和 IE
        return e.button;    //要注意判断顺序
    }
    else if(window.event){
        switch (e.button){
            case 1:
                return 0;
            case 4:
                return 1;
            case 2:
                return 2;
        }
    }
}

2、点击位置

document.onclick = function(evt){
        var event= evt || window.event;
        var clientX = event.clientX;//可视区 X 坐标,距离左边框的位置
        var clientY = event.clientY;//可视区 Y 坐标,距离上边框的位置
        alert(clientX + '|' + clientY);
        var screenX = event.screenX;//屏幕区 X 坐标,距离左屏幕的位置
        var screenY = event.screenY;//屏幕区 Y 坐标,距离上屏幕的位置
        alert(screenX + '|' + screenY);
};

3、修改键

有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为 :Shfit、Ctrl、Alt和Meat(Windows中就是Windows键,苹果机中是Cmd键),它们经常被用来修改鼠标事件和行为,所以叫修改键。 

document.onclick = function(evt){
        var e = evt || window.event;
        e.altKey;//判断是否配合鼠标按了alt键 返回false或true；
        e.ctrlKey;//判断是否配合鼠标按了ctrl键 返回false或true；
        e.shiftKey;//判断是否配合鼠标按了shift键 返回false或true；
        e.metaKey;//判断是否配合鼠标按了cmd（mac电脑）或window（window电脑）键 返回false或true；
    };

按下多个修改键的处理方法：

function getKey(evt) {
    var e = evt || window.event;//拿到事件对象
    var keys = [];//定义一个数组，用来存放修改键。
    if (e.shiftKey) keys.push('shift');
    if (e.ctrlKey) keys.push('ctrl');
    if (e.altKey) keys.push('alt');
    return keys;
}

三、键盘事件

监听键盘的事件处理函数为keydown、keyup、keypress；

keydown：监听键盘的键码，当按下键盘任意键时触发被执行函数，返回事件对象。

keyup    ：监听键盘的键码，当按下键盘任意键弹起时触发被执行函数，返回事件对象。

keydown和keyup返回的事件对象event（非IE，IE为window.event），event 对象的 keyCode 属性中会包 一个代码,与键盘上一个特定的键对应。对数字字母字符集,keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同。字母中大小写不影响。（也就是小写字母和大写字母返回的都是小写字母对应的ascii码）；

keypress：监听键盘的字符编码，当按下键盘上的字符编码时触发被执行函数，返回事件对象。

keypress返回的事件对象event非IE，IE为window.event）， event 对象都支持一个 charCode 属性,这个属性只有在发生 keypress 事件时才有值,而且这个值是按下的那个键所代表字符的 ASCII 编码。此时的 keyCode 通常等于 0 或者也可能等于所按键的编码。

由于不同的浏览器返回的这两个属性有差异，可自行测试。这里给出兼容代码，因为常用的也就是字符编码，所以兼容代码没有考虑字符编码以外的键码。

 

//只考虑字符编码的兼容方法
function getCharCode (evt){
    var event = evt || window.event;
    var e = evt || window.event;
    if (typeof e.charCode == 'number') {
        return e.charCode;
    }
    else {
        return e.keyCode;
    }

}

window.onload = function(){
    document.onkeypress = function(evt){
        var asc = getCharCode(evt);
        var char = String.fromCharCode(asc);
        alert(char);//区分了数字、字母的大小写
    };
};

四.W3C 与 IE

在标准的 DOM 事件中,event 对象包含的是与特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。 

一个绑定对象可以有多个不同监测事件。比如同一个绑定对象的单击事件和双击事件

不同的监测事件返回不同的事件对象。

不同的事件对象有不同的属性和方法。

window.onload = function(){
    //绑定对象为document
    //监听事件为click
    //事件对象为evt
    //对象的属性为target，target表示被单击的对象
    document.onclick = function(evt){
        var target = evt.target;
        var name = target.tagName;
        alert(name);
    };
};//监听在document对象上的click事件返回的evt事件对象包含了target属性。

事件流(事件流就是事件传递)

事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获。

事件冒泡,是从里往外逐个触发。

事件捕获,是从外往里逐个触发。

那么现代的浏览器默认情况下都是冒泡模型,而捕获模式则是早期的 Netscape 默认情况。

而现在的浏览器要使用 DOM2 级模型的事件绑定机制才能手动定义事件流模式。 

document.onclick = function () {
    alert('我是 document');
};
document.documentElement.onclick = function () {
    alert('我是 html');
};
document.body.onclick = function () {
    alert('我是 body');
};
document.getElementById('box').onclick = function () {
    alert('我是 div');
};
document.getElementsByTagName('input')[0].onclick = function () {
    alert('我是 input');
};

在阻止冒泡的过程中,W3C 和 IE 采用的不同的方法,那么我们必须做一下兼容。

function stopPro(evt) {
    var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation();
}