jquery事件怎么實現

這篇文章主要講解了“jquery事件怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“jquery事件怎么實現”吧！

jquery事件：1、鼠標事件，包括click單擊事件、mouseover事件等；2、鍵盤事件，包括keydown按下按鍵、keyup釋放按鍵等；3、表單事件，包括focus獲得焦點、blur失去焦點等；4、綁定事件，bind綁定事件；5、復合事件，包括hover方法觸發事件、toggle()方法觸發事件等等。

本教程操作環境：windows10系統、jquery3.4.1版本、Dell G3電腦。

jquery事件都有哪些

jQuery事件是對JavaScript事件的封裝，常用事件如：鼠標事件，鍵盤事件，表單事件，綁定事件，復合事件等等

1.鼠標事件

方法如下

click() :單擊事件、觸發或將函數綁定到指定元素的click事件

mouseover(): 觸發或將函數綁定到指定元素的mouseover事件

mouseout() ：觸發或將函數綁定到指定元素的mouseout的事件

代碼示例：

 $(function () {
            $("input").click(function () {
                $("li").mouseover(function () {
                    $(this).css("background", "green");
                }).mouseout(function () {
                    //this.style.background = "";
                    this.style.cssText = "background:";
                });
            });
        });

2.鍵盤事件：

方法如下：

keydown(): 按下按鍵時、觸發或將函數綁定到指定元素的keydown事件

keyup(): 釋放按鍵時、觸發或將函數綁定到指定元素的keyup事件

keypress(): 產生可打印的字符時、觸發或將函數綁定到指定元素的keypress事件

代碼示例：

  $(function () {
        $("p input").keyup(function () {
            $("#events").append("keyup");
        }).keydown(function () {
            $("#events").append("keydown");
        }).keypress(function () {
            $("#events").append("keypress");
        });
        $(document).keydown(function (event) {
            if (event.keyCode == "13") {
                //按enter鍵
                alert("確認要提交么?");
            }
        });
    });

3.表單事件：

方法如下：

focus() : 獲得焦點、觸發或將函數綁定到指定元素的focus事件

blur() : 失去焦點、觸發或將函數綁定到指定元素的blur事件

代碼示例：

// 查詢輸入框
  $("input[name='search']").focus(function(){
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
   $(this).val("請輸入要查詢的問題"); 
  });

2、

 $(function () {
 //給文本框添加邊框樣式
     $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
    });
  });

4、綁定事件：

語法解析：

bind(type,[data],fn),其中data不是必需的

type:事件類型、主要包括blur、focus、click、mouseout等基礎事件，此外也還可以是自定義事件

fn : 用來綁定的處理函數

代碼示例：

綁定一個、

$("input[name=event_1]").bind("click",function() {
 $("p").css("background-color","#F30");
});

綁定多個、

$("input[name=event_1]").bind({
mouseover: function () {
 $("ul").css("display", "none");
},
mouseout: function () {
 $("ul").css("display", "block");
}
});

移除方法：

unbind([type],[fn]) 與綁定事件剛好相反,如果方法沒有參數則表示移除全部的事件

unbind如果要移除多個只需在兩兩之間添加一個空格即可

代碼示例：

 $(function () {
            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");
    });

注意：當unbind()不帶參數時，表示移除所綁定的全部事件

5、復合事件

hover()方法

語法：hover(enter,leave);

該方法相當于mouseover與mouseout事件的組合

代碼示例：

$("li").hover(function() {
               $("li").css("background", "gray");
           }, function() {
               $("li").css("background", "green");
           });

toggle()方法

toggle()方法用于模擬鼠標連續click事件

代碼示例：

$("body").toggle(
function () { }, //第一次點擊觸發
function () { }, //第二次點擊觸發
function () { } //第三次點擊觸發
...     //...
);

同時toggle()方法還有一個作用：切換元素可見狀態

$('input').toggle( 
  function () {
  $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示
  },
  function () {
   $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示
  }
 );

感謝各位的閱讀，以上就是“jquery事件怎么實現”的內容了，經過本文的學習后，相信大家對jquery事件怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！