jQueryイベントとイベントオブジェクト

まず、イベントを追加するためによく使用する方法を見てみましょう:

<!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>
    <title>javascript中的事件</title>
    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(function()
        {
            document.getElementById("testDiv2").onclick = showMsg;
        })        function showMsg(event)
        {
            alert("!!!");
        }        
    </script></head><body>
    <div id="testDiv1" onclick="showMsg();">单击事件 1</div>
    <div id="testDiv2">单击事件 2</div>
    </body>
    </html>

ほとんどの場合、要素に onclick 要素属性を追加することでイベントを追加します。

testDiv2 に onclick イベントを追加する方法は、Dom 属性を変更することです。

第 1 章では、これら 2 つのメソッドの効果は同じですが、div をクリックするとプロンプトボックスが表示されることに注意してください。

document.getElementById("testDiv2").onclick = showMsg;

は以下と同等です:

<div id="testDiv1" onclick="alert("!!!");">单击事件 1</div>

この 2 つの違いに気づきましたか? 通常、要素の属性を変更してイベントを追加する方法は、実際には匿名関数を作成します:

document.getElementById("testDiv1").onclick = function(event)
{
    alert("!!!");
};

この匿名関数のシグネチャは次のとおりです。手書きの showMsg と同じです。署名が同じなので、showMsg を onclick に直接割り当てることができます。このメソッドの欠点は次のとおりです。

1. "= 割り当てを使用すると、1 つのイベントハンドラーのみをバインドできます。前回から今回まですべてのイベント処理関数はフラッシュされます。

2. イベント関数でイベントオブジェクトを取得する方法 (匿名関数かバインド関数かを問わず) は、異なるブラウザーで特別な処理を必要とします。つまり、イベントオブジェクトはウィンドウオブジェクトの属性です。イベントハンドラーは次のようにイベントオブジェクトにアクセスする必要があります:

       obj.onclick=function()
        {            var oEvent = window.event;
        }

DOM 標準では、イベントオブジェクトは唯一のパラメーターとしてイベントハンドラーに渡される必要があります:

       obj.onclick=function()
        {            var oEvent = arguments[0];
        }

このパラメータにアクセスするために argument[0] を使用することに加えて、パラメータ名を指定することもできます。上記のコードは次と同等です:

       obj.onclick=function(oEvent)
        {
            
        }

現在 DOM 互換のブラウザには、Firefox、Safari、Opera、IE7 などが含まれます

3 . マルチキャストデリゲートの追加機能はブラウザごとに異なります

以下は「JavaScriptパブリックスクリプトライブラリシリーズ(2)：イベントマルチキャストデリゲートの追加方法」で複数のブラウザに対応したマルチキャストデリゲートの追加方法を説明しています。 ":

//统一的为对象添加多播事件委托的方法
/*  
    参数说明:
    oTarget     : 要添加事件的对象.比如"document".
    sEventType  : 事件类型.比如单击事件"click".
    fnHandler   : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"

使用例:

    //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
    var cf = document.getElementById("CalFrame");
    if( cf != null && hideCalendar != null )
    {
        ScriptHelper.addEventListener( document, "click", hideCalendar );
    }
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
    if( oTarget.addEventListener )//for dom
    {
        oTarget.addEventListener( sEventType, fnHandler, false )
    }
    else if( oTarget.attachEvent )//for ie
    {
        oTarget.attachEvent( "on" + sEventType, fnHandler);
    }
}

So we まず、<div onclick="..."></div> のような要素の属性を変更してイベントを追加する方法を放棄する必要があります。試してみてください。マルチキャストイベントデリゲートを追加して 1 つのイベントに複数のイベントハンドラーをバインドするメソッドを使用します。たとえば、ドキュメントオブジェクトのクリックイベントのポップアップレイヤーを閉じるメソッドを追加しても、元のイベント処理には影響しません。ドキュメントオブジェクトの関数

学び続ける

新しいファイル

<!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> <title>javascript中的事件</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function() { document.getElementById("testDiv2").onclick = showMsg; }) function showMsg(event) { alert("!!!"); } </script> </head> <body> <div id="testDiv1" onclick="showMsg();">单击事件 1</div> <div id="testDiv2">单击事件 2</div> </body> </html>

提出するリセットコード

自動運転