Javascript でｸﾗｽ内のﾒｿﾞｯﾄﾞを呼び出させるにはどうすればよいのでしょうか？ Javascriptを勉強を始めて数日の者です｡自分なりの作り方の勉強中です｡ﾎﾟｯﾌﾟｱｯﾌﾟ…

Javascript でｸﾗｽ内のﾒｿﾞｯﾄﾞを呼び出させるにはどうすればよいのでしょうか？

Javascriptを勉強を始めて数日の者です｡
自分なりの作り方の勉強中です｡
ﾎﾟｯﾌﾟｱｯﾌﾟのｻﾝﾌﾟﾙを作成集なのですが､いまいち､ｸﾗｽ的なﾒｿﾞｯﾄﾞの呼び出し方と､変数のｽｺｰﾌﾟ範囲がわかっていない状態です｡
下記のようなｿｰｽを作って､ﾃｽﾄを行っております｡

下に記載したようなｿｰｽで､
?※1､※2のｺﾒﾝﾄを外すと､ﾎﾟｯﾌﾟｱｯﾌﾟが表示されません｡
ｸﾗｽ内のﾒｿﾞｯﾄﾞを div と等から呼び出させることは出来ないのでしょうか？
(ｻﾝﾌﾟﾙの様な記載をすると､OnCancel が呼び出されてしまい､表示=>閉じるで操作してしまう為ｸﾛｰﾑのｽﾃｯﾌﾟ実行で確認)

??で呼び出せる方法があったとして､※3の様にｸﾗｽ内の変数を参照することは出来るのでしょうか

Javascriptにお詳しい方ご指導ください｡

ｿｰｽは文字数制限で入力できなかったので､画像で張り付けています｡


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <title>PopUp</title>
<script type="text/javascript">
//<![CDATA[
function PopUpTest() {
var _PopUpTest = new ClsPopUpTest();

}

function ClsPopUpTest() {

this._Iframe = null;
this._Document = null;

// ﾃﾝｷｰ表示用の iframe を作成する｡
this._Iframe = document.createElement( "iframe");

// ﾄﾞｷｭﾒﾝﾄに追加
window.document.body.appendChild( this._Iframe );

// iframeのﾄﾞｷｭﾒﾝﾄをﾌﾟﾛﾊﾟﾃｨに保存
this._Document = this._Iframe.contentDocument;

// iframeのｽﾀｲﾙを設定する｡

this.tiframestyleset();

}

ClsPopUpTest.prototype =
{

// iframeのｽﾀｲﾙｼｰﾄを作成する｡
tiframestyleset : function(){
this._Iframe.style.width = '100px';
this._Iframe.style.height = '200px';
this._Iframe.style.left = '10px';
this._Iframe.style.top = '10px';
this._Iframe.style.border = '1px solid #999999';
this._Iframe.style.padding = '0px';
this._Iframe.style.backgroundColor= '#EEEEEE';// 背景色
this._Iframe.style.position = 'absolute';

this._Iframe.style.display = 'block';
this._Iframe.style.zIndex = 100;

// ｸﾘｯｸしたら終了させる｡
//this._Document.body.onmousedown = this.OnCancel(); // ＜＝※1

// 閉じるﾎﾞﾀﾝを作成する｡
var closebtn = this.BtnCreate(this._Document.body, "閉じる");

// 閉じるﾎﾞﾀﾝを追加する｡
this._Document.body.appendChild(closebtn);

},
// <div>を使用したﾎﾞﾀﾝを作成する｡
BtnCreate:function ( ele , val ){

var btn = this._Document.createElement("div");
var textn = this._Document.createTextNode(val);
btn.appendChild(textn);
//btn.onclick = this.OnCancel(); // ＜＝※2
ele.appendChild(btn);
return btn;
},

//**********************************
// ｲﾍﾞﾝﾄ系の処理はこの下に記載
//**********************************

// ｷｬﾝｾﾙ処理(ﾎﾟｯﾌﾟｱｯﾌﾟを閉じるだけ) ※3
OnCancel : function(){
if (this._Iframe){
window.document.body.removeChild(this._Iframe);
}
},

//**********************************
// ｲﾍﾞﾝﾄ系の処理はこの下に記載
// 最後にこれを配置して､ 途中は
// すべて }, で記載する｡
//**********************************
// 解放処理､必要に応じて記載する｡
dispose : function() {
}
}

