本篇是我jQuery系列网摘文章之第七篇,系统的讲解了学习jQuery的基础知识,谢谢关注,希望继续关注我后面的文章: 首先示例一个单击事件绑定: $("#testDiv4").bind("click",function(event){alert("one");}); 引申jQuery事件处理函数的好处: 1.添加的是多播事件委托,也就是为click事件又添加了一个方法,不会覆盖对象的click 事件原有的事件处理函数 2.统一了事件名称 添加多播事件委托时,ie中是事件名称前面有"on",但是使用bind()函数我们不用区分 ie和dom,因为内部jQuery已经帮我们统一了事件的名称 3.可以将对象行为全部用脚本控制 让HTML代码部分只注意“显示”逻辑,现在的趋势是将HTML的行为,内容与样式分干净, 其中用脚本控制元素行为,用HTML标签控制元素内容,用CSS控制元素样式,使用jQuery事件处理函数可以 避免在HTML标签上直接添加事件 jQuery事件处理函数: bind(type,[data],fn),为每一个匹配元素的特定事件绑定一个事件处理器函数,示例: $("p").bind("click",data,function(){ alert($(this).text+"/r"+data); }); one(type,[data],fn);为每一个匹配元素的特定事件绑定一个一次性的事件处理函数, trigger(event,[data])在每一个匹配的元素上触发某类事件,这个函数也会导致浏览器同名的 默认行为的执行,如果要阻止这种默认行为,应返回false,示例: $("p").click(function(event,a,b){ alert(a+b); }).trigger("click",["Hello","World!"]); 将弹出Hello World! triggerHandler(event,[data]),这个方法将会触发指定的事件类型上所有绑定的处理 函数,但不会执行浏览器默认动作. unbind(type,fn),bind()的反响操作,从每一个匹配的元素中删除绑定的事件,示例: $("p").unbind()把所有段落的所有事件取消绑定,$("p").unbind("click")将所有段落 的click取消绑定,$("p").unbind("click",foo),取消所有段落单击事件的foo函数的 发生. 函数使用举例: function handler(event){ alert(event.data.foo); } $("p").bind("click",{foo:"bar"},handler);注意相对于在handler上写参 event.data.foo更简便一些,另外event.target也可以代替函数处理中的this,具体 event属性参照API 快捷事件Event Helpers 虽然我们可以使用事件处理函数完成对象事件的几乎所有操作,但是jQuery提供了对 常用事件的封装,比如单击事件对应的两个方法click()和click(fn)分别用来触发单击 事件和设置单击事件,比如: $("#test").click(function(event){...});等效于 $("#test").bind("click",function(event){.....}); 而$("#test").click();等效于$("#test").trigger("click"); 对于交互帮助方法hover(over,out)和toggle(fn1,fn2,fn3)此处不予过多讲解