第一百二十节，JavaScript事件对象

Posted 2020-08-21 林贵秀

javascript事件对象

 

 

学习要点：

1.事件对象

2.鼠标事件

3.键盘事件

4.W3C与IE

 

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

 

一．事件对象

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

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

//在页面任意地方单击鼠标触发事件
document.onclick = function () {
    alert(‘Lee‘);
};

PS：以上程序的名词解释：click表示一个事件类型，单击。onclick表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。document表示一个绑定的对象，用于触发某个元素区域。function()匿名函数是被执行的函数，用于触发后执行。

 

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

//在页面任意地方单击鼠标触发事件
document.onclick = box;                        //直接赋值函数名即可，无须括号
function box() {
    alert(‘Lee‘);
}

 

this关键字和上下文

在面向对象那章我们了解到：在一个对象里，由于作用域的关系，this代表着离它最近对象。

//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件，等待html执行完成后，执行匿名函数
    var input = document.getElementsByTagName(‘input‘)[0];
    input.onclick = function () {
        alert(this.value);                    //HTMLInputElement，this表示input对象
    };
};