JQuery增加并扩展了JavaScript中基本的事件处理机制。本篇文章我们一起来学习JQuery中的事件。
执行jquery的时机
在JavaScript中，为DOM元素添加行为时，，代码在window.onload()方法中执行，而jquery使用的是$(document).ready()方法。这两者的区别在于，window.onload()方法会在整个页面的所有元素加载完毕之后调用，而$(document).ready()在DOM加载完毕后就被调用，可以明显地提高网页的响应速度。 $(document).ready(function(){})通常被简写为$(function(){}) $(document).ready()方法可以被多次使用，后面的函数不会覆盖前面的函数。如：
$(function(){alert(1);});$(function(){alert(2);});
当DOM加载完毕后，浏览器会分别输出1和2。
事件绑定
在DOM加载完毕后，如果想为元素绑定某个事件，可以使用bind()方法。调用格式为：
bind( ‘type’,{data:myData},function(){});
第一个参数是事件类型，包括：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress和error等，也可以是自定义名称。 第二个参数是可选参数，可以作为函数的参数进行传递。 第三个参数是用来处理事件的函数。
$(‘#btn1’).bind(‘click’,function(){alert(‘1’);});
也可以直接使用事件的名称来触发事件，如：
$(‘#btn1’).click(function(){alert(‘1’);});
绑定成功的事件，可以通过unbind方法移除。假如希望移除id为btn1的click事件，可以这么写
$(‘#btn1’).unbind(‘click’);合成事件
jquery有两个合成事件，hover()和toggle()。 hover()方法接受两个function对象，当鼠标一定到元素上时，触发第一个函数，当鼠标移出元素时，触发第二个函数。
$(‘.myClass’).hover(function(){alert(‘移到了元素上’);},function(){alert(‘移出了元素’);});
toggle()方法用来处理连续多次的点击事件，它可以接受n个函数作为参数，当鼠标单击第一次时，触发第一个函数，当鼠标点击第二次时，触发第二个函数…
模拟事件
有时候我们希望在某些情况下，用户没有触发某个事件，但是我们希望通过代码来触发该事件，trigger()方法可以搞定。
//模拟按钮的点击事件$(‘#btn1’).trigger(‘click’);事件冒泡
假设有个DOM树如下：
<script>$(function () {$(‘.div’).click(function () {alert(‘div’);});$(‘.h3’).click(function () {alert(‘h3’);});$(‘.span’).click(function () {alert(‘span’);});});===>
div，h3，和span这三个元素，都注册了click事件，当点击最内层的span元素时，他们三个的click事件都会被触发，执行三次alert，如果点击h3元素的’world’位置，h3和div的click事件会被触发，如果点击p元素，div的click事件被触发。点击一个元素，这个元素的click事件会向上传递，它的所有上级元素的click事件都会被触发（如果注册的话），这就叫时间冒泡。 事件冒泡可能会引发意料之外的后果。我们可以通过下面的方式来停止事件冒泡。
<script>$(function () {$(‘.div’).click(function (event) {alert(‘div’);event.stopPropagation();});$(‘.h3’).click(function (event) {alert(‘h3’);event.stopPropagation();});$(‘.span’).click(function (event) {alert(‘span’);event.stopPropagation();});});===>事件对象
在上面的代码中，事件绑定的函数接受一个名为event的参数，这就是我们要讨论的事件对象。所有的事件触发后，在事件处理函数中，我们都可以接收到这个参数。下面我来列举几个常用的属性或方法。
event.type
event.type属性获取当前事件的类型。下面的代码返回’click’
$(‘.span’).click(function (event) {alert(event.type);});event.target
event.target属性返回当前触发事件的DOM对象。以下代码返回’hello,’
$(‘.span’).click(function (e) {alert(e.target.innerHTML);e.stopPropagation();});event.preventDefault()
event.preventDefault()方法阻止事件的默认行为，jquery对其进行了封装，可以兼容任何浏览器。当提交表单前，如果调用此函数，可以阻止表单的提交。当点击一个复选框时，如果调用该事件，可以阻止该复选框被选中或被取消
event.stopPropagation()
此方法阻止事件冒泡。上文中已经介绍过了。
要温暖还是怕麻烦。
