如何跟踪 JavaScript 中的回调函数事件?
How to track callback function events in JavaScript?
我最近为简单的 JavaScript 事件创建了一个简单的函数,不需要 addEventListener
的所有附加功能。一切都很好,直到我需要跟踪事件(在 Internet Explorer 之外)。虽然 window.event
似乎在 IE 和 Chrome 中工作,但 Firefox 和其他一些浏览器没有实现它。我试图弄清楚如何在下面的这个例子中得到相同的结果。
目前此示例适用于 "Test Button 2",其中 returns 事件对象。我们如何修复 addEvent
函数以支持相同的行为?我尝试了各种选择但没有任何运气......
function addEvent (type, object, callback) {
if (typeof object[type] != 'undefined') {
var existingFunctions = object[type];
object[type] = null;
object[type] = function () {
if (existingFunctions) {
existingFunctions();
}
callback();
};
}
}
var testButton1 = document.getElementById("test1");
function callBack(event) {
alert(event);
}
addEvent('onclick', testButton1, callBack); // This returns 'undefined' :(
var testButton2 = document.getElementById("test2");
testButton2.onclick = function(event) {
callBack(event); // This works.
}
<button id="test1">
Test Button 1
</button>
<button id="test2">
Test Button 2
</button>
由于缺乏关于使用简化的自定义事件侦听器函数的答案,我最终回到使用 addEventListener polyfill。
为了确保最近的浏览器不会无缘无故地加载这个脚本,我在 <head>
中使用这个简化的条件加载器有条件地加载它:
// Event listener methods for IE8.
if (!Element.prototype.addEventListener && !document.body) {
document.write('<script src="addEventListener.js"></script>');
}
我最近为简单的 JavaScript 事件创建了一个简单的函数,不需要 addEventListener
的所有附加功能。一切都很好,直到我需要跟踪事件(在 Internet Explorer 之外)。虽然 window.event
似乎在 IE 和 Chrome 中工作,但 Firefox 和其他一些浏览器没有实现它。我试图弄清楚如何在下面的这个例子中得到相同的结果。
目前此示例适用于 "Test Button 2",其中 returns 事件对象。我们如何修复 addEvent
函数以支持相同的行为?我尝试了各种选择但没有任何运气......
function addEvent (type, object, callback) {
if (typeof object[type] != 'undefined') {
var existingFunctions = object[type];
object[type] = null;
object[type] = function () {
if (existingFunctions) {
existingFunctions();
}
callback();
};
}
}
var testButton1 = document.getElementById("test1");
function callBack(event) {
alert(event);
}
addEvent('onclick', testButton1, callBack); // This returns 'undefined' :(
var testButton2 = document.getElementById("test2");
testButton2.onclick = function(event) {
callBack(event); // This works.
}
<button id="test1">
Test Button 1
</button>
<button id="test2">
Test Button 2
</button>
由于缺乏关于使用简化的自定义事件侦听器函数的答案,我最终回到使用 addEventListener polyfill。
为了确保最近的浏览器不会无缘无故地加载这个脚本,我在 <head>
中使用这个简化的条件加载器有条件地加载它:
// Event listener methods for IE8.
if (!Element.prototype.addEventListener && !document.body) {
document.write('<script src="addEventListener.js"></script>');
}