其中type是事件类型,包括:click,keypress,load,submit,dblclick,keydown,change,resize,mouseenter,keyup,scroll,focus,mouseleave,blur,unload等,也可以是自定义事件名称。第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。
HTML代码如下:
<div id="container"> <h4 class="head">jQuery事件机制</h4> <div class="content"> jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 </div> </div>
按照需求,需要完成以下几个步骤:
(1)等待DOM装载完毕;
(2)找到“标题”所在的元素,绑定click事件;
(3)找到“内容”元素,将“内容”显示出来。
根据分析的步骤,写出jQuery代码如下:
$(function(){ $("#container h4.head").bind("click", function(){ $(this).next().show(); //获取并显示“内容”元素 }) })
当然可以加强效果,并且改变绑定事件的类型,比如鼠标悬停时显示“内容”,鼠标离开时隐藏“内容”。jQuery代码如下:
$(function(){ $("#container h4.head").bind("mouseover", function(){ $(this).next().show(); //获取并显示“内容”元素 }).bind("mouseout", function(){ $(this).next().hide(); }); })
这里需要知道的一点是,jQuery中bind方法是可以多次调用的,并且可以简化为将上面的第二个bind去掉。