8.jQuery 基础事件
来源:互联网 发布:上海市行知实验中学 编辑:程序博客网 时间:2024/05/21 14:01
在JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。那么,还有更多的事件可以参考手册中的事件部分。
jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(type, [data], fn),type 表示一个或多个类型的事件名字符串;[data]是可选的,作为event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指定元素的处理函数。
//使用点击事件$('input').bind('click', function () {//点击按钮后执行匿名函数 alert('点击!');});//普通处理函数$('input').bind('click', fn);//执行普通函数式无须圆括号function fn() { alert('点击!');}//可以同时绑定多个事件$('input').bind('mouseout mouseover', function () {//移入和移出分别执行一次 $('div').html(function (index, value) { return value + '1'; });});//通过对象键值对绑定多个参数$('input').bind({//传递一个对象 'mouseout' : function () { //事件名的引号可以省略 alert('移出'); }, 'mouseover' : function () { alert('移入'); }});
//使用unbind 删除绑定的事件$('input').unbind();//删除所有当前元素的事件//使用unbind 参数删除指定类型事件$('input').unbind('click');//删除当前元素的click 事件//使用unbind 参数删除指定处理函数的事件function fn1() { alert('点击1');}function fn2() { alert('点击2');}$('input').bind('click', fn1);$('input').bind('click', fn2);$('input').unbind('click', fn1); //只删除fn1 处理函数的事件
//使用unbind 删除绑定的事件
$('input').unbind();//删除所有当前元素的事件
//使用unbind 参数删除指定类型事件
$('input').unbind('click');//删除当前元素的click 事件
//使用unbind 参数删除指定处理函数的事件
function fn1() { alert('点击1');}function fn2() { alert('点击2');}$('input').bind('click', fn1);$('input').bind('click', fn2);$('input').unbind('click', fn1); //只删除fn1 处理函数的事件
二.简写事件
为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。称它为简写事件。
.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么jQuery 还封装了另外一组:.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢?说明:.mouseenter()和.mouseleave()这组穿过子元素不会触发,而.mouseover()和.mouseout()则会触发。
html:
<div style="width:200px;height:200px;background:green;"> <p style="width:100px;height:100px;background:red;"></p></div><strong></strong>
js:
//mouseover 移入
$('div').mouseover(function () {//移入div 会触发,移入p 再触发 $('strong').html(function (index, value) { return value+'1'; });});
//mouseenter 穿过
$('div').mouseenter(function () { //穿过div 或者p $('strong').html(function (index, value) { //在这个区域只触发一次 return value+'1'; });});
//mouseout 移出
$('div').mouseout(function () { //移出p 会触发,移出div 再触发 $('strong').html(function (index, value) { return value+'1'; });});
//mouseleave 穿出
$('div').mouseleave(function () { //移出整个div 区域触发一次 $('strong').html(function (index, value) { return value+'1'; });});
//.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 在两种事件互换也会产生不同的效果,除了字符还有一些非字符键的区别。
.focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。
html :
<div style="width:200px;height:200px;background:green;"> <p style="width:100px;height:100px;background:red;"></p></div><strong></strong>
</pre>//focus 光标激活<p></p><p><span style="font-family:Courier New; font-size:12px"></span></p><pre name="code" class="javascript">$('input').focus(function () { //当前元素触发 $('strong').html('123');});
//focusin 光标激活
$('div').focusin(function () { //绑定的是div 元素,子类input 触发 $('strong').html('123');});
注意:.blur()和.focusout()表示光标丢失,和激活类似,一个必须当前元素触发,一个可以是子元素触发。
三.复合事件
jQuery 提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等。
//背景移入移出切换效果
$('div').hover(function () { $(this).css('background', 'black'); //mouseenter 效果}, function () { $(this).css('background', 'red'); //mouseleave 效果,可省略});
注意:.hover()方法是结合了.mouseenter()方法和.mouseleva()方法,并非.mouseover()和.mouseout()方法。
.toggle()这个方法比较特殊,这个方法有两层含义,第一层含义就是已经被1.8 版废用、1.9 版删除掉的用法,也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。
既然废弃掉了,就不应该使用。被删除的原因是:以减少混乱和提高潜在的模块化程度。但你又非常想用这个方法,并且不想自己编写类似的功能,可以下载jquery-migrate.js
文件,来向下兼容已被删除掉的方法。
//背景点击切换效果(1.9 版删除掉了)
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>$('div').toggle(function () { //第一次点击切换 $(this).css('background', 'black');}, function () { //第二次点击切换 $(this).css('background', 'blue');}, function () { //第三次点击切换 $(this).css('background', 'red');});
注意:由于官方已经删除掉这个方法,所以也是不推荐使用的,如果在不基于向下兼容的插件JS。可以实现这个功能
var flag = 1; //计数器$('div').click(function () { if (flag == 1) { //第一次点击 $(this).css('background', 'black'); flag = 2; } else if (flag == 2) { //第二次点击 $(this).css('background', 'blue'); flag = 3 } else if (flag == 3) { //第三次点击 $(this).css('background', 'red'); flag = 1; }});
- 8.jQuery 基础事件
- jQuery基础事件-绑定事件
- jQuery基础事件-事件简写
- jquery基础三 事件
- JQuery 基础事件
- jQuery Mobile 基础事件
- jQuery--基础事件
- jQuery基础事件
- jQuery基础事件
- jQuery基础事件
- jQuery基础-事件篇
- jQuery基础(三、事件)
- jQuery基础_事件
- Jquery基础2-事件
- jQuery基础之四 -- 事件
- 4、jQuery基础重点事件
- jquery基础学习之事件
- Jquery基础(第一事件)
- 动态规划—北大POJ Charm Bracelet(01背包问题)
- 对于Mahout__"推荐算法"的初步认识(2)
- OC创建类和对象 设置器和存储器
- unix网络编程卷2的头文件unpipc.h下载和编译(转)
- 自动运行war的plugin
- 8.jQuery 基础事件
- C++中模板特化的概念
- 八月的我。。。
- hdu 4609 3-idiots 【FFT快速傅立叶变换】
- UVA10716 - Evil Straw Warts Live
- 微信分享获得积分 jquery微信分享获得积分 原理
- 全栈工程师的悲与欢
- android如果给imageview做圆角,如果在原有的bitmap上加上一些修饰的drawable
- 递归理解