亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

請問有什么方法可以將obj對象傳給已經被innerHTML的對象?

請問有什么方法可以將obj對象傳給已經被innerHTML的對象?

白衣非少年 2023-04-30 11:07:39
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 對象。
查看完整描述

2 回答

?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

你的問題涉及到變量作用域的問題。 我們來各個擊破。

首先看這段代碼:

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 對象并執行。


查看完整回答
反對 回復 2023-05-03
?
茅侃侃

TA貢獻1842條經驗 獲得超21個贊

js和dom還沒有融合到這么緊密的程度,二者是兩個完全分離的環境。
可以這樣:

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

也可以通過dom屬性來互相傳遞值,具體問題具體對待。


查看完整回答
反對 回復 2023-05-03
  • 2 回答
  • 0 關注
  • 117 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號