四、jquery中的事件与应用
? ? ? 當用戶瀏覽頁面時，瀏覽器會對頁面代碼進行解釋或編譯--這個過程實質上是通過時間來驅動的，即頁面在加載時，執行一個Load事件，在這個事件中實現瀏覽器編譯頁面代碼的過程。時間無論在頁面元素本身還是在元素與人機交互中，都占有十分重要的地位。
?
1.事件中的冒泡現象：
時間在出發后分為兩個階段，一個是捕獲（capture），另一個則是冒泡（bubbling）；大多數瀏覽器不支持捕獲階段，jquery也不支持。因此時間出發后往往執行冒泡過程。
冒泡
<script type="text/javascript">$(function() {var intI = 0; //記錄執行次數$("body,div,#btnShow").click(function(event) {//點擊事件intI++; //次數累加$(".clsShow").show()//顯示.html("您好，歡迎來到jQuery世界!")//設置內容.append("<div>執行次數 <b>" + intI + "</b> </div>"); //追加文本 })})</script>?
時間在執行過程中純在冒泡現象，即雖然單機的是按鈕，但按鈕的外圍<div>元素的時間也被出發，同時<div>元素的外圍<body>元素的時間也隨之被處罰，其整個事件波及的過程就像水泡一樣向外冒，故稱之為冒泡過程。
?
阻止冒泡的發生
在實際在實際的，我們并不希望時間的冒泡現象發生，即單機按鈕就執行單一的單機時間，并不出發其他外圍的時間。在jquery中通過stopProgragation（）方法可以組織冒泡過程的發生。在上述代碼中加入如下代碼即可
event.stopPropagation();//阻止冒泡過程另外還可以通過語句retrun false實現挺值時間的冒泡過程。
?
2.頁面載入事件
ready()方法是jquery中的頁面載入時間方法，該方法類似于傳統的javascript中的onload()方法
兩者區別就是方法的執行時間的不同，onload()：頁面中的全部元素加載完全才觸發，ready():加載前就觸發。
ready()的工作原理
在jquery腳本加載到頁面時，會設置一個isReady的標記，用于監聽頁面加載的進度。遇到執行ready()，通過查看isReady是否被設置，如果未被設置，那么就說明頁面并未加載完成，在次琴光下，將未完成的部分用一個數組緩存起來，當全部家在完成后，再將未完成的部分通過緩存一一執行。
?
ready()方法的寫法
寫法一：
$(document).ready(function(){//代碼部分 })寫法二：
$(function(){//代碼部分 })?
3.綁定事件
使用bind()方法綁定事件：
bind()方法是為每個選擇的元素的事件綁定處理函數，其語法格式如下：
bind(type,[data],fn)?type:一個或多個類型的從字符串，包括click、change、blur、focus、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleft、select、submit、keydown、keypress、keyup、error
data：作為event.data屬性值傳遞給事件對象的額外數據對象
fn：綁定到每個選擇元素的事件的中的處理函數。
<script type="text/javascript">$(function() {$("#btnBind").bind("click mouseout", function() {$(this).attr("disabled", "disabled"); //按鈕不可用 })})</script>?
4.切換事件
有兩個方法用于事件的切換，一個是hover()，另一個是方法toggle()。
4-1.hover()方法：
hover()方法可以是元素在鼠標懸停與鼠標移除的事件 中進行切換
下列代碼是等價的：
$(".clsTitle").hover(function() {//執行代碼一}, function() {//執行代碼二})等價于
$("a").mouseenter(function(){//執行代碼一 }) $("a").mouseleave(function(){//執行代碼二 })?
4-2.toggle方法：
toggle方法可以因此調用N各函數，知道最后一個函數，然后重復對這些函數輪播調用。
toggle(fn,fn2,[fn3,fn4])其中，參數是因此被調用的函數
?
5.移除事件
unbind()方法是移除元素綁定的事件，其調用的語法格式如下：
unbind([type],[fn])其中，參數type為移除的事件類型，fn為需要移除的事件處理函數。如果該方法沒有參數，則移除所有綁定的事件；如果帶有參數type，移除該參數所制定的事件類型；如果帶有桉樹fn，則至移除綁定時的函數fn。
?
6.其他事件
6-1.one()方法：
為所選綁定元素綁定一個浸出法一次的處理函數，語法格式為：
one(type,[data],fn)6-1.trigger()方法：
可以實現觸發性事件，既不必用戶做任何事件，自動執行該方法中的事件。示例代碼如下：
<script type="text/javascript">$(function() {var oTxt = $("input"); //獲取文本框oTxt.trigger("select"); //自動選中文本框oTxt.bind("btn_Click", function() {//編寫文本框自定義事件var txt = $(this).val(); //獲取自身內容$("#divTip").html(txt); //顯示在頁面中 })oTxt.trigger("btn_Click"); //自動觸發自定義事件 })</script>?
轉載于:https://www.cnblogs.com/but-he/p/6124267.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的四、jquery中的事件与应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： app——分享wap站，数据处理页面展示
- 下一篇： 数据结构之迷宫问题求解(一)利用栈与递归