//>
</script>
 </head>
 <body>
 <input type='button' value='ﾎﾟｯﾌﾟｱｯﾌﾟ' onclick='PopUpTest();' />
 </body>
</html>

既に回答出てましたが､ｿｰｽ作成したので詳しく書きます｡長いけど｡
結論から書くと｢できるけど､iframeでやるには､ｸﾗｽとか関係なく難しすぎる｡｣ということです｡

･記述ﾐｽについて
onmousedownやonclickはｲﾍﾞﾝﾄなので､戻り値は関数になります｡ごっちゃになるのは仕方ないですが覚えるしかありません｡

this._Document.body.onmousedown = this.OnCancel();
↓これは下の式とｲｺｰﾙなので関数にならずに命令が実行される
this._Document.body.onmousedown = if (this._Iframe){
window.document.body.removeChild(this._Iframe);
}

this._Document.body.onmousedown = this.OnCancel;
↓これは下の式とｲｺｰﾙ｡期待通りに動く
this._Document.body.onmousedown = function(){
if (this._Iframe){
window.document.body.removeChild(this._Iframe);
}
}

しかし､このように文を変えても､もう一つの問題があるため動きません｡
(もしかしたらこちらは知っているかもしれませんが)

･thisの参照値が変わる
上の対応で文法は正しくなりましたが､thisの参照値が変わってしまいます｡

this._Document.body.onmousedown = this.OnCancel;
OnCancel : function(){
if (this._Iframe){//→ここでのthisは｢this._Document.body｣を参照する
window.document.body.removeChild(this._Iframe);
}
}

よってthis._Document.body._Iframeを探しに行っていることになる

this._Document.bodyからのonmousedownｲﾍﾞﾝﾄになるので､そこからの参照値になります｡
よってthisは使えません｡
また､iframe内からの参照になるので､親ﾌﾚｰﾑにあるｸﾗｽClsPopUpTestにもｱｸｾｽが難しいです｡(divじゃだめなんですかね？)
変数のroot化をしても厳しそうですし､root化はやりたくないような人もいるので…

一番楽だと思われるのが､ｲﾍﾞﾝﾄ関数に引数を渡してやることなのですが､通常では引数を渡せません｡(ｲﾍﾞﾝﾄ関数の引数にはｸﾘｯｸしたときの状況などが入ってくるため)
最初の話に戻る形になります｡

this._Document.body.onmousedown = this.OnCancel(this._Iframe);
→戻り値が関数ではなくなるので挙動がおかしい

引数を渡すには無名関数を使った方法がありますのでこちらでどうぞ｡

this._Document.body.onmousedown = (function(d){→引数d(適当)には最後に書いてある括弧内の要素が入る
return function(e){→onmousedownにちゃんと関数を返してあげる｡eにはｸﾘｯｸ時の状況ﾃﾞｰﾀが入る｡省略可能
d.OnCancel(d._Iframe);→thisではなく引数dにする
}
})(this);→このthisが引数dに入る

■部分ｿｰｽ
二つを改修したのがこちらです｡

// ｸﾘｯｸしたら終了させる｡
this._Document.body.onmousedown = (function(d){
return function(){
d.OnCancel(d._Iframe);
}
})(this);

// <div>を使用したﾎﾞﾀﾝを作成する｡
BtnCreate:function ( ele , val ){
var btn = this._Document.createElement("div");
var textn = this._Document.createTextNode(val);
btn.appendChild(textn);
btn.onclick = (function(d){
return function(){
d.OnCancel(d._Iframe);
}
})(this); // ＜＝※2
ele.appendChild(btn);
return btn;
},

// ｷｬﾝｾﾙ処理(ﾎﾟｯﾌﾟｱｯﾌﾟを閉じるだけ) ※3
OnCancel : function(obj){
if (obj){
window.document.body.removeChild(obj);
}
},

※chromeでしか見てませんが動くと思います｡

とまあややこしいお話でした｡

引数の話
http://d.hatena.ne.jp/hi_c_mayu/20090704/1246641410