Jquery事件

(一)、事件列表。

  1.blur()      当失去焦点时触发。包含鼠标点击离开和TAB键离开。

  2.change()     当元素获取焦点后,值改变失去焦点事触发。

  3.click()      当鼠标单击时触发。

  4.dblclick()     当鼠标双击时触发。

  5.error()      当javascript出错或img的src属性无效时触发。

  6.focus()       当元素获取焦点时触发。注意:某些对象不支持。

  7.focusin()      当元素或其子元素获取焦点时触发,与focus()差别在于可以检測其内部子元素获取焦点的情况。

  8.focusout()    当元素或者其子元素失去焦点时触发,与focusout()差别在于可以检測内部子元素失去焦点的情况。 

  9.keydown()     当键盘按下时触发。

  10.keyup()    当按键松开时触发。

  11.mousedown()    当鼠标在元素上点击后触发。

  12.mouseenter()    当鼠标在元素上穿过时触发。mouseenter与mouseover的差别是,鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。

  13.mouseleave()    当鼠标从元素上移出时触发。

  14.mousemove()     当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。

  15.mouseout()       当鼠标从元素上移开时触发。

  16.mouseover()     当鼠标移入元素时触发。

  17.mouseup()        当鼠标左键按下释放时触发。

  18.resize()         当浏览器窗体大小改变时触发。 $(window).resize();

  19.scroll()        当滚动栏发生变化时触发。

  20.select()         当input里的内容被选中时触发。

  21.submit()       提交选中的表单。

  22.unload()       当页面卸载时触发。  

