這篇文章主要介紹了jQuery事件委托之Safari 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

什么是事件委托

事件委托是Jquery中一種事件綁定的方式，不同于常見(jiàn)的事件綁定方式將事件綁定在目標(biāo)元素上，而是將事件綁定在父級(jí)元素上通過(guò)事件冒泡來(lái)執(zhí)行綁定函數(shù)。

//常見(jiàn)的事件綁定(Jquery)

$(element).click(function(){

//do something

})

//事件委托(Jquery)

$(parents).on("click",element,function(){

//do something

})

事件委托的原理

事件委托將事件監(jiān)聽(tīng)綁定在目標(biāo)元素的父級(jí)上，當(dāng)目標(biāo)元素響應(yīng)事件時(shí)冒泡到綁定事件的父級(jí)上，進(jìn)行判斷該事件的目標(biāo)元素是否是傳入的元素，如果是就執(zhí)行傳入的函數(shù)。

//簡(jiǎn)單實(shí)現(xiàn)Jquery的事件委托

<ul id="oParent"></ul>

<a id="oClick" href="javascript:void(0)">click</a>

<script type="text/javascript">

var oParent=document.getElementById("oParent"),oClick=document.getElementById("oClick");

Object.prototype.on=function(ev,fn,obj){

var sClass=Object.prototype.toString.call(obj);

if(obj||sClass.indexOf("HTML")===-1){//假裝判斷一下是否需要事件委托

this.addEventListener(ev,function(e){

var e=e||window.event;

if(e.target===obj&&e.type===ev){

fn.call(e.target);//傳入目標(biāo)元素

}

},false);

}else{

this.addEventListener(ev,fn,false);

}

}

document.on("click",function(){console.log(this)},oClick);

沒(méi)有做任何的兼容以及其他處理，只是為了了解原理，大家有什么問(wèn)題可以留言指出。

事件委托有什么用呢

說(shuō)這么多東西，到底事件委托有什么用呢？我認(rèn)為事件委托最大的好處在于，動(dòng)態(tài)生成的元素還會(huì)保留原有的事件綁定。

//a點(diǎn)擊的時(shí)候，ul都會(huì)新增一個(gè)li，新增的li都有綁定事件

<ul id="oUl">

<li><li>

</ul>

<a id="addBtn" href="javascript:void(0)" target="_self">新增li</a>

<script>

//使用常用事件綁定實(shí)現(xiàn)

$("#oUl").find("li").on("click",function(){

//do something

})

$("#addBtn").on("click",function(){

$("#oUl").append("<li></li>");

$("#oUl").find("li").on("click",function(){

//do something

})

})

//先不說(shuō)性能問(wèn)題，這樣的實(shí)現(xiàn)美觀，符合邏輯嗎

//使用事件委托實(shí)現(xiàn)

$("document").on("click","#oUl li",function(){//這里委托元素是靈活的，只要是父級(jí)就行，只是不是動(dòng)態(tài)生成（動(dòng)態(tài)生成就失去事件委托的意義了）

//do something

})

$("#addBtn").on("click",function(){

$("#oUl").append("<li></li>");

})

//這樣的代碼是不是簡(jiǎn)潔多了，解決了重復(fù)綁定的問(wèn)題

事件委托之Sarfari

一次項(xiàng)目中遇到的問(wèn)題，click事件委托在移動(dòng)端的safari上失效了

<p class="loadmore">加載更多</p>

<script type="text/javascript">

$(document).on("click",".loadmore",function(){

alert("ok")

})

</script>

看上面的代碼，很簡(jiǎn)單吧，沒(méi)什么問(wèn)題吧，除了ios的safari，其他瀏覽器都能正常的彈出“ok”，一開(kāi)始想到會(huì)不會(huì)是什么有地方把冒泡阻止了，但是沒(méi)有找到，jq的問(wèn)題？，換了還是不行。正常的綁定（不使用事件委托）沒(méi)問(wèn)題，其他想到會(huì)不會(huì)是jq的bug，如果是jq的bug，那么以前的項(xiàng)目也會(huì)有類似的bug，于是到線上去找相關(guān)的代碼

<a id="test" target="_slef" href="javascript:void(0)">test</a>

<script>

$("document").on("click","#test",function(){

//do something

})

</script>

在安卓和ios設(shè)備上測(cè)試，沒(méi)有任何問(wèn)題，代碼都差不多啊，但是大家注意到?jīng)]，標(biāo)簽不一樣（html語(yǔ)義化多重要啊），于是將p換成a，問(wèn)題完美解決，最后去谷歌了一下。

ios的safari中當(dāng)使用委托給一個(gè)元素添加click事件時(shí)，如果事件是委托到 document 或 body 上，并且委托的元素是默認(rèn)不可點(diǎn)擊的（如 div, span 等），此時(shí) click 事件會(huì)失效。

原因很清楚了，safari中不可點(diǎn)擊元素的click事件不會(huì)冒泡到document和body上。

解決辦法

1.將click事件直接綁定到元素上（不使用事件委托）

2.需要綁定click事件的元素改成<a>或者<button>等可點(diǎn)擊元素

3.將click事件委托到非doucument或body的父級(jí)元素上

4.給目標(biāo)元素添加一條css樣式 cursor:pointer（推薦這種，方便省事）

以上所述是小編給大家介紹的jQuery事件委托之Safari，希望對(duì)大家有所幫助