委派事件

利用事件委派完成背景图片的切换

在看代码之前，我们先来了解一下什么叫事件委派。

 

事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

 

换句话说，就是把一个本来让下属干的事情交给上司做了。

 

比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交个上司来完成，那么就是你鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面的一个个的去找实现函数。

这里我写的代码是关于事件委派完成背景图切换

 

效果代码就是关于事件对象兼容问题并且实现图片切换

 

 

 

最终的效果就是点击图片换背景

 

事件委派适用于未来的元素（动态添加的元素）。

利用事件冒泡，将后代元素上事件的处理程序委派给祖先元素。

event.target || event.srcElement - 在事件传播的过程中，获取最初触发事件的事件源元素

 

 

生成一个click事件传递给

来处理

由于没有事件处理函数直接绑定在 <divgt; 上，所以事件冒泡到DOM树上

事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。

执行由 .live() 绑定的特殊的 click 事件处理函数。

这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。

如果找到了匹配的元素，那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。

附加说明

 

.live() 虽然很有用，但由于其特殊的实现方式，所以不能简单的在任何情况下替换 .bind()。主要的不同有：

 

在jQuery 1.4中，.live()方法支持自定义事件，也支持所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live() 方法，正如前面例子里提到的。

当一个事件处理函数用 .live() 绑定后，要停止执行其他的事件处理函数，那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。