可以在javascript對象文字訪問本身中定義事件處理程序嗎？

Question

我知道如果對象是一個函數，我可以使用閉包（var self = this）

<a href="#" id="x">click here</a>

<script type="text/javascript">
    var object = {
        y : 1,

        handle_click : function (e) {
            alert('handling click');

            //want to access y here

            return false;
        },

        load : function () {
            document.getElementById('x').onclick = this.handle_click;
        }
    };

    object.load();
</script>

Answer 1

因此，事件處理程序部分連接正常（我自己測試）但是，正如您的注釋所示，您無法訪問剛剛定義的對象的“y”屬性。

這有效：

var object = { 
  y : 1, 
  handle_click : function (e) {
    alert('handling click');

    //want to access y here 
    alert(this.y); 

    return false; 
  }, 
  load : function () { 
    var that = this; 
    document.getElementById('x').onclick = function(e) {
      that.handle_click(e); // pass-through the event object
    }; 
  } 
}; 
object.load();

還有其他方法可以做到這一點，但這是有效的。

Answer 2

將對handle_click的調用綁定到它定義的對象的最簡單方法是這樣的：

        var self=this;
        document.getElementById('x').onclick = 
           function(e) { return self.handle_click(e) };

如果你需要傳入參數或想讓代碼看起來更干凈（例如，如果你設置了很多類似的事件處理程序），你可以使用currying技術來實現相同的目的：

bind : function(fn)
{
   var self = this;
   // copy arguments into local array
   var args = Array.prototype.slice.call(arguments, 0); 
   // returned function replaces first argument with event arg,
   // calls fn with composite arguments
   return function(e) { args[0] = e; return fn.apply(self, args); };
},

...

        document.getElementById('x').onclick = this.bind(this.handle_click, 
           "this parameter is passed to handle_click()",
           "as is this one");

Answer 3

借助AddEventListener，我們可以使用處理程序方法直接傳遞一個對象，您將可以訪問其屬性： http ： //www.thecssninja.com/javascript/handleevent

希望這能幫助像我這樣的人在幾年后尋找這個話題！

Answer 4

我知道如何用傑森的最新作品做到這一點。 沒有匿名功能的任何方式嗎？