JavaScript事件的对象

Posted 2020-08-09



事件的对象

 javascript事件的一个重要方面是它们拥有一些相对一致的特点，可以给我们的开发提供更多的强大功能。最方便和强大的就是事件对象了，它们可以帮你处理鼠标和键盘方面的很多事情，此外我们还可以修改一般事件的捕获或者冒泡流的函数。

1.事件对象

事件处理函数的一个标准特性是以某些方式访问的事件对象包含有关于当前事件的上下文信息。

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

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

<span style="font-family:SimSun;font-size:18px;">//eg:单击文档任何处
 document.onclick = function () {
    alert(this);			//htmlDocument，代表是document
 };

 window.onload = function () {
    document.onclick = box;	//因为box()函数被onclick绑定了，所以里面的this代表document
 };

    box();	//object Window，如果是在全局范围调用box()，那么this代表window

 function box() {
 alert(this);	//HTMLDocument，代表是document
 }

</span>

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

    事件对象，我们一般称作为event对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。那么首先，我们就必须验证一下，在执行函数中有没有传递参数，是否可以得到隐藏的参数。

<span style="font-family:SimSun;font-size:18px;">//是否可以得到隐藏的参数。
 function box() {
        alert(arguments.length);				//获取参数的数量:0
 }

 box();

 document.onclick = function () {  //获取参数的数量:1
     alert(arguments.length);			//如果是事件处理函数绑定的函数，浏览器会默认传递一个参数，这个参数就是event对象
     alert(arguments[0]);				//MouseEvent，鼠标事件对象
 };</span>

this关键字和上下文
通过事件绑定的执行函数是可以得到一个隐藏参数的。说明，浏览器会自动分配一个参数，这个参数其实就是event对象。

比较简单的做法，直接通过接收参数来得到即可

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

<span style="font-family:SimSun;font-size:18px;">//eg:事件兼容IE浏览器
    window.onload = function (){
    
        document.onclick=function(evt){
            var e = evt || window.event;   //W3C || IE
            alert(e);
        };
    };

 //PS:window.event这个属性IE是支持的，Chrome也是支持的，
 //PS:Chrome也是支持W3C的
 //PS:如果说W3C和IE的都支持的话，那么就已W3C为准</span>

<span style="font-family:SimSun;font-size:18px;">
</span>

<pre class="html" name="code"><span style="font-family:SimSun;font-size:18px;">//跨浏览器左中右键单击响应
function getButton(evt){
    var e = evt||window.event;
    if(evt){
        return e.button;
    }else if(window.event){
        switch(e.button){
            case 1:
                return 0;
            case 4:
                return 1;
            case 2:
                return 2;
        }
    }
}
document.onmouseup=function(evt){
    if(getButton(evt)==0){
        alert("you press left button!");
    }else if(getButton(evt)==1){
        alert("you press midle button!");
    }else if(getButton(evt)==2){
        alert("you press right button!");
    }
};</span>

2.鼠标事件

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

<span style="font-family:SimSun;font-size:18px;">//获取可视区及屏幕区的坐标
window.onload = function(){

    document.onclick=function(evt){
        var e = evt || window.event;   //W3C || IE
        alert(e.clientX+','+e.clientY+','+e.screenX+','+e.screenY);
    };
};</span>

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

非IE(W3C)中的button属性

IE中的button属性

在绝大部分情况下，我们最多只使用主次中三个单击键，IE给出的其他组合键一般无法使用上。所以，我们只需要做上这三种兼容即可。

<pre class="html" name="code"><span style="font-family:SimSun;font-size:18px;">//跨浏览器左中右键单击响应
function getButton(evt){
    var e = evt||window.event;
    if(evt){
        return e.button;
    }else if(window.event){
        switch(e.button){
            case 1:
                return 0;
            case 4:
                return 1;
            case 2:
                return 2;
        }
    }
}
document.onmouseup=function(evt){
    if(getButton(evt)==0){
        alert("you press left button!");
    }else if(getButton(evt)==1){
        alert("you press midle button!");
    }else if(getButton(evt)==2){
        alert("you press right button!");
    }
};
</span><span style="font-family:SimSun;font-size:18px;">
</span>

2.可视区及屏幕坐标 事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区左边，另一组是屏幕坐标。坐标属性

<span style="font-family:SimSun;font-size:18px;">//获取可视区及屏幕区的坐标
window.onload = function(){

    document.onclick=function(evt){
        var e = evt || window.event;   //W3C || IE
        alert(e.clientX+','+e.clientY+','+e.screenX+','+e.screenY);
    };
};
</span>

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

<span style="font-family:SimSun;font-size:18px;">//双击修改键--按住shift并双击左键
window.onload = function () {
    document.ondblclick = function (evt) {
        alert(getKey(evt));
    };
};
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');	//单击+alt和360的快捷键冲突了
    return keys;
}</span>

3.修改键
修改键属性

键盘事件

用户在使用键盘时会触发键盘事件。“DOM2级事件”最初规定了键盘事件，结果又删除了相应的内容。最终还是使用最初的键盘事件，不过IE9已经率先支持“DOM3”级键盘事件。

