什么是事件委托
事件委托是Jquery中一種事件綁定的方式，不同于常見的事件綁定方式將事件綁定在目標元素上，而是將事件綁定在父級元素上通過事件冒泡來執行綁定函數。
//常見的事件綁定(Jquery)$(element).click(function(){//do something})//事件委托(Jquery)$(parents).on("click",element,function(){//do something})事件委托的原理
事件委托將事件監聽綁定在目標元素的父級上，當目標元素響應事件時冒泡到綁定事件的父級上，進行判斷該事件的目標元素是否是傳入的元素，如果是就執行傳入的函數。
//簡單實現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);//傳入目標元素}},false);}else{this.addEventListener(ev,fn,false);}}document.on("click",function(){console.log(this)},oClick); 沒有做任何的兼容以及其他處理，只是為了了解原理，大家有什么問題可以留言指出。
事件委托有什么用呢
說這么多東西，到底事件委托有什么用呢？我認為事件委托最大的好處在于，動態生成的元素還會保留原有的事件綁定。
//a點擊的時候，ul都會新增一個li，新增的li都有綁定事件<ul id="oUl"><li><li></ul><a id="addBtn" href="javascript:void(0)" target="_self">新增li</a><script>//使用常用事件綁定實現$("#oUl").find("li").on("click",function(){//do something})$("#addBtn").on("click",function(){$("#oUl").append("<li></li>");$("#oUl").find("li").on("click",function(){//do something})})//先不說性能問題，這樣的實現美觀，符合邏輯嗎//使用事件委托實現$("document").on("click","#oUl li",function(){//這里委托元素是靈活的，只要是父級就行，只是不是動態生成（動態生成就失去事件委托的意義了）//do something})$("#addBtn").on("click",function(){$("#oUl").append("<li></li>");})//這樣的代碼是不是簡潔多了，解決了重復綁定的問題今天的主題，事件委托之Sarfari
一次項目中遇到的問題，click事件委托在移動端的safari上失效了
<p class="loadmore">加載更多</p><script type="text/javascript">$(document).on("click",".loadmore",function(){alert("ok")})</script>看上面的代碼，很簡單吧，沒什么問題吧，除了ios的safari，其他瀏覽器都能正常的彈出“ok”，一開始想到會不會是什么有地方把冒泡阻止了，但是沒有找到，jq的問題？，換了還是不行。正常的綁定（不使用事件委托）沒問題，其他想到會不會是jq的bug，如果是jq的bug，那么以前的項目也會有類似的bug，于是到線上去找相關的代碼
<a id="test" target="_slef" href="javascript:void(0)">test</a><script>$("document").on("click","#test",function(){//do something})</script>在安卓和ios設備上測試，沒有任何問題，代碼都差不多啊，但是大家注意到沒，標簽不一樣（html語義化多重要?。?，于是將p換成a，問題完美解決，最后去谷歌了一下。
ios的safari中當使用委托給一個元素添加click事件時，如果事件是委托到 document 或 body 上，并且委托的元素是默認不可點擊的（如 div, span 等），此時 click 事件會失效。
原因很清楚了，safari中不可點擊元素的click事件不會冒泡到document和body上。
解決辦法
1.將click事件直接綁定到元素上（不使用事件委托）
2.需要綁定click事件的元素改成<a>或者<button>等可點擊元素
3.將click事件委托到非doucument或body的父級元素上
4.給目標元素添加一條css樣式 cursor:pointer（推薦這種，方便省事）
以上所述是小編給大家介紹的jQuery事件委托之Safari，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
