jquery经常使用事件(整理)
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经常使用事件(整理)的更多相关文章
- 【总结整理】JQuery基础学习---事件篇
jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...
- jQuery事件整理回想
一.事件 1.载入DOM $(document).ready() 这个第一节里具体介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口.用来为每个匹配元素绑定事件处理程序. 其基本的 ...
- jQuery中的事件与动画 笔记整理
一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- jquery的自定义事件通过on绑定trigger触发
jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...
- jQuery笔记(三)jQuery中的事件
; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1 ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jquery on 绑定事件
jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...
随机推荐
- 经典回忆Effective C++ 1
c++ 联邦语言: typedef { unit C; unit Object-Oriented C++; unit Template C++; unit STL; }; notice: C++高效编 ...
- Knockout应用开发指南 第八章:简单应用举例(2)
原文:Knockout应用开发指南 第八章:简单应用举例(2) 5 Control types 这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select ...
- 如何用C#使用java
如何使用C#调用Java 今天需要使用C#调用Java的包,研究了一下,大体是以下几种解决方案: 把Java包转换为DLL或者EXE后注册为com组件,之后调用. 使用web service 比如:H ...
- 第一章 andrid visdio 安装
第一章 andrid visdio 安装与环境搭建 一.Android Studio简介 Android Studio是Google新发布的Android应用程序开发环境,Android Stud ...
- python之字符串的分割和拼接
关于string的split 和 join 方法 对导入os模块进行os.path.splie()/os.path.join() 貌似是处理机制不一样,但是功能上一样. 1.string.split( ...
- POJ 1659 Frogs' Neighborhood
转载请注明出处:http://blog.csdn.net/a1dark 分析:切图论切的第一道题.也是图论的例题.主要用到一个Havel-Hakimi 定理 有以下两种不合理的情形: (1) 某次对剩 ...
- swift学习一:介绍,开发文档下载
在今天wwdc2014公布会上.苹果今天公布了全新的编程语言Swift以及新版Xcode.对于开发人员来说,Swift包括了非常多开发人员喜欢的功能,能够与Objective-C和C语言共同工作.Sw ...
- NET MVC运行机制
[图解ASP.NET MVC运行机制理解-简易版] 很多盆友咨询ASP.NET MVC的机制.网上也有好多.但是都是相当深奥.看的云里雾里的.我今天抽空,整理个简易版本.把处理流程走一遍. 当然, ...
- C# 引用类型与值类型的区别
//引用类型(使用了class) class SomeRef{public Int32 x;} //值类型(使用了struct) struct SomeVal{public Int32 x;} sta ...
- easyui出口excel无法下载框弹出的办法来解决
使用前ajax发,码如下面(ActionUrl一般处理程序ashx路径): $.ajax({ url: ActionUrl + '?action=export&ID=' + $('#fm_ID ...