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>