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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。