(二)、事件经常用法

    1、绑定事件

    语法:bind(type,[data],fn)  type參数能够是顶部的22个方法(注意:不能带括号); 參数data是属性值传递给事件对象的额外数据,fn是处理函数。能够bind多个事件,也能够为同一事件绑定多个函数。

    $("#div1").bind("change",function(){ alert("你好!"); })

    $("#div1").bind("click mouseout",function(){ alert("你好!"); })

    2、切换事件

       语法:hover(fn1,fn2);    鼠标移入运行第一个函数,鼠标移出运行第二个函数。相当于mouseenter与mouseleave。

        $("#div1").hover(function(){alert("鼠标移入我啦");},function(){alert("鼠标移出我啦!");})

    3、顺序运行事件

      语法:toggle(fn1,fn2,fn3...)   当鼠标单击时,依次运行绑定的事件

        $("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})

    4、unbind 移除事件

      语法:unbind([type],[fn])     移除元素已经绑定的事件,type:指定要移除的事件,fn指定要移除的方法。当没有參数时,全部的事件都移除。注意,用live()方法绑定的方法移出不了,live()绑定的方法要用它自己的die()来移出。

        $(":button").unbind();     移除按钮的全部事件。

        $(":button").unbind("click");     移除按钮的单击事件。

        $(":button").unbind("click",fn1);     移除按钮的单击事件中的fn1函数,假设该事件绑定了多个函数,对其它函数没影响。

     5、one 仅运行一次的事件

      语法:one(type,[data],fn)    绑定一个仅运行一次的事件

        $("#div1").one("click",function(){ alert("我仅仅运行一次!"); })

    6、trigger DOM载入完成后自己主动运行的事件

      语法:trigger(type,[data])    DOM元素载入完毕后自己主动运行

      $("#div1").bind("bclick",function(){ alert("你好"); });

      $("#div1").trigger("bclick");    //注意,trigger一定要放在绑定的事件之后,否则不运行。

    7、live() DOM根节点绑定事件

      语法:live(type,[fn])     String,Function

         live(type,[data],false)    String,Array,bool

      live()在根节点绑定事件,通过事件冒泡到DOM根节点($(ducoment)),再对照触发事件的元素来推断事件是否应该运行。效率不高,因此不能全然替代bind()可是有个优点,就是后期载入出来的元素相同可以绑定。可是有个缺点,就是live()方法只能使用CSS选择器选择被绑定元素。

      如$('a').live('click', function(){alert("你好!");})  JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为參数。不论什么时候仅仅要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,假设都是的话,则运行函数。

      live(type,data,fn) 

      $("#div1").live("click",function(){ alert("你好"); })  //即使页面一開始不存在id="div1"的元素,是后期AJAX或js载入上去的,可是依旧有效。 

      $("#div1").live("click mouseout",function(){ alert("你好"); })  //能够live()多个事件。 

    8、die() 解除live()方法绑定的事件  //绑定与解除是相应的,die()解除不了bind()和delegate绑定的方法。 能够为一个元素live多个事件,也能够为同一事件live多个函数。

      语法die(type,[fn])  string Function当中Function为可选方法。

      $("#div1").die();

      $("#div1").die("click");

      $("#div1").die("click",fn1);  //当中fn1为某函数名。假设是绑定的是一个匿名函数,第二个參数用于当为同一事件live了多个函数的时候,解除一个函数对其它函数没影响。

    9、delegate() 为指定的元素加入一个或多个事件,并绑定处理函数,一个事件也能够绑定多个函数。注意:此函数要1.4.2版加入。delegate()同意在父元素中将时间绑定当前页面还未的元素,这点与Live()类似,可是即使是$(document).delegate()也比live()方法的效率要高,另外delegate()还能将尚未出现的元素绑定到离它更近的父元素上。

      语法:

      delegate(selector,[type],fn)    String String Function  //selector必须为所选元素的子元素

      delegate(selector,[type],[data],fn)  String String Object Function

      delegate(selector,events)      String String

      如:

      $('#container').delegate('a', 'click', function() { alert("你好!") }); 

      JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为參数把alert函数绑定到$(‘#container’)上。不论什么时候仅仅要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。假设两种检查的结果都为真的话,它就运行函数。

      $("#div1").delegate("#button1","click",function(){ alert("你好啊!"); });  //注意:#button1必须为#div1的子元素

    10、undelegate()  删除有delegate()函数绑定的一个或多个事件处理函数

      语法:

      undelegate(selector,[type])    String String

      undelegate(selector,[type],fn)    String String Function

      undelegate(selector,events)    String String

      undelegate(namespace)      String

     11、ready()  当DOM元素载入完毕后绑定处理事件

      $(document).ready()

jquery经常使用事件(整理)的更多相关文章

  1. 【总结整理】JQuery基础学习---事件篇

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  2. jQuery事件整理回想

    一.事件 1.载入DOM $(document).ready() 这个第一节里具体介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口.用来为每个匹配元素绑定事件处理程序. 其基本的 ...

  3. jQuery中的事件与动画 笔记整理

    一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...

  4. jQuery学习笔记(三)jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  5. jquery的自定义事件通过on绑定trigger触发

    jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...

  6. jQuery笔记(三)jQuery中的事件

    ; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1 ...

  7. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  8. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  9. jQuery:详解jQuery中的事件(一)

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  10. jquery on 绑定事件

    jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...

随机推荐

  1. NYOJ 104 最大子矩阵(二维DP)

    最大和 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描写叙述 给定一个由整数组成二维矩阵(r*c),如今须要找出它的一个子矩阵,使得这个子矩阵内的全部元素之和最大,并把这个 ...

  2. WPF界面设计技巧(1)—不规则窗体图文指南

    原文:WPF界面设计技巧(1)-不规则窗体图文指南 初到园子,奉上第一篇入门级教程,请勿见笑. 以往WinForm编程中,实现不规则窗体是有一定难度的,更难的是不规则窗体的边缘抗锯齿及局部透明处理.而 ...

  3. 日版 Galaxy Note sc05d 涮机

    问题描写叙述:手机已坏.进不了系统 以下提供线涮刷机教程: 1.首先拔掉你的sd卡和sim卡.双清你的手机.可能有些版本号的机油没有双清模式,那就进到设置里边恢复出厂设置,然后关掉你的手机再开机.等到 ...

  4. 最简单的Java框架

    框架framework的目的是定义骨架式方案,处理各种相同的底层细节:而开发人员使用框架时,能够依照自己的需求实现自己的功能--仅仅须要填入自己的东西/flesh. 最简单的框架,类似于JUnit,它 ...

  5. 抢车位中的排名bug(比較使用了无符号数)

    昨天把这个发在了qzone,想来还是怪怪的,还是转过来不吧,纯当发现了一个虫子,玩笑一下.只是csdn如今不能贴图,挺郁闷的,原文在http://user.qzone.qq.com/110907073 ...

  6. Java EE (8) -- Java EE Patterns

    Java EE 模式目录由以下三个层组成: –     整合层(4) –     业务层(9) –     表示层(8) 涉及 Java EE 平台代码与其它类型应用程序或遗留系统的集成: 服务激活器 ...

  7. Windows Phone开发(17):URI映射

    原文:Windows Phone开发(17):URI映射 前面在讲述导航的知识,也讲了控件,也讲了资源,样式,模板,相信大家对UI部分的内容应该有了很直观的认识了.那么今天讲什么呢?不知道大家在练习导 ...

  8. IOS设计模式学习(20)命令

    1 前言 在面向对象中,把指令封装在各种命令对象中.命令对象可以被传递而且在指定时刻被不同的客户端复用.这一概念精心设计而来的设计模式叫做命令(Command)模式. 2 详述 2.1 简述 命令对象 ...

  9. 基于KMP与Levenshtein模糊匹配算法的银行联行号查询(转)

    在人民银行那里,每个银行的每一个营业网点都有自己唯一的银行联行号,根据这个号码能快速定位一间银行具体的分支行,就像根据一个身份证号码能快速确定一个人一样.例如汇款时,汇款单上要求填写收款人开户行,然后 ...

  10. [原创]如何编写多个阻塞队列连接下的多生产者多消费者的Python程序

    平常在写程序时,往往会遇到一个需求:在程序的多个阶段都会出现阻塞的可能,因此,这多个阶段就需要并发执行. Python的多线程有一个特点,就是不允许从外部结束一个运行中的线程,这给我们编写代码时带来了 ...