既然使用了trigger和triggerHandler,那么你應該了解了他們的差別了。
trigger():在每一個匹配的元素上觸發某類事件。
triggerHandler():這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。
看似兩個非常相似,但是表同里不同!
下面就是他們之間的三大區別:
第一:trigger會導致瀏覽器同名的默認行為的執行,如:trigger('submit');不但會執行submit()函數的效果,也會執行表單提交的效果;
而triggerHandler就不會導致默認行為的執行
第二:triggerHandler只會觸發JQ對象集合中第一個元素的事件處理函數,也不會產生事件冒泡。而trigger不同
第三:這個方法的返回時事件處理函數的返回值,而不是具有可鏈性的JQ對象,此外,如果最開始的JQ對象集合為空,則返回undefined.
特別是第二條,關於這個bug的 ticket。關於這個問題的 commit。jQuery自己實現了一個event對象用於解決瀏覽器間的差異問題。可是由於有mouseenter/mouseleave等非標准事件的存在,jQuery引入了special事件的子系統,讓原生事件回到模擬事件的事件列隊中,可是這個系統並不能解決所有問題,當使用trigger.focus時,IE下會錯誤地執行兩次回調。
triggerHandler是對trigger產生這種問題的解決方法。但是使用triggerHandler時你會發現input是沒有光標focus效果的。
解決方法
除了用triggerHandler另一個方法是在focus綁定事件中加上event.preventDefault()。
可是你發現這不符合我們的期望呀,因為focus事件回調執行了,但是連個focus效果都沒有。
最終解決方法
既然是jQuery封裝的關系,那我們用原生的事件就可以了。看演示,左邊是用原生事件觸發的,右邊用triggerHandler。
$('input')[0].focus();