Javascriptはページ要素に時間関数を追加して検討する.

5902 ワード

JavaScript

前言
HTML自体には、Oclick、onmouseoverなどのイベントトリガの属性があります.
直接コードを見ます.

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
var func = function test(str)
{
   alert("go test "+str);
}
</script>
</HEAD>

<BODY>
<input type=button name="name1" id="id1" onclick="test(this.id)" value="click">
<input type=button name="name1" id="id2" onclick="test(this.id)" value="click">
</BODY>
</HTML>

この例は簡単ですが、次のような状況があれば、

1. 要素のonclickイベント関数は不確定です.
2.転送のパラメータはバックグラウンド送信であり、大きな不確実性やダイナミック性がある.
3.伝達するパラメータの値は特殊です.例えば、object、arrayです.さらに、中には単、双引用符が含まれています.
もしかしたら、私はobject、Arayをstringに変換したり、二重引用符の代わりに変換したりすることができます.しかし、解決の可否を問わず、複雑さと柔軟性にははるかに問題がある.
もちろん、解決方法はJSを使ってイベント関数を追加することです.
JSを使ってイベント関数を追加します.
正しいコードの例を直接参照してください.

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
var func = function test(str)
{
   alert("go test "+str);
}
</script>
</HEAD>

<BODY>
<input type=button name="name1" id="id1" value="click">
<input type=button name="name1" id="id2" value="click">
<script>
var inputobjs = document.getElementsByName("name1");
for(var i=0;i<inputobjs.length;i++)
{
  var inputobj = inputobjs[i];
  inputobj.onclick = function()
  {
     test(this.id);
  }
}
</script>
</BODY>
</HTML>

上記の例は簡単です.実現する仕組みも簡単です.obj.onclickを使って実現するために注意したいのは、書いている時に、意図的に次のエラーを犯している可能性があります.

1. onclickの賦課は間違っています.
2. パラメータ転送エラー
onclickの賦課は間違っています.

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
var func = function test(str)
{
   alert("go test "+str);
}
</script>
</HEAD>

<BODY>
<input type=button name="name1" id="id1" value="click">
<input type=button name="name1" id="id2" value="click">
<script>
var inputobjs = document.getElementsByName("name1");
for(var i=0;i<inputobjs.length;i++)
{
  var inputobj = inputobjs[i];
  inputobj.onclick = test(inputobj.id);
}
</script>
</BODY>
</HTML>

ここで直接書き上げます

inputobj.onclick = test(inputobj.id);

元素の中で定義されているのと同じように見えます.

しかし、これは実行に解析されます.
関数名(パラメータ) ==> このフォーマットはHTMLで文字列として扱われます.「script」タブで実行されます.定義ではなく呼び出しられます.
以上の実行の結果は、
イベントの追加に失敗しました.関数は直接実行されます.(IEではエラーが発生します)
だから正しい方法はobj.onclick=functionを使うことです. test(this.id);
この方法は定義されています.この定義は外の階のfunctionを加えて包んだだけだと言えるかもしれませんが、本当にこのように書きたくないなら、どうすればいいですか?
以下の方式に変えましょう.

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
var func = function test(str)
{
   str = this.id;
   alert("go test "+str);
}
</script>
</HEAD>

<BODY>
<input type=button name="name1" id="id1" value="click">
<input type=button name="name1" id="id2" value="click">
<script>
var inputobjs = document.getElementsByName("name1");
for(var i=0;i<inputobjs.length;i++)
{
  var inputobj = inputobjs[i];
  inputobj.onclick = func;
}
</script>
</BODY>
</HTML>

パラメータ転送エラー
エラーの例を見ます

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
function test(str)
{
   alert("go test "+str);
}
</script>
</HEAD>

<BODY>
<input type=button name="name1" id="id1" value="click">
<input type=button name="name1" id="id2" value="click">
<script>
var inputobjs = document.getElementsByName("name1");
for(var i=0;i<inputobjs.length;i++)
{
  var inputobj = inputobjs[i];
  inputobj.onclick = function()
  {
     test(inputobj.id);
  };
}
</script>
</BODY>
</HTML>

間違いはどこですかinputtobjは一つのグローバル変数に相当し、2つの異なる割当値に対して伝達パラメータ値は同じである(最後の割当値).

直すのは簡単です.

test(inputobj.id);

せいにする

test(this.id);

いいです

JavaScript Promise API