JQuery入門（五）JQuery事件機制
阿新 • • 發佈：2018-11-26
前言
本章學習JQuery事件機制的相關知識
方法
1.概念
我們知道，通過原生的JS的事件機制我們通常是將對應的事件方法新增到我們的html元素之中，通過響應的事件來呼叫相關的函式。假如說需要新增的事件的元素多了，豈不是十分的麻煩，JQuery的事件機制完善了這一弊端！
本章用到的程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> </script> </head> <body> <div> <form action="#" method="post" id="ff"> <h5>註冊資訊</h5> 使用者名稱：<input type="text" name="username" id="username" value="張三"/><span id="usernameSpan"></span><br/> 性 別：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<span></span><br/> 愛 好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳 <input type="checkbox" name="hobby" value="棋牌" />棋牌<span></span><br/> 畢業院校：<select name="school" id="school" class="sd"> <option value="--請選擇--">--請選擇--</option> <option value="清華大學">清華大學</option> <option value="北京大學">北京大學</option> <option value="挖掘機技術學院">挖掘機技術學院</option> </select><span></span><br/> 個人簡介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><span></span><br/> <input id="sub" type="button" value="提交"/> <input type="reset" name="" id="" value="重置" /> </form> </div> </body> </html>
2.語法講解
1）元素物件繫結click事件
語法1：元素物件.click(function(){函式體})：該方法用來給一個元素物件新增單擊事件
語法2：元素物件.on(event,childSelector,data,function)：該方法用來給一個元素物件新增指定事件
例項：給id為sub的按鈕繫結單擊事件的兩種方式
$(function(){
$("#sub").click(function(){
alert("提交成功！");
});
});$(function(){ $("body").on("click","#sub",function(){ alert("提交成功！"); }); });
其他事件的繫結同理
附錄：JQuery事件方法大全
| 方法 | 描述 |
|---|---|
| bind() | 向元素新增事件處理程式 |
| blur() | 新增/觸發失去焦點事件 |
| change() | 新增/觸發 change 事件 |
| click() | 新增/觸發 click 事件 |
| dblclick() | 新增/觸發 double click 事件 |
| delegate() | 向匹配元素的當前或未來的子元素新增處理程式 |
| die() | 在版本 1.9 中被移除。移除所有通過 live() 方法新增的事件處理程式 |
| error() | 在版本 1.8 中被廢棄。新增/觸發 error 事件 |
| event.currentTarget | 在事件冒泡階段內的當前 DOM 元素 |
| event.data | 包含當前執行的處理程式被繫結時傳遞到事件方法的可選資料 |
| event.delegateTarget | 返回當前呼叫的 jQuery 事件處理程式所新增的元素 |
| event.isDefaultPrevented() | 返回指定的 event 物件上是否呼叫了 event.preventDefault() |
| event.isImmediatePropagationStopped() | 返回指定的 event 物件上是否呼叫了 event.stopImmediatePropagation() |
| event.isPropagationStopped() | 返回指定的 event 物件上是否呼叫了 event.stopPropagation() |
| event.namespace | 返回當事件被觸發時指定的名稱空間 |
| event.pageX | 返回相對於文件左邊緣的滑鼠位置 |
| event.pageY | 返回相對於文件上邊緣的滑鼠位置 |
| event.preventDefault() | 阻止事件的預設行為 |
| event.relatedTarget | 返回當滑鼠移動時哪個元素進入或退出 |
| event.result | 包含由被指定事件觸發的事件處理程式返回的最後一個值 |
| event.stopImmediatePropagation() | 阻止其他事件處理程式被呼叫 |
| event.stopPropagation() | 阻止事件向上冒泡到 DOM 樹，阻止任何父處理程式被事件通知 |
| event.target | 返回哪個 DOM 元素觸發事件 |
| event.timeStamp | 返回從 1970 年 1 月 1 日到事件被觸發時的毫秒數 |
| event.type | 返回哪種事件型別被觸發 |
| event.which | 返回指定事件上哪個鍵盤鍵或滑鼠按鈕被按下 |
| event.metaKey | 事件觸發時 META 鍵是否被按下 |
| focus() | 新增/觸發 focus 事件 |
| focusin() | 新增事件處理程式到 focusin 事件 |
| focusout() | 新增事件處理程式到 focusout 事件 |
| hover() | 新增兩個事件處理程式到 hover 事件 |
| keydown() | 新增/觸發 keydown 事件 |
| keypress() | 新增/觸發 keypress 事件 |
| keyup() | 新增/觸發 keyup 事件 |
| live() | 在版本 1.9 中被移除。新增一個或多個事件處理程式到當前或未來的被選元素 |
| load() | 在版本 1.8 中被廢棄。新增一個事件處理程式到 load 事件 |
| mousedown() | 新增/觸發 mousedown 事件 |
| mouseenter() | 新增/觸發 mouseenter 事件 |
| mouseleave() | 新增/觸發 mouseleave 事件 |
| mousemove() | 新增/觸發 mousemove 事件 |
| mouseout() | 新增/觸發 mouseout 事件 |
| mouseover() | 新增/觸發 mouseover 事件 |
| mouseup() | 新增/觸發 mouseup 事件 |
| off() | 移除通過 on() 方法新增的事件處理程式 |
| on() | 向元素新增事件處理程式 |
| one() | 向被選元素新增一個或多個事件處理程式。該處理程式只能被每個元素觸發一次 |
| $.proxy() | 接受一個已有的函式，並返回一個帶特定上下文的新的函式 |
| ready() | 規定當 DOM 完全載入時要執行的函式 |
| resize() | 新增/觸發 resize 事件 |
| scroll() | 新增/觸發 scroll 事件 |
| select() | 新增/觸發 select 事件 |
| submit() | 新增/觸發 submit 事件 |
| toggle() | 在版本 1.9 中被移除。新增 click 事件之間要切換的兩個或多個函式 |
| trigger() | 觸發繫結到被選元素的所有事件 |
| triggerHandler() | 觸發繫結到被選元素的指定事件上的所有函式 |
| unbind() | 從被選元素上移除新增的事件處理程式 |
| undelegate() | 從現在或未來的被選元素上移除事件處理程式 |
| unload() | 在版本 1.8 中被廢棄。新增事件處理程式到 unload 事件 |
| contextmenu() | 新增事件處理程式到 contextmenu 事件 |
| $.holdReady() | 用於暫停或恢復.ready() 事件的執行 |