masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

mengikat acara jQuery

Pengikatan acara

Pengendalian mudah acara jquery:

  • $().Jenis acara(fungsi Acara pengendalian);

  • $().Jenis acara();

1. mengikat acara jquery

$().bind (jenis acara, pengendalian acara fungsi);

$ () .bind(Type 1 Type 2 Type 3, event processing); //Ikat proses yang sama kepada pelbagai jenis acara

$().bind(json object); pelbagai jenis acara

(Jenis acara: klik alih tetikus keluar fokus kabur, dsb.)

Pemprosesan acara: fungsi bernama, fungsi tanpa nama

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        //同一个对象绑定多个click事件
        $(function(){
            $('div').bind('click',function(){
                console.log('谁在碰我？');
            });
            $('div').bind('click',function(){
                console.log('谁又在碰我？');
            });
            $('div').bind('mouseover',function(){
                //给div设置背景色
                $(this).css('background-color','lightgreen');
            });
            $('div').bind('mouseout',function(){
                //给div设置背景色
                $(this).css('background-color','lightblue');
            });
        });
        </script>
        <style type="text/css">
        div {width:300px; height:200px; background-color:lightblue;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

1.2 Batalkan pengikatan acara

① $().unbind(); //Batalkan semua acara

② $().unbind(jenis acara); //Batalkan acara jenis yang ditentukan

③ $().unbind(event type, processing); //Batalkan acara pemprosesan yang ditentukan bagi jenis yang ditentukan

Nota: Untuk jenis ③ pembatalan pengikatan acara, pemprosesan acara mestilah fungsi bernama. 

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        //unbind()取消事件绑定操作
        //以下f1和f2要定义到最外边，使用没有任何影响
        function f1(){
            console.log(1111);
        }
        function f2(){
            console.log(2222);
        }
        $(function(){
            $('div').bind('click',function(){
                console.log('谁在碰我？');
            });
            $('div').bind('click',function(){
                console.log('谁又在碰我？');
            });
            $('div').bind('click',f1);
            $('div').bind('click',f2);

            $('div').bind('mouseover',function(){
                //给div设置背景色
                $(this).css('background-color','lightgreen');
                //$('div').css('background-color','lightgreen');
            });
            $('div').bind('mouseout',function(){
                //给div设置背景色
                $(this).css('background-color','lightblue');
                //$('div').css('background-color','lightgreen');
            });
        });
        function cancel(){
            //取消事件绑定
            $('div').unbind();  //取消全部事件
        }
        </script>

        <style type="text/css">
        div {width:300px; height:200px; background-color:lightblue;}
        </style>
    </head>
    <body>
        <div></div>
        <input type="button" value="取消" onclick="cancel()">
    </body>
</html>

Pengikatan acara hanyalah satu bentuk operasi acara yang kaya.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> //同一个对象绑定多个click事件 $(function(){ $('div').bind('click',function(){ console.log('谁在碰我？'); }); $('div').bind('click',function(){ console.log('谁又在碰我？'); }); $('div').bind('mouseover',function(){ //给div设置背景色 $(this).css('background-color','lightgreen'); }); $('div').bind('mouseout',function(){ //给div设置背景色 $(this).css('background-color','lightblue'); }); }); </script> <style type="text/css"> div {width:300px; height:200px; background-color:lightblue;} </style> </head> <body> <div></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)  492796 permainan