jQuery事件绑定

事件绑定

jquery事件的简单操作:

  • $().事件类型(function事件处理);

  • $().事件类型();


1 . jquery事件绑定

$().bind(事件类型,function事件处理);

$().bind(类型1 类型2 类型3,事件处理);   //给许多不同类型的事件绑定同一个处理

$().bind(json对象);  //同时绑定多个不同类型的事件

(事件类型:click  mouseover  mouseout  focus  blur 等等)

事件处理:有名函数、匿名函数

<!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(事件类型);     //取消指定类型的事件

③ $().unbind(事件类型,处理);   //取消指定类型的指定处理事件

注意:第③种取消事件绑定,事件处理必须是有名函数。

<!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>
提交重置代码