thinkPHP js文件中U方法不被解析問題的解決方法
820
2024-01-19
事件是用戶操作時(shí)頁面或頁面加載時(shí)引發(fā)的用來完成javascript和HTML之間的交互操作。常見的元素點(diǎn)擊事件、鼠標(biāo)事件、鍵盤輸入事件等，較傳Javascript
相比JQuery增加并擴(kuò)展了基本的事件處理機(jī)制，極大的增強(qiáng)了事件處理的能力。
一、DOM加載事件
頁面加載完畢后瀏覽器會(huì)通過javascript為Dom元素加載事件，使用Javascript時(shí)候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法,下表
展示兩個(gè)事件的異同。
window.onload方法 $(document).ready()方法 執(zhí)行時(shí)機(jī) 必須等待所有內(nèi)容加載完成后才能執(zhí)行 頁面的DOM元素繪制完成后可以執(zhí)行不必等待全部?jī)?nèi)容加載完成。 綁定函數(shù)個(gè)數(shù)
該方法能夠綁定一個(gè)函數(shù)，如果綁定多個(gè)只能執(zhí)行最后的一個(gè)綁定。例：
window.onload=function(){alert("1");}
window.onload=function(){alert("2");}
執(zhí)行結(jié)果只執(zhí)行最后綁定的函數(shù)結(jié)果是打印：2.
能夠注冊(cè)多個(gè)函數(shù)，按綁定順序執(zhí)行綁定函數(shù)。例：
$(document).ready(funtction(){alert("1");});
$().ready(function(){alert("2");});
執(zhí)行結(jié)果是順序執(zhí)行綁定的函數(shù)：先打印1.然后再打印2.
簡(jiǎn)化寫法 無 $().ready();$.ready()二、事件處理
當(dāng)文件加載完成后就可以為元素添加事件處理，進(jìn)而事件執(zhí)行某些動(dòng)作完成相關(guān)操作。jquery中有多種事件處理方法，主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法為匹配的元素進(jìn)行特定的事件綁定。bind()方法格式如下：
bind(type,[ data],fun);
bind()方法有三個(gè)參數(shù)，各個(gè)參數(shù)說明如下：
第一個(gè)參數(shù)是事件類型，主要如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定義名稱，Jquery中的事件綁定類型比javascript少了"on",因此jquery中事件click對(duì)應(yīng)javascript中的onclick函數(shù)。
第二個(gè)參數(shù)是可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。
第三個(gè)參數(shù)是用來綁定的處理函數(shù)。
為按鈕綁定單擊事件示例：
<input type="button" id="btn1" value="單擊">
$("#btn1").bind("click",function(){alert("單擊事件綁定");});
bind()方法為元素綁定的事件一直有效直到unbind()方法或者刪除元素。如果想要綁定事件只能執(zhí)行一次就要使用one()方法綁定事件。one()同bind()方法一樣，區(qū)別在于one()方法綁定的事件只能執(zhí)行一次。
為按鈕綁定一次性事件示例：
<input type="button" id="btn1" value="單擊">
$("#btn1").one("click",function(){alert("單擊事件綁定");});
unbind()方法為元素取消事件綁定，unbind()方法的格式如下：
$(selctor).unbind([type],[data])
unbind()方法是元素bind()方法的反向操作，從每個(gè)匹配的元素中刪除綁定的事件。當(dāng)沒有參數(shù)時(shí)候刪除所有的綁定事件。如果提供了事件類型的參數(shù)則刪除指定的綁定事件。如果指定了事件類型，第二個(gè)參數(shù)指定了函數(shù)名稱則刪除事件類型中與第二個(gè)參數(shù)名稱對(duì)應(yīng)的事件。
示例：
<input type="button" id="btn1" value="click" />
<input type="button" id="btn2" value="removeBind" />
$("#btn1").bind("click", fun1 = function () { alert("事件1"); });
$("#btn1").bind("click", fun2 = function () { alert("事件2"); });
$("#btn2").bind("click", function () {
$("#btn1").unbind("click", fun2);
});
該示例使用unbind()方法的二個(gè)參數(shù)形式移除第二次綁定的事件處理函數(shù)。
live()方法為元素動(dòng)態(tài)綁定事件，使用該方法綁定事件后，新加對(duì)應(yīng)元素也能觸發(fā)相應(yīng)事件。live()方法格式如下：
$(selector).live([type],[data],fun);
live動(dòng)態(tài)綁定示例：
$("p").live("click",function(){$(this).hide();});
該示例為所有的p元素節(jié)點(diǎn)動(dòng)態(tài)添加了click事件，無論是現(xiàn)有的p元素節(jié)點(diǎn)還是以后要添加的p元素節(jié)點(diǎn)都有會(huì)中點(diǎn)單擊時(shí)候觸發(fā)hide()從而隱藏自己。die()方法是live()方法的反向操作，結(jié)果live()方法動(dòng)態(tài)綁定的事件和unbind()方法一樣。使用die()方法取法動(dòng)態(tài)綁定后，所有動(dòng)態(tài)綁定的事件將刪除。
trigger()方法在匹配的元素上觸發(fā)參數(shù)中的事件，該方法會(huì)觸發(fā)瀏覽器默認(rèn)事件，返回false阻止瀏覽器默認(rèn)事件。trigger()方法格式如下:
$(selector).trigger([type],[data]);
trigger()方法示例：
$("form:first").trigger("submit");
該示例觸發(fā)第一個(gè)from表單的submit操作。
triggerHandler()方法這個(gè)方法會(huì)觸發(fā)綁定事件，但是不會(huì)觸發(fā)瀏覽器默認(rèn)事件。與trigger()方法觸發(fā)后返回false效果一樣。使用方法和trigger一樣。
三、事件
事件處理中已經(jīng)列出了主要的事件類型如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各個(gè)事件類型主要是兩種用法綁定事件、觸發(fā)事件。以click事件為例，click方法格式如下：綁定事件$(selector).click(functiron(){//函數(shù)體})，觸發(fā)事件$(selector).click()。例：
<input type="button" id="btn1" value="綁定事件"/>
<input type="button" id="btn2" value="觸發(fā)事件"/>
$("#btn1").click(function(){alert("事件綁定");});
$("#btn2").click(function(){$("#btn1").click();})
該示例為第一個(gè)按鈕btn1綁定事件，為按鈕btn2綁定事件同時(shí)在綁定事件中觸發(fā)第一個(gè)按鈕的綁定事件。其余事件類型和click類似。
四、合成事件
合成事件也可以稱為交互事件是JQuery自定義的方法，方法有兩個(gè)hover()和toggle()。
hover()方法模仿鼠標(biāo)懸停事件，方法格式如下：hover(enter,leave)。例：
$("ul li").hover(function(){alert("Enter");},functiron(){alert("leave");});
該示例為ul的li元素綁定懸停事件，當(dāng)鼠標(biāo)停上ul的子元素li上時(shí)候會(huì)觸發(fā)enter()函數(shù)，打印“Enter”,當(dāng)鼠標(biāo)移出li元素時(shí)候會(huì)打印"leave"。
toggle()方法切換操作循環(huán)執(zhí)行綁定的函數(shù)，方法格式如下：toggle(fun1,fun2,...,funN);例:
<input type="button" id="btn1" value="觸發(fā)切換操作"/>
$("#btn1").toggle(function(){alert("開始");},function(){alert("繼續(xù)");},function(){alert("結(jié)束");});
該示例為按鈕btn1綁定切換事件每次單擊都會(huì)順序觸發(fā)綁定事件中的一個(gè)。該示例第一次點(diǎn)擊打印"開始"，第二次點(diǎn)擊打印"繼續(xù)",第三次點(diǎn)擊打印"結(jié)束"，再次點(diǎn)擊和第一次一樣打印"開始"，循環(huán)順序執(zhí)行函數(shù)。
五、事件屬性
Jquery對(duì)事件屬性進(jìn)行了封裝使事件處理在各瀏覽器下不需要判別類型都能正常運(yùn)行。各個(gè)事件屬性的如下：
事件類型event.type.該屬性用于獲得觸發(fā)該事件的類型，對(duì)不引發(fā)事件的不同操作返回不同的結(jié)果;例：
$("p").click(function(event){alert(event.type);});
該示例返回元素p單擊事件的事件類型，結(jié)果打印是 "click";
事件類型event.target該屬性用于獲得觸發(fā)事件的元素;例：
$("a").click(function(event){alert(event.target.href);});
該示例返回元素a的href屬性。
事件默認(rèn)行為event.preventDefault;該屬性用于阻止事件的默認(rèn)屬性，例：
$("a").click(function(event){event.preventDefault;});
使用該屬性阻止元素a的默認(rèn)的跳轉(zhuǎn)行為，結(jié)果和return false一樣。
事件冒泡event.stropPropagation屬性用于阻止事件冒泡，例：
$("div").click(function(event){alert("里層點(diǎn)擊");event.stopPropagation;});
該示例中使用stopPropagation屬性阻止div的父元素的click事件被觸發(fā)。
event.pageX和event.pageY屬性，使用這兩個(gè)屬性可以獲得鼠標(biāo)的相對(duì)于頁面的當(dāng)前位置。例：
$("p").click(function(event){alert("current mouse location "+event.pageX+" "+event.pageY);});
該示例當(dāng)點(diǎn)擊元素p的時(shí)候獲得鼠標(biāo)的當(dāng)前位置，并打印出來。
event.witch屬性，使用這個(gè)屬性可以獲得鼠標(biāo)單擊時(shí)候鼠標(biāo)的左中右鍵，在鍵盤事件中獲得鍵值。
$("p").mousedown(function(event){alert(event.witch);});
該示例當(dāng)鼠標(biāo)按下時(shí)候打印鼠標(biāo)鍵值。左中右健分別對(duì)應(yīng)值是1、2、3。
event.metaKey屬性用于在事件獲得鍵盤的ctrl鍵，例：
$("body").keydown(function(event){if(event.metaKey){alert("ctrl");}else{alert("no ctrl");}});
該示例當(dāng)在頁面中按下鍵盤時(shí)候如果按鍵為ctrl鍵就打印ctrl，否則打印"no ctrl".
六、事件冒泡
頁面中有多個(gè)綁定事件因此可能出現(xiàn)多個(gè)元素響應(yīng)同一個(gè)事件，由此引發(fā)了事件不是我們預(yù)期的，這種現(xiàn)象就是事件冒泡，要處理這個(gè)問題可以對(duì)事件的作用范圍進(jìn)行限制，Jquery中使得stopPropagation()方法停止事件的冒泡。事件冒泡示例：
<body><div><span>事件冒泡</span>div內(nèi)容</div>body內(nèi)容</body>
$("body").click(function(){alert("body");});
$("body div").click(function(){alert("div");});
$("span").click(function(){alert("span");});
在該示例中當(dāng)點(diǎn)擊span時(shí)候會(huì)觸發(fā)三個(gè)打印事件 "span" "div" "body"，如何阻止事件冒泡？可以使用Jquery事件中的stropPropagation()方法來停止事件冒泡。上面示例改成這樣：
$("body").click(function(event){alert("body");event.stopPropagation();});
$("body div").click(function(event){alert("div");event.stopPropagation();});
$("span").click(function(event){alert("span");event.stopPropagation();});
這樣當(dāng)點(diǎn)擊不同元素時(shí)候就不會(huì)發(fā)生冒泡事件。
七、事件命名空間
事件添加命名空間便于事件的管理:刪除事件和觸發(fā)事件。例：
<div>元素綁定多個(gè)事件</div>
$("div").bind("click.plugin",function(){alert("click.plugin");});
$("div").bind("click",function(){alert("click");});
$("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");});
$("div").bind("dbclick",function(){alert("dbclick");});
由于使用了命名空間可以刪除指定命名空間中的事件，如移除所有plugin命名空間下的事件函數(shù)方法如下:$("button").click(function(){$("div").unbind(".plugin");});這樣就移除了所有命名空間是plugin的事件函數(shù)。div中只剩下click和dbclick綁定事件。
使用命名空間對(duì)觸發(fā)特定的事件了帶來了方便，如為div綁定了兩個(gè)click事件，一個(gè)是帶命名空間的一個(gè)是不帶命名空間。如果想要觸發(fā)不包含在命名空間中的事件可以使用trigger("click!")方法，！感嘆號(hào)的作用是匹配所有不包含在命名空間中的click方法。
以上這篇Jquery基礎(chǔ)之事件操作詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持綠夏網(wǎng)。
