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

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik

mengikat acara jQuery

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]