資訊專欄INFORMATION COLUMN
摘要：查看上方法被觸發(fā)的原因是但是通過方法直接修改元素的值并不能觸發(fā)事件，只有當用戶真實輸入并改變框的內(nèi)容時才有效。但是假設(shè)我們希望能模擬用戶的操作，則需要用到方法，修改代碼如下此時，不需要用戶進行點擊操作，通過已經(jīng)模擬了一次用戶的操作。
前陣子在調(diào)一個 bug 的時候遇到一個很坑的問題，在判斷一個輸入框是否有用戶輸入時觸發(fā) updateModel 操作，并向后臺發(fā)送 PUT 請求，結(jié)果調(diào)試時一直調(diào)不通，最后才發(fā)現(xiàn)的因為當用戶輸入 # 后系統(tǒng)判斷這是個 tag 標簽，因此通過 val 方法直接修改了輸入框的內(nèi)容，而通過 val 方法修改內(nèi)容并不能觸發(fā)綁定在輸入框上的 change 方法。寫個類似的簡單例子如下：
jQuery 代碼如下：
$("input[type="text"]").change(function() {
alert("input something!");
})
$("input[type="text"]").val("test");
上面這段通過 val 直接修改 input 內(nèi)容的方法并不能觸發(fā) change 事件內(nèi)的處理程序 alert。
查看 jQuery API 上 change 方法被觸發(fā)的原因是：
The change event is sent to an element when its value changes.
但是通過 val 方法直接修改元素的值并不能觸發(fā) change 事件，只有當用戶真實輸入并改變 input 框的內(nèi)容時才有效。當時我的做法是：
$("input[type="text"]").val("test").change();
但是這種硬改的方法會顯得代碼有些 hard code。對于其他情形下，我們需要模擬用戶真實操作時應(yīng)該用什么方法進行統(tǒng)一處理呢？
模擬用戶操作假設(shè)我們需要模擬用戶的 click 操作，例如：
jQuery 代碼如下：
$("button").click(function() {
alert("click!");//
})
此時，如果我們點擊 button 的話，肯定能觸發(fā) alert。但是假設(shè)我們希望能模擬用戶的 click 操作，則需要用到 trigger 方法，修改代碼如下：
$("button").click(function() {
alert("click!");//
})
$("button").trigger("click");
此時，不需要用戶進行點擊操作，通過 trigger("click") 已經(jīng)模擬了一次用戶的 click 操作。
此時，再回到剛開始的那個例子，我們就可以寫成：
$("input[type="text"]").val("test").trigger("change");
模擬用戶操作也可以應(yīng)用于當用戶做出 A 操作時，模擬出用戶 B 操作，例如虛擬鍵盤，當用戶使用鼠標點擊虛擬鍵盤上的按鍵時，模擬用戶鍵盤上的真實操作。
參考http://book.douban.com/subject/24669823/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78164.html
摘要：我們可以利用可以對用戶發(fā)起的事件進行處理，這里以樣式轉(zhuǎn)換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。 我們可以利用 jQuery 可以對用戶發(fā)起的事件進行處理，這里以樣式轉(zhuǎn)換為例來說明。 增添樣式 基于用戶的事件，對特定的 DOM 元素樣式進行轉(zhuǎn)換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...
摘要：同樣將其綁定在按鈕點擊事件上查看結(jié)果為這里需要注意，如果文檔內(nèi)的格式錯誤，雖然不會報錯，但是將無法執(zhí)行回調(diào)函數(shù)。 Ajax 通俗來講即不需要刷新頁面即可從服務(wù)器或客戶端上加載數(shù)據(jù)，當然這些數(shù)據(jù)的格式是多種多樣的。 加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設(shè)當前頁面為： load showImg(http://segmen...
摘要：事件對象是一種結(jié)構(gòu)，它會在元素獲得處理事件的機會時傳遞給調(diào)用的事件處理程序。事件對象的屬性指的是事件目標，它將保存發(fā)生事件的目標元素。所以，接下來我們就要想辦法改變事件過程來阻止這個行為。 在 《細說 jQuery 事件篇（三） - 事件傳播》 中提到了事件冒泡可能造成的弊端，當時舉了 mouseout 的例子，對于 mouseout 這個特殊情況，我們可以用 hover 方法來解決，...
摘要：此時，點擊新建的將會觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。 我們知道通過 $() 函數(shù)可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內(nèi)容，實際上，我們還可以通過該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來改變 DOM 樹的結(jié)構(gòu)。 創(chuàng)建元素 我們可以通過 $() ...
摘要：是如何決定由哪個元素來處理事件的，以及又是如何優(yōu)化處理這個問題的，這些都涉及到了事件傳播。事件冒泡的弊端事件冒泡可能會導(dǎo)致意料之外的行為，例如在響應(yīng)事件時，依舊是上例，當為最外層的添加一個事件。使用方法可以避免事件傳播導(dǎo)致的問題。 Javascript 是如何決定由哪個元素來處理事件的，以及 jQuery 又是如何優(yōu)化處理這個問題的，這些都涉及到了事件傳播。 事件傳播策略 當頁面內(nèi)...
閱讀 1285·2021-11-11 16:55
閱讀 1548·2021-10-08 10:16
閱讀 1205·2021-09-26 10:20
閱讀 3587·2021-09-01 10:47
閱讀 2465·2019-08-30 15:52
閱讀 2692·2019-08-30 13:18
閱讀 3204·2019-08-30 13:15
閱讀 1140·2019-08-30 10:55
