简单的fn.on(event,function)我就不提了，在这里，提三种对于on方法的应用。
一、阻止事件冒泡
何为事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
阻止事件冒泡
举个例子，以下代码：
html:
<body>
<div style="width:100px;height:100px;border:solid 1px black;background-color:#FFFF99">
<input>lalala</input>
</div>
</body>js:
$(function(){
$("input").on("click",true);
$("div").on("click",function(){
alert("122");
});
})
以上代码的运行效果是，点击input控件后，会向上冒泡，激发div的click事件，从而弹出122对话框。
我们通过on方法，阻止input控件对于click事件的冒泡，将js代码更改为：
$(function(){
$("input").on("click",function(event){
return event.stopPropagation();
});
$("div").on("click",function(){
alert("122");
});
})则此时，我们再点击input控件，不会激发div的click事件了，不会再弹出对话框。
二、取消默认事件的执行
何为默认事件？就比如a标签设置了href，就会做跳转，很多标签的本身已经被内部设置了一些事件，这些事件便是默认事件。
示例：
html代码：
<a href="http://blog.csdn.net/goodgirl1991">http://blog.csdn.net/goodgirl1991</a>
此时的运行效果就是点击链接，链接就会自动跳转到我指定的主页。
那么，我们通过on方法，来取消该click默认事件。
js代码：
$(function(){
$("a").on("click",function(event){
return event.preventDefault();
})
});
})再运行一下，我们发现，这时无论怎么点击链接，都不会跳转了，也就是说，<a>标签的click事件被取消了。
三、在取消默认事件的同时，取消事件的冒泡
js代码：
$("a").on("click",false);
扫一扫
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
