jquery绑定事件

简单事件绑定：
click(handler) 单击事件
dbclick(handler) 双击事件
 
mouseenter(handler) 鼠标移入事件
mouseleave(handler)鼠标离开事件
 
focus(handler) 获得焦点事件（input框经常用）
blur(handler)             失去焦点事件
 
keydown(handler) 键盘按下事件
keyup                               键盘弹起来事件
 
change(handler)             事件，如：文本框值改变，下来列表值改变等
select()         用于input 文本框里的内容都被选中
 
绑定事件方法
绑定方法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 文本框里的内容都被选中
                  
 
绑定事件方法
 
绑定方法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>
 
 
 
posted @ 2017-12-06 23:21  Me*淡定  阅读(3832)  评论(0)  编辑  收藏  举报