jquery绑定事件

时间 2019-11-17

标签 jquery 绑定事件栏目 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(){}) 能够绑定多个事件jquery

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

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

//第三种绑定方式 能够给他父级的子盒子绑定事件
            $(".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>