载入事件onload
$(function(){});
$().ready(function(){});
$(document).ready(function(){});
设置事件
$(‘div‘).mouseover(function(){});
$(‘div‘).focusin(function(){});//父节点可以感应其子元素获得焦点(正常div是没有获得焦点的事件,但是,如果子元素中有文本框获得焦点,这个会被触发)
$(window).scroll(function(){alert(this.scrollY)});
$(‘div‘).mouseover(); //参数不加,则表示自动触发相关事件(不用真正鼠标移入,执行此行代码会触发鼠标移入事件)
事件绑定和委派bind和live(基本相同,live会对新增的兄弟节点赋予相同的事件,而bind不会)
$(‘div‘).bind(‘click‘,function(){});
同一对象事件可以绑定多个处理过程:$(‘div‘).bind(‘click‘,f1);——$(‘div‘).bind(‘click‘,f2);
同一对象可以绑定不同事件:$(‘div‘).bind(‘click‘,f1);——$(‘div‘).bind(‘dbclick‘,f1);
同一对象多个不同的事件绑定同一个处理过程:$(‘div‘).bind(‘click dbclick‘,f1);——如果,第一个参数谢了多个,那么会执行多次回调函数
$(‘div‘).live(‘click‘,function(){});——与bind用法类似;
事件绑定参数(没有绑定参数,最后触发事件时,内存的name会是同一个值,而我们想要不同的值,就需要绑定)
var name = "tom"; //bind(类型,参数,fn) $("div").bind(‘click‘,{nm:name},function(evt){ //通过时间对象访问数据参数 event.data.名字 $("#result").append(evt.data.nm);//tom jack }); name="jack"; $("div").bind(‘mouseover‘,{nm:name},function(evt){ $("#result").append(evt.data.nm);//jack });
事件触发
$(‘div‘).click()——不加参数表示触发。
$(‘div‘).trigger(‘click‘)触发且执行默认动作————$(‘div‘).triggerHandler(‘click‘);只管触发,不管默认动作(submit)。
解除事件绑定$(‘div‘).unbind([‘click‘[,callback]]) //不加参数表示:解除所有事件绑定;一个参数表示:解除指定事件绑定;2个参数表示:解除指定事件的指定执行过程。
事件切换
$(‘div‘).hover(function(){console.log(‘a‘)},function(){console.log(‘b‘)})
$(‘div‘).hover(f1,f2)——f1表示鼠标移入事件处理过程,f2表示鼠标移出事件的处理过程。
阻止事件冒泡和浏览器默认行为
return false;可以起到阻止这两件事的作用,但是,这样会混起来,所以我们需要分别阻止:
阻止事件冒泡
主流浏览器 event.stopPropagation()
IE浏览器 window.event.cancelBubble = true;
阻止浏览器默认动作
主流浏览器 event.preventDefault()
IE浏览器 window.event.returnValue = false;
使用jquery
事件冒泡阻止:event.stopPropagation()
阻止浏览器默认动作:event.preventDefault()