JQuery中DOM事件绑定用法详解
本文实例讲述了JQuery中DOM事件绑定用法。分享给大家供大家参考。具体分析如下：
在文档加载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：
bind(type[,data],fn);
bind()方法有3个参数，说明如下。
第1个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。
第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用米绑定的处理函数。
可以发现，jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如鼠标单击事件在jQuer中对应的是click事件，而在JavaScript中对应的是onclick()函数。
按照需求，需要完成以下几个步骤。
1.等待DOM加载完毕。
2.找到“标题”所在的元素，绑定click事件。
3.找到“内容”元素，将“内容”元素显示。
$(function(){
$("#panelh5.head").bind("click",function(){
var$content=$(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
})
})
与ready()方法一样，bind()方法也可以多次调用。
上面jQuery代码中有一个关键字this，与在JavaScript中的作用一样，this引用的是携带相应行为的DOM元素。为了使该DOM元素能够使用jQuery中的方法，可以使用$(this)将其转换为jQuery对象。
为了判断元素是否显示，可以使用jQuery中的is()方法来完成。在代码中，发现$(this).next("div.content")被多次使用，因此可以为它定义一个局部变量：$content。
上面的例子中，给元素绑定的事件类型是click，当用户单击的时候会触发绑定的事件，然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout，即当光标滑过的时候，就触发事件。需要进行以下几步操作。
1.等待DOM加载完毕。
2.找到“标题”所在的元素，绑定mouseover事件。
3.找到“内容”元素，显示“内容”。
4.找到“标题”所在的元素，绑定mouseout事件。
5.找到“内容”元素，隐藏“内容”。
代码运行后，当光标滑过“标题”链接后，相应的“内容”将被显示。当光标滑出“标题”链接后，相应的“内容”则被隐藏。
代码如下：
$(function(){
$("#panelh5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panelh5.head").bind("mouseout",function(){
$(this).next().hide();
})
})
在上面几个例子中，分别用bind()方法给“标题”绑定了click事件、mouseover事件和mouseout事件，绑定方法都一样。除此之外，bind0方法还能绑定其他所有的JavaScript事件。
像click、mouseover和mouseout这类事件，在程序中经常会使用到，jQuery为此也提供了一套简写的方法。简写方法和bind()方法的使用类似，实现的效果也相同，惟一的区别是能够减少代码量。
例如把上面的例子改写成使用简写绑定事件的方式，代码如下：
$(function(){
$("#panel2h5.head").mouseover(function(){
$(this).next().show();
});
$("#panel2h5.head").mouseout(function(){
$(this).next().hide();
})
})
希望本文所述对大家的jQuery程序设计有所帮助。