Javascript学習ノート13——応答イベントについて

7394 ワード

具体的なことはよく覚えていません.ある日のクラスの後で同僚二人が事件について話しているのを聞きました.
ここで簡単に言います.
<input type="button" runat="server"  value="Click Me" id="ButtonTest" />
普通のボタンです.イベントを追加したいです.二つの方法があります.
A.
    <input type="button" runat="server" onclick="Alert()" value="Click Me" id="ButtonTest" />
<
script type="text/javascript">
function
Alert() {
alert("Click Me");
}
</script>
 
B.
    <input type="button" runat="server" value="Click Me" id="ButtonTest" />
<
script type="text/javascript">
document.getElementById("ButtonTest").onclick = function () {
alert("Click Me");
}
</script>
A法を静的結合と呼び,B法を動的結合と呼ぶ.A方法を見に来ましたが、彼はこのような効果に近いです.
    <input type="button" runat="server" onclick="Alert()" value="Click Me" id="ButtonTest" />
<
script type="text/javascript">
document.getElementById("ButtonTest").onclick = function () {
Alert();
}
</script>
つまり、イベントを静的に結合すると、実際にはシステムが匿名関数をデフォルトで作ってくれて、その後、私たちの方法体をその中に包んでくれます.このようにして、thisの問題に触れました.
私達はこのようなコードを見にきました.これも会社でJSを初めて勉強した時、会社のJS子牛が私に投げた問題です.
    <input type="button" runat="server" onclick="Alert1()" value="Test1" id="ButtonTest1" />
<
input type="button" runat="server" onclick="Alert2(this)" value="Test2" id="ButtonTest2" />
<
script type="text/javascript">
function
Alert1() {
alert(this.value);
}
function Alert2(obj) {
alert(obj.value);
}
</script>
このようなコードをテストすると、第一ボタンは「undefined」、第二ボタンは「Test 2」をイジェクトすることが分かります.理由は上で述べたように、ボタンの一つにおいて、方法は匿名関数を宣言し、Alert 1()はその中に閉じられています.つまり、Alert 1()はその使用者を見つけられないので、この時、彼はwindowオブジェクトのvalue属性を探しています.結果、定義されていないことが分かりました.
    <input type="button" runat="server" onclick="Alert1()" value="Test1" id="ButtonTest1" />
<
input type="button" runat="server" onclick="Alert2(this)" value="Test2" id="ButtonTest2" />
<
script type="text/javascript">
value = "window";
function Alert1() {
alert(this.value);
}
function Alert2(obj) {
alert(obj.value);
}
</script>
 
上のコードを実行すれば、問題がよく分かります.