HTML Dog
跳至导航

事件和回调

在浏览器中,大多数代码都是事件驱动的,用 JavaScript 编写交互式应用程序通常是为了等待并响应事件,以某种方式改变浏览器的行为。事件发生在页面加载时、用户交互时(点击、悬停、更改)以及无数其他时间,也可以手动触发。

要响应事件,您需要监听它,并提供一个函数,当事件发生时浏览器将调用该函数。这个函数被称为回调

以下是监听事件所需的一组内容:回调函数、元素以及监听事件的调用。


var handleClick = function (event) {
    // do something!
};
var button = document.querySelector('#big-button');
button.addEventListener('click', handleClick);

addEventListener 是所有 DOM 元素上的一种方法。这里它被调用在一个保存在 button 变量中的元素上。第一个参数是一个字符串——要监听的事件的名称。这里是 click——这是鼠标点击或手指触摸。第二个参数是回调函数——这里是 handleClick

有关特定事件的数据会被传递到事件回调中。看看上面声明的 handleClick。您可以看到它的参数:event——它是一个对象,其属性描述了发生了什么。

以下是您可能在 handleClick 这样的点击事件回调中看到的事件示例。有许多属性可以告诉您事件发生在页面上的哪个位置(例如 pageXoffsetY)——这些略有不同,因为它们取决于用于测量的参考点。您还可以看到 target,它是一个指向被点击节点的引用。


{
    offsetX: 74,
    offsetY: 10,
    pageX: 154,
    pageY: 576,
    screenX: 154,
    screenY: 489,
    target: h2,
    timeStamp: 1363131952985,
    type: "click",
    x: 154,
    y: 395
}