jquery绑定事件

简单事件绑定：

click(handler) 单击事件

dbclick(handler) 双击事件

 

mouseenter(handler) 鼠标移入事件

mouseleave(handler)鼠标离开事件

 

focus(handler) 获得焦点事件（input框经常用）

blur(handler)             失去焦点事件

 

keydown(handler) 键盘按下事件

keyup                               键盘弹起来事件

 

change(handler)             事件，如：文本框值改变，下来列表值改变等

select()         用于input 文本框里的内容都被选中

 其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

绑定事件方法

绑定方法1

  $(function(){
            //在jq这样的双重绑定事件不会重叠
            $("button").click(function(){
                alert(1)
            })
            $("button").click(function(){
                alert(2)
            })
        })

绑定方法2 事件源 . bind(" 事件1 事件二"，function(){})  可以绑定多个事件

//绑定事件 方法2 bind 可以给一个对象写多个触发条件，执行一个函数
        $("button").bind("click mouseenter",function(){
            alert(1)
        })

绑定方法3 事件源的父亲 . delegate(" 事件源" ，" 事件1 事件2"，function(){})

//第三种绑定方式 可以给他父级的子盒子绑定事件
            $(".box").delegate(".box2","click mouseenter",function(){
                alert(2)
            })

绑定方法4 .on("事件1 事件2"，“事件源”，{ json 可以当作data来看 }，function(){})

            json可以传参，可以用event获取

            jquery1.7版本后的才可以用

$(".box").on("click",".box2",{"name":111},function(event){
     console.log(event.data)
})

    //最常用的事件绑定
            $(".box2").on("click",{},function(){
                alert(1)
            })
        }

解绑事件

//第一中解绑事件 针对  click mouseenter  bind绑定的事件 用什么绑定的就用什么解除
 $("button").unbind("click");

//第二种解绑方式 delegate
            $(".box").delegate(".box2","click mouseenter",fn);
            $(".box").delegate(".box2","click mouseenter",fn2);
            function fn(){
                alert(2)
            }
            function fn2(){
                alert(3)
            }
            //这样是解除了fn事件的所以事件
            $(".box").undelegate(".box2","mouseenter",fn);

//第三种解绑的方法
$(".box").on("click mouseenter",".box2",{"name":111},function(event){
      alert("0")
 })
 $(".box").off("click",".box2")

事件被触发

$(function () {
            $(document).on("click mouseenter", function () {
                alert("页面被点击了");
            });

            //事件触发(1)(触发浏览器行为)
            $(document).click();
            $(document).mouseenter();

            //事件触发(2)(触发浏览器行为)  点击document的地方都会出发事件
            $(document).trigger("mouseenter");
            $(document).trigger("click");

            //事件触发(3)(不触发浏览器行为) 点击document 地方不出发事件
            $(document).triggerHandler("mouseenter");
            $(document).triggerHandler("click");

            $("input").on("focus", function () {
                alert("我获取了焦点！");
            });

            //事件触发(2)(触发浏览器行为)(执行程序，触动事件)
            $(document).click(function () {
                $("input").trigger("focus");
            });

            // //事件触发(3)(不触发浏览器行为)(只执行程序 " console.log("我获取了焦点！");"，不触动事件(获取鼠标）
            $(document).click(function () {
                $("input").triggerHandler("focus");
            });
        })
    </script>

事件对象

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX 鼠标相对于文档左部边缘的位置

event.target 触发事件源，不一定===this

event.stopPropagation()；        阻止事件冒泡

event.preventDefault();                 阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode       键盘按键代码

<script>
        $(function(){
            $(document).on("click",function(e){
                console.log(e.data);
                console.log(e.currentTarget);
                console.log(e.pageX);
                console.log(e.target);
                console.log(e.stopPropagation);
                console.log(e.preventDefault);
                console.log(e.type);
                console.log(e.which);
                console.log(e.keyCode);
            })
        })
    </script>

简单事件绑定：

click(handler) 单击事件

dbclick(handler) 双击事件

 

mouseenter(handler) 鼠标移入事件

mouseleave(handler)鼠标离开事件

 

focus(handler) 获得焦点事件（input框经常用）

blur(handler)             失去焦点事件

 

keydown(handler) 键盘按下事件

keyup                               键盘弹起来事件

 

change(handler)             事件，如：文本框值改变，下来列表值改变等

