jQuery事件

载入事件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()

posted @ 2014-07-19 15:10  自学it技术  阅读(174)  评论(0编辑  收藏  举报