请问有什么方法可以将obj对象传给已经被innerHTML的对象？

Question

var obj = function(){    this.hello = function(){        alert("hello");     } }var aPage = function(){    var test = document.getElementById("test");    var obj = new obj();     test.innerHTML = "<a href='#' onclick='obj.hello();'>hello</a>"; }aPage();//这样的代码，在点击 hello 时，会找不到 obj 对象。

Answer 1

你的问题涉及到变量作用域的问题。 我们来各个击破。

首先看这段代码：

var aPage = function(){
    var test = document.getElementById("test");
    var obj = new obj();

    test.innerHTML = "<a href='#' onclick='obj.hello();'>hello</a>";}

你的目的是想 new 一个 obj 对象的实例。 由于变量的声明会被提前到函数执行前。你这段代码实际上是

var aPage = function(){    var obj, test; 
    test = document.getElementById("test");
    obj = new obj();

    test.innerHTML = "<a href='#' onclick='obj.hello();'>hello</a>";
}

当你尝试 new 的时候，obj 实际上是 undefined。当你尝试对 undefined 进行 new 操作的时候，会出错。这个是第一个错误。

假设你修复了第一个错误，aPage 函数里面的 obj 是你想要的那个对象的实例之后，我们继续看。

test.innerHTML = "<a href='#' onclick='obj.hello();'>hello</a>";

这段代码会把一段 html 文本塞到 DOM tree 里面。onclick 这种调用方式属于 0级 DOM 事件。这种事件句柄中，查找变量的作用域链是从本节点至其父节点一直延伸到 window。而你的 aPage 函数并不在该作用域链上。但同时，你的 window 下有一个变量 obj，此时会查找到该变量。

此时，onclick 后的 obj 对象是 window 下的 obj，而非你在 aPage 函数中 new 的对象。

但是 window 下的 obj 在实例化之前是不包含 hello 方法的。所以你调用 obj.hello() 的时候会报错。这个是第二个错误。

为了解决这个问题，推荐使用 2级 DOM 事件。

例如

var OBJ = function(){  this.hello = function(){    alert("hello");
  }
}var aPage = function() {  var test = document.getElementById('test');  var obj = new OBJ();
  test.addEventListener('click', function() {obj.hello()});
}

此时当点击时，事件函数可以在作用域链中找到正确的 obj 对象并执行。

Answer 2

js和dom还没有融合到这么紧密的程度，二者是两个完全分离的环境。
可以这样：

test.innerHTML = "<a href='#' >hello</a>";
$("a",test).click(function(){
    obj.hello();
});

也可以通过dom属性来互相传递值，具体问题具体对待。