jQuery事件的触发规则

很多用过jq的朋友都知道冒泡事件模型。很显然，像click,mouseover这样的事件在触发子元素之后很多时候也会触发父元素，因为，很多时候父元素包裹着子元素。jq是这样解决的：比如目前网页有代码如下：

 

<div id="d">

<span id="s">

<a href="#" id="a">Click</a>

</span>

</div>

 

这样我们一旦点击了a元素，那么按照jq的模式是这样触发click事件的：a->span->div，事件就像冒泡一样，从最内层的元素开始向外传播。

但是，在某些情形下，这样的模型有些问题，比如：我们要对a的mouseover 和 mouseout做处理。

如果我们的div和span没有紧紧包裹着a，当你的鼠标从a移动到span上面会怎么样？没错，span的mouseover刚刚被触发，马上就被a的mouseout “冒泡”掉了。。因为事件是冒泡进行的。所以，我们在处理鼠标移入移出的时候往往使用hover事件，这样就不会出现这个问题，但这终究不是办法，因为hover也是冒泡的。所以我们需要利用jq提供的event对象。

 

$("div").click(function (event) {

   alert(event.target.targName);

});

 

我们把检测click事件的代码绑定到div,这样无论是a， span 还是div 触发Click都会激活这一段代码。 我们此时给click的callback函数加入了一个参数event,这样只要激活这段代码，有了事件对象的帮助，我们就能知道是谁触发的click事件了。

转载于:https://www.cnblogs.com/colorfulkoala/archive/2012/04/03/2431551.html