四分钟视频教程教你学会Javascript事件委托

事件委托(Event Delegation)显然是JDK 1.1中非常重要的特征。事件委托很象Windows里的消息循环,可以让我们对用户在网页上的事件进行处理。这些事件包括键盘事件,鼠标事件等等,但是,所有的事件都是以对象为基础的。这里的对象是指比如按钮,下拉选单,选择框之类的网页控件,而事件则指鼠标单击,键盘击键等等。

事件委托使得开发人员可以编写更大的java应用用程序,它让UI和业务逻辑层之间有了分隔,这就使网页UI设计和网页程序设计可以分开来进行。

事件委托使得网页开发的扩展性得到了很大的延伸。这让不同的程序员之间也可以分工合作,关注于自己感兴趣的网页事件,并写下代码对相应的事件进行处理。

想象一下,你有五百个,或者更多的网页控件有相同的事件需要处理。比如说有一个ul列表,列表当中有一百多个li条目,对每一个条目都做鼠标单击事件处理代码是相当的耗时耗力的。而且这对于动态生成的控件更难以操作。

现在我们有了事件委托,只需要写针对ul的监听器就好了。当我们写下ul针对鼠标单击事件的监听器之后,每当客户端在ul列表的子项上有鼠标单击事件,都会被执行。

下面是一个简单的示例:

  1. $(‘ul’).click(function(e) {
  2. if ( $(e.target).is(‘a’) ) {
  3. alert(‘clicked’);
  4. }
  5. });
优点:
  • 只需要书写一次代码,而不是五百条第条都写一遍;
  • 可以为动态生成的控件增加响应事件;
这个过程,用传统的手法,可能是这样写的:
  1. // Get some unordered list, which contains anchor tags
  2. var ul = document.getElementById(‘items’);
  3. // Quick and simple cross-browser event handler – to compensate for IE’s attachEvent handler
  4. function addEvent(obj, evt, fn, capture) {
  5. if ( window.attachEvent ) {
  6. obj.attachEvent(“on” + evt, fn);
  7. }
  8. else {
  9. if ( !capture ) capture = false; // capture
  10. obj.addEventListener(evt, fn, capture)
  11. }
  12. }
  13. // Check to see if the node that was clicked is an anchor tag. If so, proceed per usual.
  14. addEvent(ul, “click”, function(e) {
  15. // Firefox and IE access the target element different. e.target, and event.srcElement, respectively.
  16. var target = e ? e.target : window.event.srcElement;
  17. if ( target.nodeName.toLowerCase() === ‘a’ ) {
  18. alert(“clicked”);
  19. return false;
  20. }
  21. });
很长吧。我们来看一段四分钟的视频学习一下吧。全屏后观看最好。

Leave a Reply

  

  

  

%d 博主赞过: