事件和回调
在浏览器中,大多数代码都是事件驱动的,用 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 这样的点击事件回调中看到的事件示例。有许多属性可以告诉您事件发生在页面上的哪个位置(例如 pageX 和 offsetY)——这些略有不同,因为它们取决于用于测量的参考点。您还可以看到 target,它是一个指向被点击节点的引用。
{
offsetX: 74,
offsetY: 10,
pageX: 154,
pageY: 576,
screenX: 154,
screenY: 489,
target: h2,
timeStamp: 1363131952985,
type: "click",
x: 154,
y: 395
}
