jQuery学习笔记7:基础事件-阿里云开发者社区

开发者社区> 技术小胖子> 正文

jQuery学习笔记7:基础事件

简介:
+关注继续查看

1    绑定事件

   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('click mouseover', function () {
       alert('弹窗!');
   });
   //可以同时绑定多个事件
   $('input').bind('mouseover mouseout', function () {
       $('div').html(function (index, value) {
           return value + '1';
       });
   });


   //通过对象键值对绑定多个参数,事件名的引号可以省略
   $('input').bind({
       mouseover : function () {
           alert('移入');
       },
       mouseout : function () {
           alert('移出');
       }
   });
等效于
   $('input').bind({
       'mouseover' : function () {
           alert('移入');
       },
       'mouseout' : function () {
           alert('移出');
       }
   });


   //删除事件
   $('input').bind('click mouseover', function () {
       alert('弹窗!');
   });    
   $('input').bind('click', fn1);
   $('input').bind('click', fn2);

   function fn1() {
       alert('fn1');
   }

   function fn2() {
       alert('fn2');
   }

   $('input').unbind();        //删除全部事件
   $('input').unbind('click');    //只删除click事件
   $('input').unbind('click', fn2);  //删除click事件绑定了fn2的


2    简写事件

wKioL1MDQCqSHig1AAYOFHdObE4872.jpg

样例:

   $('input').click(function () {
       alert('单击');
   });

   $('input').dblclick(function () {
       alert('双击');
   });

   $('input').mousedown(function () {
       alert('鼠标左键按下');
   });

   $('input').mouseup(function () {
       alert('鼠标左键按下弹起');
   });

   $(window).unload(function () {  //一般unload卸载页面,新版浏览器应该是不支持的
       alert('1');                                        //一般用于清理工作。
   });

   $(window).resize(function () {            
       alert('文档改变了');                                    
   });

   $(window).scroll(function () {            
       alert('滚动条改变了');                                    
   });
   $('input').select(function () {
       alert('文本选定');
   });

   $('input').change(function () {
       alert('文本改变');
   });

   

   //表单提交

   $('form').submit(function () {
       alert('表单提交!');
   });

   .mouseover()和.mouseout()表示鼠标移入和移出的时候触发;.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。本质区别:.mouseenter()和.mouseleave()这组穿过子元素不会触发,而.mouseover()和.mouseout()则会触发。

  //div中没有子元素时,功能一样

   $('div').mouseover(function () {
       $(this).css('background', 'red');
   }).mouseout(function () {
       $(this).css('background', 'green');
   });
   $('div').mouseenter(function () {
       $(this).css('background', 'red');
   }).mouseleave(function () {
       $(this).css('background', 'green');
   });

//有子节点时

   $('div').mouseover(function() {                    //over和out会触发子节点
       $('strong').html(function (index, value) {
           return value + '1';
       });
   }).mouseout(function() {                    
       $('strong').html(function (index, value) {
           return value + '1';
       });
   });

   $('div').mouseenter(function() {                //enter和leave不会触发子节点
       $('strong').html(function (index, value) {
           return value + '1';
       });
   }).mouseleave(function() {                    
       $('strong').html(function (index, value) {
           return value + '1';
       });
   });

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

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

   $('input').keyup(function () {
       alert('键盘');
   });

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

   $('input').keypress(function (e) {
       alert(e.charCode);
   });

   .focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。

   $('input').focus(function () {            //focus和blur必须是当前元素才能激活
       alert('光标激活');
   });

   $('div').focusin(function () {            //focusin和focusout可以是子元素激活
       alert('光标激活');
   });


3    复合事件

wKiom1MEMQHh3h2_AAEUSkuop3g277.jpg

样例:

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

   $('div').hover(function () {
       $(this).css('background', 'red');
   }, function () {
       $(this).css('background', 'green');
   });


   //toggle()方法已被删除,实现类似toggle方法:

   var flag = 1;
   $('div').click(function () {
       if (flag == 1) {
           $(this).css('background', 'red');
           flag = 2;
       } else if (flag == 2) {
           $(this).css('background', 'blue');
           flag = 3;
       } else if (flag == 3) {
           $(this).css('background', 'green');
           flag = 1;
       }
   });




     本文转自stock0991 51CTO博客,原文链接:http://blog.51cto.com/qing0991/1360228,如需转载请自行联系原作者







版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python零基础学习笔记(四)——数据类型
python数据类型:Number(数字):包括整数/浮点数(小数)/复数String(字符串)Boolean(布尔值)None(空值)list(列表)tuple(元组)dict(字典)set(集合)
1233 0
Python零基础学习笔记(五)—— 标识符
简单的说就是一串字符串(但字符串未必是标识符) 规则: 只能由子母/数字/下划线组成 开头不能是数字 不能是关键字['False', 'None', 'True', 'and', 'as', 'assert', 'async', 'await', 'break', 'class', 'conti...
1443 0
Python零基础学习笔记(六)—— 变量和常量
变量: 程序可操作的存储空间的名称 程序运行期间可改变的数据 每个变量都有特定的类型 作用:将不同类型的数据存储到内存 定义变量:变量名 = 初始值(为了确定变量的类型,python里面可以直接识别数据类型 例如:age = 10) 数据的存储:变量名 = 数据值 特别注意:变...
1387 0
jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作、事件绑定(2) ————————————————————学习目录———————————————————————— 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git ————————————————————学习目录———————————————————————
1397 0
Python零基础学习笔记(三)——注释、输入和输出
单行注释# """多行注释多行注释......""" '''多行注释多行注释......'''print 打印到屏幕上一些信息,内容就是“”之间的print("这是第一个关于注释的文件") 2 .打印多个字符转,用逗号隔开,但遇到逗号会输出一个空格print("我","是","谁") 可以运算pr...
1472 0
Python零基础学习笔记(十八)—— break语句和continue语句
''' break语句: 作用:跳出for和while循环 注意:只能跳出距离他最近的那一层的循环 ''' for i in range(8): if i == 5: break print(i) ''' continue语句: 作用:跳过当前循环中的剩余语句 .
1237 0
Python零基础学习笔记(十七)—— for 语句
''' for 语句,是一种循环语句 格式: for 变量名 in 集合: 语句 逻辑:按顺序取“集合”中的每个元素赋值给“变量”,再去执行语句 如此循环往复,直到取玩“集合”中的元素为止 ''' for i in [1,2,3,4,5]: print(i) '...
1193 0
Python零基础学习笔记(十九)—— 死循环
#死循环:表达式永远为真的循环 while 1: print("My name is jjking.") 执行结果会一直一直的打印 My name is jjking. My name is jjking.
1068 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载