1

HTMLリンクからJSオブジェクトの関数プロパティを実行するにはどうすればよいですか？私は次のJSを持っています：

function Tester(elem) {
    this.elem = document.getElementById(elem);
}

Tester.prototype.show = function() {
    this.elem.innerHTML = '<a href="javascript: this.test();">test</a>';
};

Tester.prototype.test = function() {
    alert("a");
};  
​

HTMLは次のとおりです。

<script type="text/javascript">
    var test = new Tester("test");
    test.show();
</script>

レンダリングされたリンクをクリックすると、test()機能を識別できません。test()ユーザーがリンクをクリックすると関数が実行されるようにするにはどうすればよいですか？

4

1 に答える 1

4

適切な方法は、DOM要素を作成し、JavaScriptを使用してイベントハンドラーをアタッチすることです。

Tester.prototype.show = function() {
    var a = document.createElement('a'),
        self = this; // assign this to a variable we can access in the 
                     // event handler

    a.href = '#';
    a.innerHTML = 'test';
    a.onclick = function() {     
        self.test();
        return false; // to prevent the browser following the link
    };

    this.elem.appendChild(a);
};

イベントハンドラーはクロージャーを形成するため、外部関数（Tester.prototype.show）で定義された変数にアクセスできます。イベントハンドラー内ではthis、インスタンスを参照するのではなく、ハンドラーがバインドされている要素（この場合a）を参照することに注意してください。MDNにはの適切な説明がありthisます。

quirksmode.orgには、イベント処理、イベントハンドラーをバインドするさまざまな方法、それらの長所と短所、ブラウザーの違い、およびイベントハンドラーでの動作に関する優れた記事がいくつかあります。this

また、 DOMインターフェイスに慣れることも確かに役立ちます。

于 2012-05-20T00:32:26.103 に答える