Jquery事件委託之Safari

什麼是事件委託

事件委託是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（推薦這種，方便省事）