1

私のプロジェクトにはボタンがあり、それをクリックすると関数呼び出しがonclick行われ、プロジェクト内のすべての特定の要素にイベントが追加され、非表示のポップアップ要素コンテナーが表示されます。

ページに存在するすべての要素を検索し、onclick特定のクラスを持ついくつかの要素にイベントを追加する機能があります。

私の要素はリスト配列に格納されています。この配列 (配列名はlist) の各セルには、次のような要素が格納されます。

list[0] = document.getElementById("my_div_id");
list[1] = document.getElementById("my_div_id_1");
list[2] = document.getElementById("my_div_id_2");
...
list[n] = document.getElementById("my_div_id_n");

そして、Javascriptコードの上に以下のような関数があります:

function say_hello(e, msg) {
    if (e == null) e = window.event;
    //now e handler mouse event in all browser !!!
    alert (e + "::" + msg);
}

onclick配列の各要素にイベントを追加する関数があります。以下のタイプのイベントを追加onclickします（（*）コメントで区切られています）が、それらのいずれも機能しません：

function search_and_add_events_to_all_dragable_elements (list) {
    for (var z = 0; z < list.length; z++) {
        list[z].href = "javascript:;";
        
        var e;
        var test_msg = "VAYYYYYYYYYY";
        
        /**************
        element.onclick = new Function { alert ('hi'); };
        element.onclick = new Function () { alert ('hi'); };
        element.onclick = new function { alert ('hi'); };
        element.onclick = new function () { alert ('hi'); };
        element.onclick = new function () { return alert ('hi'); };
        element.onclick = function () { return alert ('hi'); };
        element.onclick = alert ('hi');
        element.onclick = "alert ('hi');";
        element.onclick = say_hello(e, test_msg);
        element.onclick = "say_hello();";
        element.onclick = (function (e, test_msg) { return function(e) { sib(e, test_msg); };
        element.onclick = (function () { return function() { alert("ahaaay"); };
        **************/
        
        list[z].style["padding"] = "20px";
        list[z].style["border"] = "solid 10px";
        list[z].style["backgroundColor"] = "#CCC";
    }
}

コードの最後を変更styleして、コードが機能し、本当に終了するようにします。スタイルは毎回変更されますが、onclickイベントは私のdiv. プロジェクト
に追加する方法は 1 つだけです。onclickそれは以下と同じです:

list[z].setAttribute("onclick", "alert(\"hi\");");

しかし、より良い方法はありますか？

4

1 に答える 1

1

より良い方法があります。私の最初の間違いは、すべての要素がページに読み込まれる前にJavaScriptを使用することでした。これを解決するには、ページの読み込みの最後に要素を呼び出すか、プロジェクトの最後にJavaScriptコードを配置する必要があります。次に、要素がページに存在するときにコードが正確に実行されます。
詳細については、以下のリンクを参照してください。
ページの読み込み後に実行されるJavaScript

http://www.w3schools.com/jsref/event_onload.asp

私の2番目の間違いは傷つきました:(
私は他のすべての要素をそれ自体で保持するdivを持っています。それはdisplay: none;ロード時にスタイル設定されました。関数を呼び出すと、それは表示されず、すべてのシンがうまく機能します（私の新しいスタイルのように）が、onclickイベントはしませんでした動作しません:(（そして私はこれを解決するために2日を費やしました:(（イベントを追加するときに
要素のスタイルを設定しないように注意してください。 そうすれば、このタイプの作成イベントをプロジェクトに動的に使用できます：display: noneonclick
onclick

list[z].onclick = (function (e, test_msg) {
    return function(e) {
        sib(e, test_msg);
    };
})(e, test_msg);

これが私が知っている最良の方法です。イベントハンドラーを管理し、引数を関数に送信することもできます。

onclickプロジェクトにイベントを動的に追加する別の方法を何度か使用しています。

于 2012-07-01T16:04:07.627 に答える