masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

acara jQuery dan objek acara

Pertama sekali, mari kita lihat cara yang sering kami gunakan untuk menambah acara:

<!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>

Kami paling kerap menambah acara dengan menambahkan atribut elemen onclick pada elemen.

Tambah acara onclick untuk testDiv2 Caranya ialah dengan mengubah suai atribut Dom.

Dalam bab sebelumnya, kami telah menjelaskan sifat elemen dan atribut Dom Kesan kedua-dua kaedah ini adalah sama Apabila div diklik, gesaan kotak akan dipaparkan.

Sila ambil perhatian bahawa walaupun kesannya adalah sama, ia tidak setara.

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

bersamaan dengan:

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

Adakah anda perasan perbezaan antara dua? Kami biasanya menggunakan penambahan atribut elemen yang diubah suai Kaedah acara sebenarnya mencipta fungsi tanpa nama: 

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

Tandatangan fungsi tanpa nama ini adalah sama dengan tandatangan showMsg tulisan tangan kami, jadi showMsg boleh ditugaskan terus kepada onclick.

Kelemahan kaedah ini ialah:

1. Hanya satu fungsi pengendalian acara boleh diikat pada acara Menggunakan tugasan "=" akan memadamkan semua fungsi pengendalian acara yang sebelumnya terikat kali ini.

2 Cara untuk mendapatkan objek acara dalam fungsi acara (sama ada fungsi tanpa nama atau fungsi terikat) memerlukan pemprosesan khas dalam pelayar yang berbeza:

Dalam IE, objek acara ialah atribut objek tetingkap . Pengendali acara mesti mengakses objek acara seperti ini:

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

Dalam standard DOM, objek acara mesti diluluskan sebagai satu-satunya parameter kepada pengendali acara:

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

Selain menggunakan argument[0] untuk mengakses parameter ini , kami juga boleh menentukan nama parameter Kod di atas adalah bersamaan dengan: 

       obj.onclick=function(oEvent)
        {
            
        }

Pelayar serasi DOM pada masa ini termasuk Firefox, Safari. . Siri Perpustakaan Skrip (2): Kaedah Menambah Perwakilan Berbilang Acara" Kaedah Perwakilan: 

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

Contoh penggunaan: 

    //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
    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);
    }
}

Jadi kita harus meninggalkan pengubahsuaian <div onclick= dahulu "..."></div> Cara menambah acara pada atribut elemen Cuba gunakan kaedah menambah perwakilan acara berbilang untuk mengikat berbilang fungsi pemprosesan acara sebagai contoh, menambah kaedah untuk menutup pop -lapisan atas untuk peristiwa klik objek dokumen Menggunakan multicast tidak akan menjejaskan fungsi pengendalian peristiwa asal objek dokumen.

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492873 permainan