热门关键字:
jquery > jquery教程 > jquery教程 > JS事件委托的设计模式

JS事件委托的设计模式

228
作者:管理员
发布时间:2021/7/7 18:00:49
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5002
  在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单?


  大多数人的做法都是:获取元素,绑定事件


  如果页面上有1w个元素, 甚至10w个元素呢?


  继续使用上述方式,会有很大的性能问题,这个时候,有人可能要问,实际中的项目 哪有1w个,10w个元素的。一般的项目可能没有,但是社交类的网站,如微博,其他的如大批量文件上传等能功能,都是需要动态创建dom元素,而且数量巨大,并且创建出来的dom元素,一般都需要绑定事件和相应的特效。一般情况下,用普通的绑定事件方式是不能给动态创建的dom元素绑定到事件的,所以这里就产生了两个问题:


  1,当页面元素很多的时候,如果给这些元素绑定上事件?


  2,当动态创建dom时,如果给动态创建的dom绑定上事件和相应的特效?


  这就是本文需要讨论的模式-委托模式


  采用事件委托可以顺利解决上面2个问题


  那么,什么是事件委托呢?


  给元素的父元素绑定事件,利用冒泡原理,当子元素触发事件的时候,会去触发父元素的事件,然后把相应的业务逻辑放在父元素的事件中去处理。通俗点讲就是,子元素不做事件绑定,把绑定事件的操作委托给父元素,这就叫做事件委托, 委托有一个特性,他能够在事件触发中,识别到具体是由哪个子元素触发的,这个就是事件对象的target属性


  当我们点击li的时候,就能通过事件对象oEvent.target识别到触发事件的li元素, srcElement是兼容ie的写法。


  在没有事件委托之间,我们通过javascript做一个hover的功能,一般这么做.


  如果li元素很多,就会产生性能问题,而采用委托模式,我们可以这么做


  通过事件委托,把元素绑定到父元素,大大提高性能


  至此,我们解决了第一个问题:当页面元素很多的时候,如果给这些元素绑定上事件


  对于新创建的dom元素,普通绑定事件的方式,是不能绑定到这些dom元素的


  新创建的li元素,是不能绑定到onmouseover和onmouseout事件的,我们采用委托模式之后,可以这么做


  至此,我们解决了第二个问题:当动态创建dom时,如果给动态创建的dom绑定上事件和相应的特效


  最后,我们结合委托模式,来实战一个微博发布的功能,微博发布之后,给动态创建的dom元素添加手风琴折叠功能




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