jQuery 이벤트 바인딩

이벤트 바인딩

Jquery 이벤트 단순 작업:

$().이벤트 유형(함수 이벤트 처리);
$().이벤트 유형();

1.jquery 이벤트 바인딩

$().bind(이벤트 유형, 함수 이벤트 처리);

$().bind(유형 1 유형 2 유형 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

3 $().unbind(event type,processing); //지정된 유형의 지정된 처리 이벤트를 취소합니다

참고: ③ 이벤트 바인딩 취소 유형에서는 이벤트 처리가 명명된 함수여야 합니다.

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

제출하다 코드 재설정

자동운전