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