Question

点击按钮时，我希望在e，Firefox，Chrome等现代浏览器中获取事件对象etc。问题是当点击按钮给我一个undefined事件对象时，请注意在window.event浏览器中使用internet explorer获取事件对象时。

// the Object
var countdown = {
    hours: 0,
    minutes: 0,
    seconds: 0,
    element_h: null,
    element_m: null,
    element_s: null,
    init: function (hElemId, mElemId, sElemId) {
        this.element_h = document.getElementById(hElemId);
        this.element_m = document.getElementById(mElemId);
        this.element_s = document.getElementById(sElemId);
    },
    play: function (e){
        alert(e.target);
    }
};

HTML：

<button onclick="countdown.play();">Play</button>

Answer 1

您必须将event对象显式传递给onclick处理程序，如此

<button onclick="countdown.play(event);">Play</button>

引用MDN's Event Registration Doc page，

属性中的JavaScript代码通过事件参数传递给Event对象。

当您内联注册事件处理程序时，可以为Event对象提供event参数。但这不会自动完成。这就是我们必须明确传递event对象的原因。由于您未通过，e默认为undefined。

Answer 2

事件对象作为第一个参数传递给事件处理程序，名称为event（或者IE为全局变量）。您将获取参数/变量并将其传递给方法。

请注意，IE8及更早版本不支持target属性，因此您需要使用srcElement属性：

＆＃13;

var countdown = {
    hours: 0,
    minutes: 0,
    seconds: 0,
    element_h: null,
    element_m: null,
    element_s: null,
    init: function (hElemId, mElemId, sElemId) {
        this.element_h = document.getElementById(hElemId);
        this.element_m = document.getElementById(mElemId);
        this.element_s = document.getElementById(sElemId);
    },
    play: function (e){
        alert(e.target || e.srcElement);
    }
};

＆＃13;

<button onclick="countdown.play(event);">Play</button>

＆＃13;

Answer 3

“为什么事件对象在我的案例中未定义”

这就是原因。绑定内联处理程序时，会发生一个匿名函数并将其放在元素的onclick属性上。

根据浏览器的不同，该处理程序将如下所示：

// IE 8 and lower
elem.onclick = function() {
    countdown.play(); // <-- Invoking your method, but not passing anything
}


// Other browsers
elem.onclick = function(event) {
    countdown.play(); // <-- Invoking your method, but not passing anything
}

因此两个版本都有一个非常明显的问题。你在没有传递任何东西的情况下调用你的函数。

这就是您需要在通话中定义event参数的原因。

<button onclick="countdown.play(event);">Play</button>

现在看起来像这样：

// IE 8 and lower
elem.onclick = function() {
    countdown.play(event); // <-- there's no parameter, but there is `window.event`
}


// Other browsers
elem.onclick = function(event) {
    countdown.play(event); // <-- it's just passing the parameter
}

现在看起来很正确。在IE8及更低版本中，函数中没有event参数，但它将获得全局event对象。

在第二个版本中，它只是传递浏览器定义的参数。

这也说明了您无法使用e或其他名称的原因。

<button onclick="countdown.play(e);">Play</button>

因为您将传递一个未在任何地方定义的变量。

// IE 8 and lower
elem.onclick = function() {
    countdown.play(e); // <-- there's no `e` defined in here
}


// Other browsers
elem.onclick = function(event) {
    countdown.play(e); // <-- there's no `e` defined in here
}

为什么在我的情况下事件对象是未定义的

3 个答案: