jQueryイベントバインディング

イベントバインディング

Jqueryイベントの簡単な操作:

$().Event type (関数イベント処理);
$().Event type();

1. jqueryイベントバインディング

$().bind(イベントタイプ、関数イベント処理);

$().bind(type 1 type 2 type 3、イベント処理);多くの異なるタイプのイベントに同じハンドラーを適用します

$().bind(json object); //複数の異なるタイプのイベントを同時にバインドします

(イベントタイプ: クリック、マウスオーバー、マウスアウト、フォーカスブラーなど)

イベント処理: 名前付き関数、匿名関数

<!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 イベントバインディングのキャンセル

① $().unbind(); //全てのイベントをキャンセル

② $().unbind(event type); // 指定されたタイプのイベントをキャンセルイベント

③ $().unbind(event type, process); //指定されたタイプの指定された処理イベントをキャンセルします

注: ③のイベントバインディングのキャンセルのタイプでは、イベント処理は名前付き関数である必要があります。

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

イベントバインディングは、リッチイベント操作の単なる形式です。

学び続ける

新しいファイル

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

提出するリセットコード

自動運転