1.键码
不同的浏览器在keydown和keyup事件中，会有一些特殊的情况。
在Firefox和Opera中，分号键时keyCode值为59，也就是ASCII中分号的编码；而IE和Safari返回186，即键盘中按键的键码。

<span style="font-family:SimSun;font-size:18px;"> //keydown，按下任意键，按下的意思就是按下立即触发
 //keyup，是弹起任意键，弹起就是按下然后释放触发
 //keypress，是按下字符键，abc，123，特殊字符啊什么。shift,ctrl,alt等等不是字符的键无效

 //键码：键盘上的任意键，
 //字符编码：键盘上可以输出的字符的键

 //键码返回的是ASCII的小写字母对应的，键码只是返回那个键的值，不认识字母大小写
 //键码在字符上和字符编码的ASCII是一致的。

 //键码可以返回任意键的编码，而且字母不区分大小写
 //键码在所有浏览器貌似都兼容

    document.onkeydown = function (evt) {
        var e = evt || window.event;
        //alert(e.keyCode);		//keyCode返回键码
        alert(e.charCode);		//charCode返回键码
    };

 //如果用keypress返回keyCode，发现Firefox浏览器把所有字符键返回0，
 //Chrome支持keypress返回keyCode，而且还支持大小写
 //IE支持keypress返回keyCode，而且还支持大小写
 //不同浏览器在；号上返回的键码值不一致，如果用到，需要做兼容
 
 
 //charCode在使用keypress的情况下，Firefox会返回字符键盘的编码，支持大小写
 //IE和Opera不支持charCode这个属性
 
 //一般情况下，我们不管非字符键，基本上处理的都是字符按键，所以
 document.onkeypress = function (evt) {
     alert(String.fromCharCode(getCharCode(evt)));	//charCode返回字符编码
 };
 //所有浏览器都支持字符按键
 function getCharCode(evt) {
    var e = evt || window.event;
    if (typeof e.charCode == 'number') {
        return e.charCode;
    } else {
        return e.keyCode;
    }
 }

 //字符编码 各个浏览器检测
 document.onkeypress = function (evt) {
     var e = evt || window.event;
     alert(e.keyCode);		//keyCode返回键码
     alert(e.charCode);		//charCode返回键码
 };</span>

2.字符编码
Firefox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的ASCII编码。此时的keyCode通常等于0或者也可能等于所按键的编码。IE和Opera则是在keyCode中保存字符的ASCII编码。

可以使用String.fromCharCode()将ASCII编码转换成实际的字符。

keyCode和charCode区别如下：比如当按下“a键（重视是小写的字母）时。

在Firefox中会获得
keydown： keyCode is 65  charCode is 0
keyup：    keyCode is 65 charCode is 0
keypress： keyCode is 0  charCode is 97

在IE中会获得
keydown： keyCode is 65  charCode is undefined
keyup：      keyCode is 65  charCode is undefined
keypress：  keyCode is 97  charCode is undefined

而当按下shift键时，在Firefox中会获得
keydown：keyCode is 16  charCode is 0
keyup：     keyCode is 16   charCode is 0

在IE中会获得
keydown：keyCode is 16  charCode is undefined
keyup： keyCode is 16  charCode is undefined

keypress：不会获得任何的charCode值，因为按shift并没输入任何的字符，并且也不会触发keypress事务。
在keydown事务里面，事务包含了keyCode – 用户按下的按键的物理编码。

在keypress里，keyCode包含了字符编码，即默示字符的ASCII码。如许的情势实用于所有的浏览器 – 除了火狐，它在keypress事务中的keyCode返回值为0。

W3C与IE

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

W3C中event对象的属性和方法

?IE中event对象的属性

在这里，我们只看所有浏览器都兼容的属性或方法。首先第一个我们了解一下W3C中的target和IE中的srcElement，都表示事件的目标.

<span style="font-family:SimSun;font-size:18px;"> //你点击哪里，就可以得到哪里的DOM元素对象
 function getTarget(evt) {
    var e = evt || window.event;
    return e.target || e.srcElement;
 }
 
 document.onclick = function (evt) {
    alert(getTarget(evt));	
 };</span>

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

事件冒泡，是从里往外逐个触发。
事件捕获，是从外往里逐个触发。

现代的浏览器默认情况下都是冒泡模型，而捕获模式则是早期的Netscape默认情况。而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。

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

<span style="font-family:SimSun;font-size:18px;">//事件流 冒泡事件
window.onload = function () {
    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 (evt) {
        var e = evt || window.event;
        alert('input');
        //e.stopPropagation();	//W3C取消冒泡
        //alert(e.cancelBubble);
        //e.cancelBubble = true;//IE取消冒泡
        setStop(e);        //取消冒泡兼容所有浏览器
    };


    function setStop(e) {

        (typeof e.stopPropagation == 'function') ? e.stopPropagation() : e.cancelBubble = true;

    }
};</span>

对于事件的学习，还在进一步的加深过程中，事件对象的了解，让我对事件的认识更加全面，同时也为我灵活使用事件打下了基础。