javascript - Firebug : "event is not defined"

Question

我有一个具有以下方法的构造函数:

    
function getMouseXY(event){
        var x = event.clientX - this.offsetLeft;
        var y = event.clientY - this.offsetTop;
    return [x,y];
}

function alertx(){
    var c = this.getMouseXY(event);
    alert(c[0]);
}

在 HTML 代码中，我将alertx 函数分配给 HTML5 Canvas 的事件 mouseup:

document.getElementById('cbackground').addEventListener('mouseup', object.alertx, false);

预期结果是什么？单击 Canvas 会显示鼠标的 X 位置，但我什么也没得到。对 Firebug 的进一步探索给我带来了错误“事件未定义”。我不知道如何避免这种情况!有小费吗？谢谢!

Answer 1

让我们看看几个问题:

1. alertx() 未接收 event 参数。
2. 在该函数中，您使用 this 调用 getMouseXY。此时的 this 关键字将引用触发事件的元素。
3. 您正在将事件处理程序绑定(bind)到未知的对象变量。

我认为你想做这样的事情:

function getMouseXY(event){
        var x = event.clientX - this.offsetLeft, // notice, 'this' is used
            y = event.clientY - this.offsetTop;

    return [x,y];
}

function alertx(event){
    var c = getMouseXY.call(this, event); // set the element as 'this'
    alert(c[0]);
}

如果你有一个构造函数，并且上面的函数是实例方法，你可以这样做:

function MyObject () {  // constructor
}

MyObject.prototype.getMouseXY = function (event) {
        var x = event.clientX - this.offsetLeft,
            y = event.clientY - this.offsetTop;

    return [x,y];
};

MyObject.prototype.alertx = function (event, element) {
    var c = this.getMouseXY.call(element, event); 
    alert(c[0]);
}

绑定(bind)事件时，您可以添加匿名函数，以强制执行上下文:

var object = new MyObject();
document.getElementById('cbackground').addEventListener('mouseup', function (e) {
  object.alertx(e, this); // alertx will be called with the correct 'this'
}, false);

<小时/>

编辑:为了回复您的评论，您只需知道如何隐式设置上下文(this关键字)即可:

当您调用如下实例方法时:

obj.method();

方法内的this关键字将引用obj。

当您调用全局变量时，也会发生同样的事情，因为它们是全局对象的成员(浏览器脚本中的window):

globalFunction();

相当于:

window.globalFunction();

该函数内的上下文将是全局对象本身(窗口)。

使用 new 运算符时会发生另一种情况:

var instance = new MyConstructor();

在这种情况下，this 关键字将是一个新对象，是通过使用 new 运算符创建的。

当您使用函数作为事件处理程序时，this 关键字将引用触发事件的元素:

document.getElementById('myId').onclick = obj.myFunction;

在这种情况下，myFunction 是 obj 的实例方法，但 this 关键字将引用已单击的 DOM 元素。

最后，正如您在我的代码中看到的，可以通过使用 call 来显式设置上下文。或apply .