jQuery部分知识点事件总结(via 代码)

1，元素绑定多个事件 

 $(function () {
            //鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框
            //鼠标进入
//            $("#btn").mouseover(function () {
//                $(this).css("backgroundColor","red");
//            });
//            //鼠标离开
//            $("#btn").mouseout(function () {
//                $(this).css("backgroundColor","");
//            });
//            //点击事件
//            $("#btn").click(function () {
//                alert("哈哈");
//            });
            //链式编程
//            $("#btn").mouseover(function () {
//                $(this).css("backgroundColor","red");
//            }).mouseout(function () {
//                $(this).css("backgroundColor","");
//            }).click(function () {
//                alert("哈哈");
//            });
            //bind()方法:第一个参数是事件名字,第二个参数是事件处理函数-匿名函数

//            $("#btn").bind("click",function () {
//                alert("我被点了");
//            });
            //bind()方法可以为元素同时绑定多个事件
            $("#btn").bind({"click":function(){
                alert("我被点了");
            },"mouseover":function(){
                $(this).css("backgroundColor","red");
            },"mouseout":function(){
                $(this).css("backgroundColor","");
            }});


        });

bind()方法可以为元素绑定多个事件，bind({},{},{},...)

2，bind绑定的另外一种方式，delgate

//        $(function () {
//            //为按钮注册鼠标进入和离开的事件--绑定--bind
//            var i=0;
//            $("#btn").bind("mouseover mouseout",function () {
//                i++;
//                console.log(i);
//            });
//        });

        $(function () {
            //点击按钮通过bind方式为div中添加一个元素
            $("#btn").bind("click",function () {
                //创建一个p标签,添加到div中
                $("<p>这是一个p</p>").appendTo($("#dv"));
                //方法
                //点击p标签弹出对话框
                //delegate--->绑定事件
                /*
                *
                * delegate:
                * 参数:3个
                * 1.要绑定事件的元素---p
                * 2.要绑定的事件的名字---click
                * 3.绑定事件的处理函数---匿名函数
                *
                * */
                $("#dv").delegate("p","click",function () {
                    alert("我被点了");
                });
            });
        });

3，on的绑定事件

//通过on为按钮绑定点击的事件,创建一个p标签加入到div中,通过on的方式为div中的p绑定点击事件
        $(function () {
            $("#btn").on("click",function () {
                //创建p添加到div中
                $("#dv").append($("<p>这是一个p</p>"));
                //为div中的p标签绑定事件
                /*
                * on方法： 两个参数:1事件的名字,2事件处理函数
                * on方法:三个参数: 1,事件的名字, 2.要绑定事件的元素--p,3事件处理函数
                * on是父级元素调用,目的:为子级元素去绑定事件
                *
                * */
                $("#dv").on("click","p",function () {
                    alert("我被点了");
                });
            });
        });

推荐使用on进行绑定

4，元素的解绑

        $(function () {
            //为div和p都绑定点击事件
//            $("#dv>p").click(function () {
//                alert("p被点了");
//            });
            $("#dv").delegate("p","click",function () {
                alert("p被点了");
            });
            $("#dv").click(function () {
                alert("div被点了");
            });
            $("#btn1").click(function () {
               // $("#dv").off("click");
                //下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
                //$("#dv").off("click","**");
                $("#dv").off();//移除父级元素和子级元素的所有的事件
            });
            //如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
            //但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑
        });

        /*
        *
        * bind
        * unbind
        *
        * on
        * off
        *
        * delegate
        * undelegate
        *
        *
        * */

        * bin          * unbind
    
        * on          * off
        
        * delegate   * undelegate
   5，事件触发

   使用click / trigget / triggerHandler

其中triggerHandler不会触发浏览器的默认事件，如光标在文本框里闪烁

 <script>
        $(function () {
            $("#btn1").click(function () {
                $(this).css("backgroundColor","red");
            });
            //点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
            $("#btn2").click(function () {
                //触发事件--3三种方式
                //$("#btn1").click();
                //trigget()方法中需要写上触发事件的名字
                //$("#btn1").trigger("click");//触发事件
                $("#btn1").triggerHandler("click");//触发事件
            });
        });
    </script>

6，事件的对象

 $(function () {
            //为div中的按钮绑定事件,获取事件对象中内容
            $("#dv").on("click","input",function (event) {
                //获取函数在调用的时候,有几个参数
                //console.log(arguments[0]);
                console.log(event);
                //event.delegateTarget----->div--->谁代替元素绑定的事件--div
                //event.currentTarget----->input--->真正是谁绑定的事件
                //event.target---->input----触发的事件
            });
        });

触发事件后调用回调函数返回的event里的不同target 

//event.delegateTarget----->div--->谁代替元素绑定的事件--div
                //event.currentTarget----->input--->真正是谁绑定的事件
                //event.target---->input----触发的事件

7，键盘值获取

$(document).keydown(function (e) {
                var keyCode=e.keyCode;//键盘按下后的键对应的键值
                switch (keyCode){
                    case 65:$("#dv").css("backgroundColor","red");break;
                    case 66:$("#dv").css("backgroundColor","green");break;
                    case 67:$("#dv").css("backgroundColor","blue");break;
                    case 68:$("#dv").css("backgroundColor","yellow");break;
                    case 69:$("#dv").css("backgroundColor","black");break;
                }
            });

通过keydown方法来获取e.keyCode来获取键值

8，事件冒泡和取消事件冒泡

<script>
        //事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
        //元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发
        //取消事件冒泡
        //jQuery中  return false
        $(function () {
            $("#dv1").click(function () {
                alert("dv1被点了"+$(this).attr("id"));
            });
            $("#dv2").click(function () {
                alert("dv2被点了"+$(this).attr("id"));
                //$("body").css("backgroundColor","black");
            });
            $("#dv3").click(function () {
                alert("dv3被点了"+$(this).attr("id"));
                return false;//取消事件冒泡
            });
        });
    </script>

 事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
       例： 元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发
        取消事件冒泡的方法，在jQuery中  return false

另外取消浏览器的默认事件，比如超链接的点击事件，也是使用return false

9, jQuery多库共存的问题

//让jquery对$对象进行释放控制权
       var xx=$.noConflict();
       //从此以后xx就是曾经的$---一样的
       var $=100;//$原本是对象--->变量
       xx(function () {
           xx("#btn").click(function () {
               alert("哈哈");
           });
       });

$.noConflict()可以对$对象进行释放，$.noConflict(true)可以对$和jQuery进行释放。