首页 > js学习 > js基础知识 > jQuery中的基础事件
2016
12-16

jQuery中的基础事件

一.绑定事件

jQuery 通过.bind()方法来为元素绑定事件。 可以传递三个参数: bind(type, [data], fn),type表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指定元素的处理函数。

$('input').bind('click', function () {alert('点击!');});//点击按钮后执行匿名函数

function fn() {alert('点击!');}

$('input').bind('click', fn); //执行普通函数式无须圆括号

$('input').bind('mouseout mouseover',fn) //可以同时绑定多个事件,移入和移出分别执行一次

$('input').bind({ //通过对象键值对绑定多个参数

'mouseout' : function () {alert('移出');}, //事件名的引号可以省略

'mouseover' : function () {alert('移入');}

});

使用 unbind删除绑定的事件

$('input').unbind(); //删除所有当前元素的事件

$('input').unbind('click'); //删除当前元素的 click 事件

function fn1() {alert('点击 1');}

function fn2() {alert('点击 2');}

$('input').bind('click', fn1);

$('input').bind('click', fn2);

$('input').unbind('click', fn1); //只删除 fn1处理函数的事件

二.简写事件

为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。 我们称它为简写事件。

方法名 触发条件 描述
click(fn) 鼠标 触发每一个匹配元素的 click(单击)事件
dblclick(fn) 鼠标 触发每一个匹配元素的 dblclick(双击)事件
mousedown(fn) 鼠标 触发每一个匹配元素的 mousedown(点击后)事件
mouseup(fn) 鼠标 触发每一个匹配元素的 mouseup(点击弹起)事件
mouseover(fn) 鼠标 触发每一个匹配元素的 mouseover(鼠标移入)事件
mouseout(fn) 鼠标 触发每一个匹配元素的 mouseout(鼠标移出)事件
mousemove(fn) 鼠标 触发每一个匹配元素的mousemove(鼠标移动)事件
mouseenter(fn) 鼠标 触发每一个匹配元素的 mouseenter(鼠标穿过)事件
mouseleave(fn) 鼠标 触发每一个匹配元素的 mouseleave(鼠标穿出)事件
keydown(fn) 键盘 触发每一个匹配元素的 keydown(键盘按下)事件
keyup(fn) 键盘 触发每一个匹配元素的 keyup(键盘按下弹起)事件
keypress(fn) 键盘 触发每一个匹配元素的 keypress(键盘按下)事件
unload(fn) 文档 当卸载本页面时绑定一个要执行的函数
resize(fn) 文档 触发每一个匹配元素的 resize(文档改变大小)事件
scroll(fn) 文档 触发每一个匹配元素的 scroll(滚动条拖动)事件
focus(fn) 表单 触发每一个匹配元素的 focus(焦点激活)事件
blur(fn) 表单 触发每一个匹配元素的 blur(焦点丢失)事件
focusin(fn) 表单 触发每一个匹配元素的 focusin(焦点激活)事件
focusout(fn) 表单 触发每一个匹配元素的 focusout(焦点丢失)事件
select(fn) 表单 触发每一个匹配元素的 select(文本选定)事件
change(fn) 表单 触发每一个匹配元素的 change(值改变)事件
submit(fn) 表单 触发每一个匹配元素的 submit(表单提交)事件

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外一组:.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢?手册上的说明是:.mouseenter()和.mouseleave()这组穿过子元素不会触发,而.mouseover()和.mouseout()则会触发。

.keydown()、.keyup()返回的是键码,而.keypress()返回的是字符编码。

$('input').keydown(function (e) {alert(e.keyCode);}); //按下 a 返回 65

$('input').keypress(function (e) {alert(e.charCode); });//按下 a 返回 97

注意:e.keyCode 和e.charCode在两种事件互换也会产生不同的效果,除了字符还有一些非字符键的区别。

blur()和focusout()都表示光标丢失,对应的focus()和focusin()都表示焦点激活,blur()和focus()必须当前元素触发,另外两个可以是子元素触发。

三.复合事件:jQuery 提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等。

ready(fn) 当DOM 加载完毕触发事件

hover([fn1,]fn2) 当鼠标移入触发第一个 fn1,移出触发fn2

如:背景移入移出切换效果

$('div').hover(function () {$(this).css('background', 'black');}, //mouseenter 效果

function () {$(this).css('background', 'red'); } //mouseleave效果,可省略

);

hover()方法是结合了.mouseenter()方法和.mouseleva()方法,并非mouseover()和mouseout()方法。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。