Javascript和jquery事件--事件監聽器

以前看完了js和jq的冒泡捕獲和事件對象event，這裏看看同時使用js和jq後我最容易混淆的監聽器的綁定。

(1) js的監聽器綁定解綁

綁定監聽器有兩種方式：

a.on-事件type，好比onclick,onfocus

　　這種方式能夠直接使用在html界面中：

　　　　

<button onclick=’alert(‘點擊成功！’)’>點擊</button>

 

　　也能夠在js中使用：

　　　　

btn.onclick=function(){}；

btn.setAttribute('onclick', 'doSomething()');

 

 　　其實這個綁定方法有點像屬性，因此能夠用setAttribute設置，並且只有一個值，因此它只能綁定一個事件，後面設的值會覆蓋前面的值。

若是進行解綁，直接用空值覆蓋，若是想要阻止事件的繼續觸發能夠用onclick=「return false」阻止

 

 b.target.addEventListener()

　　最標準的的綁定監聽器的方式，能夠綁定多個監聽器。也可使用removeEventListener進行解綁。

　　傳入的是事件句柄，也就是不包含園括號的函數名。這樣也會致使一個問題，就是這個函數你沒有辦法傳參。Jq已經實現了傳參的封裝，而若是你想要在js中傳參，使用模塊級變量，數據記錄在dom的data中等等，只能本身想辦法。

 c.target.attachEvent()

　　和addEventListener()類似，不過是ie特有的，不符合W3C標，ie不支持addEventListener，對應的解綁方法是detachEvent()。不過 ie8以上已經不支持attachEvent()，反而支持addEventListent()了。至少我測試的時候的確是不支持attachListener()，而支持addEventListener()了。

 下面是一個兼容的代碼(引自https://www.cnblogs.com/zhn0823/p/5821505.html)：

/**

* @description 事件綁定，兼容各瀏覽器

* @param target 事件觸發對象

* @param type 事件

* @param func 事件處理函數

*/

function addEvent(target, type, func) {

    if (target.addEventListener) //非ie 和ie9

        target.addEventListener(type, func, false);

    else if (target.attachEvent) //ie6到ie8

        target.attachEvent("on" + type, func);

    else target["on" + type] = func; //ie5

};

 

/**

* @description 事件移除，兼容各瀏覽器

* @param target 事件觸發對象

* @param type 事件

* @param func 事件處理函數

*/

function removeEvent(target, type, func){

    if (target.removeEventListener)

        target.removeEventListener(type, func, false);

    else if (target.detachEvent)

        target.detachEvent("on" + type, func);

    else target["on" + type] = null;

};

 

二、  jq的監聽器綁定解綁

jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off。而這幾個函數的前面能夠是一個jq對象集，有幾個對象就幫幾個對象綁定監聽器，如$(‘#myol li’).on()會幫該ol下全部的li綁定監聽器。

其餘三種方法都是經過觸發on實現的，官方推薦的儘可能使用on，可是其餘方法也有各自的優點。看源碼看得我頭疼，那就不糾結了，暫時只分析各自的使用優點應該就好了。

<1>on(type,[selector],[data],fn,/*INTERNAL*/ one)

其中，

　　type就是事件名稱，好比「click」「dbclick」

　　[selector]不懂，可是能夠不用傳

　　[data]是能夠傳的數據、參數，函數裏面用event.data來獲取

　　Fn是綁定的函數句柄

　　one是用來區分只觸發一次的監聽器，當one===1時，只觸發一次

on爲全部指定元素添加監聽器，若是元素用on綁定監聽器以後制定的元素有數量的增長，不會爲新增長的元素綁定監聽器。

<2>bind(type,[data],function(eventObject))

這個方法就幾乎與on如出一轍了，只是剔除了selector的傳入，所存在的缺點也有

<3>live(type, [data], fn)

這個方法就克服了對新增元素無效的問題，它是將監聽器綁定在this.context（通常是document）上面，而後根據事件委託機制，根據currenttarget來獲取節點進行監聽事件。可是看效率來講，不必的時候仍是使用on吧

<4>delegate(selector,type,[data],fn)

　參數多了一個selector，用來指定觸發事件的目標元素，監聽器將被綁定在調用此方法的元素上。這個也能夠克服新增元素無效的問題，由於事件是綁定在父元素身上的。on方法中的selector應該就是專門爲這個函數設計的吧？

　　

$('#myol').delegate('li','click',getHtml);

　　如上語句，點擊每一個li會觸發getHtml顯示li裏的文字，可是輸出的currentTarget是ol，target是點擊的li，

三、  js監聽器的觸發

target.dispatchEvent(event);

該方法在當前節點上觸發指定事件，從而觸發監聽函數的執行。該方法返回一個布爾值，只要有一個監聽函數調用了Event.preventDefault()，則返回值爲false，不然爲true。

var event = new Event('click');

add.dispatchEvent(event);

或者

var evt = document.createEvent( 'HTMLEvents' );

evt.initEvent('click', true, true);

add.dispatchEvent(evt);

 

舊版ie使用fireEvent()，事實上新版ie已經支持其餘瀏覽器綁定解綁觸發監聽器的函數了，不想管了。

遺留問題：可是使用dispathchEvent()觸發超連接的操做上有問題，谷歌認爲：「點擊超連接下載文件」是一個「默認響應」，而默認響應不該由腳本觸發，因此從M53版本開始禁止全部由腳本觸發的默認響應。火狐谷歌都不支持觸發超連接、ie支持。具體下面再具體討論。

Chrome瀏覽器M53更新後超連接的dispatchEvent(evt)方法沒法觸發文件下載：

　　https://www.cnblogs.com/ljzc002/p/6003214.html

 

四、  jq監聽器的觸發

　　$(selector).trigger(event,[param1,param2,...])

同時，不支持觸發超連接，在ie中也不觸發

 

參考：

一、js

http://www.cnblogs.com/dacuotecuo/p/3510823.html

http://www.javashuo.com/article/p-hvjgcwcc-gp.html

http://www.javashuo.com/article/p-txhguyxm-gu.html

https://blog.csdn.net/namejs/article/details/50885698

http://www.javashuo.com/article/p-htbuxoct-gm.html

二、jq

https://blog.csdn.net/lookbackward/article/details/78363997

http://www.cnblogs.com/webFrontDev/p/3509775.html

三、js觸發

https://blog.csdn.net/magic__man/article/details/51831227

http://www.javashuo.com/article/p-ngisbqgo-gz.html