select()         用于input 文本框里的内容都被选中

                  

 其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

绑定事件方法

 

绑定方法1

<wiz_code_mirror>

 

 

 

 

 

 

 

        $(function(){

            //在jq这样的双重绑定事件不会重叠

            $("button").click(function(){

                alert(1)

            })

            $("button").click(function(){

                alert(2)

            })

        })

 

 

 

绑定方法2 事件源 . bind(" 事件1 事件二"，function(){})  可以绑定多个事件

 

<wiz_code_mirror>

 

 

 

 

 

 

 

//绑定事件 方法2 bind 可以给一个对象写多个触发条件，执行一个函数

        $("button").bind("click mouseenter",function(){

            alert(1)

        })

 

 

 

绑定方法3 事件源的父亲 . delegate(" 事件源" ，" 事件1 事件2"，function(){})

 

<wiz_code_mirror>

 

 

 

 

 

 

 

  //第三种绑定方式 可以给他父级的子盒子绑定事件

            $(".box").delegate(".box2","click mouseenter",function(){

                alert(2)

            })

 

 

 

绑定方法4 .on("事件1 事件2"，“事件源”，{ json 可以当作data来看 }，function(){})

            json可以传参，可以用event获取

            jquery1.7版本后的才可以用

 

<wiz_code_mirror>

 

 

 

 

 

 

 

$(".box").on("click",".box2",{"name":111},function(event){

     console.log(event.data)

})

 

 

 

<wiz_code_mirror>

 

 

 

 

 

 

 

            //最常用的事件绑定

            $(".box2").on("click",{},function(){

                alert(1)

            })

        }

 

 

 

解绑事件

 

<wiz_code_mirror>

 

 

 

 

 

 

 

//第一中解绑事件 针对  click mouseenter  bind绑定的事件 用什么绑定的就用什么解除

$("button").unbind("click");

 

 

 

 

<wiz_code_mirror>

 

 

 

 

 

 

 

//第二种解绑方式 delegate

            $(".box").delegate(".box2","click mouseenter",fn);

            $(".box").delegate(".box2","click mouseenter",fn2);

            functionfn(){

                alert(2)

            }

            functionfn2(){

                alert(3)

            }

            //这样是解除了fn事件的所以事件

            $(".box").undelegate(".box2","mouseenter",fn);

 

 

 

<wiz_code_mirror>

 

 

 

 

 

 

 

//第三种解绑的方法

$(".box").on("click mouseenter",".box2",{"name":111},function(event){

      alert("0")

 })

$(".box").off("click",".box2")

 

 

 

事件被触发

 

<wiz_code_mirror>

 

 

 

 

 

 

 

$(function () {

            $(document).on("click mouseenter", function () {

                alert("页面被点击了");

            });

 

            //事件触发(1)(触发浏览器行为)

            $(document).click();

            $(document).mouseenter();

 

            //事件触发(2)(触发浏览器行为)  点击document的地方都会出发事件

            $(document).trigger("mouseenter");

            $(document).trigger("click");

 

            //事件触发(3)(不触发浏览器行为) 点击document 地方不出发事件

            $(document).triggerHandler("mouseenter");

            $(document).triggerHandler("click");

 

            $("input").on("focus", function () {

                alert("我获取了焦点！");

            });

 

            //事件触发(2)(触发浏览器行为)(执行程序，触动事件)

            $(document).click(function () {

                $("input").trigger("focus");

            });

 

            // //事件触发(3)(不触发浏览器行为)(只执行程序 " console.log("我获取了焦点！");"，不触动事件(获取鼠标）

            $(document).click(function () {

                $("input").triggerHandler("focus");

            });

        })

    </script>

 

 

 

事件对象

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX 鼠标相对于文档左部边缘的位置

event.target 触发事件源，不一定===this

event.stopPropagation()；        阻止事件冒泡

event.preventDefault();                 阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode       键盘按键代码

 

<wiz_code_mirror>

 

 

 

 

 

 

 

    <script>

        $(function(){

            $(document).on("click",function(e){

                console.log(e.data);

                console.log(e.currentTarget);

                console.log(e.pageX);

                console.log(e.target);

                console.log(e.stopPropagation);

                console.log(e.preventDefault);

                console.log(e.type);

                console.log(e.which);

                console.log(e.keyCode);

            })

        })

    </script>