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()       当页面卸载时触发。  

二、事件常用方法

事件名称 说明
bind 绑定事件
hover 切换事件
toggle 顺序执行事件
unbind 移除事件
one 仅执行一次的事件
trigger DOM加载完毕后自动执行的事件
live 从DOM根节点为元素绑定事件
die 解除live()方法绑定的事件
delegate 为指定的元素添加一个或多个事件,并绑定处理函数,一个事件也可以绑定多个函数
undelegate 删除由delegate()函数绑定的一个或多个事件处理函数
ready 当DOM元素加载完成后绑定处理事件

  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()
时间: 2024-09-29 05:16:07

jQuery之事件的相关文章

jQuery.load()事件使用方法详解

jQuery.load()是ajax中一种异步加载的事件,我们可以加载整个页面并且也可以带参数加载,下面我来详细介绍jQuery.load()事件用法,希望对初学者有所帮助. .load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) 返回: jQuery 描述: 载入远程 HTML 文件代码并插入至 DOM 中.version added: 1.0.load( url, [ data ], [ c

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

Jquery之事件绑定(bind(),live(),delegate(),on())

1..bind() 描述: 为一个元素绑定一个事件处理程序. .bind()一个基本的用法: $(selector).bind('click', function() { alert('User clicked on "foo."'); }); 可以直接用原生js替代为: $(selector).click( function() { alert('User clicked on "foo."'); }); 在jQuery1.4.3,您现在可以通过传递false代替

jQuery绑定事件的四种方式

jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject

jQuery学习-事件之绑定事件(二)

在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { //这里是修正event对象的属性,处理兼容性问题         event = jQuery.event.fix( event ); var i, ret, handleObj, matched, j,             handlerQueue = [],//事件队列             arg

学习jQuery的事件dblclick

Insus.NET一直以来都是asp.net的开发的,少使用javascript.现在学习asp.net mvc了,jQuery是一个必须掌握的客户端语言. 不用急,慢慢来.一步一步.这篇练习jQuery的事件dblclick. 先在控制器创建一个Action,也就是所说的操作: 有了操作,肯定需要一个视图来支持它: 上面实现的功能,就是用户双击文本框,如果双击到一个空文本框,它会提示用户填写值,如果双击一个已经存有值的文本框,它什么也不做. 演示:

jQuery键盘事件 ctrl+Enter回车键提交表单

分享下jquery键盘事件的一些例子,个人感觉还不错,有空时多多研究. 键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上.在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex

JS与Jquery的事件委托机制

传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).

jQuery之事件even

jQuery之事件       W3C:http://www.w3school.com.cn/jquery/jquery_ref_events.asp 一.事件列表 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单击时触发. 4.dblclick()  当鼠标双击时触发. 5.error() 当javascript出错或img的src属性无效时触发. 6.focus()   当元素获

jQuery阻止事件冒泡代码实例

jQuery阻止事件冒泡代码实例:本章节分享一段代码实例,此代码能够实现组织时间冒泡的功能,希望能够对大家有借鉴作用.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落&l