编写可维护的JavaScript之事件处理

时间:2023-03-08 22:10:11

规则1:隔离应用逻辑

这会让你的代码容易调试

规则2:不要分发事件对象

event对象包含了太多信息

// a good example
var handlePopup = { // 事件句柄,处理所有和event对象有关的东西
handleClick: function (e) { // 假设事件支持DOM Level2
e.preventDefault();
e.stopPropagation(); // 传入应用逻辑
this.showPopup(e.clientX, e.clientY);
}, // 应用逻辑,独立于事件、
showPopup: function(x, y) {
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
}
}; addListener(element, "click", function(e) {
handlePopup.handleClick(e);
});