jQuery绑定事件的几种实现方式


Posted in Javascript onMay 09, 2016

本文实例为大家分享了jQuery绑定事件多种实现方法,供大家参考,具体内容如下

<html>
<head>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--百度CDN-->
</head>

<body>
<input type="text"/>
<input type="button" value="button1"/>
<script>
$(function(){
  var text = $(":text");
  var button = $(":button");
  //调试器记录日志 console.log("message"); 如:火狐浏览器,打开FireBug(按F12)
  
  //触发单个事件:两种方式
  button.bind("mouseover",function(){
    console.log("移入");
  });
  button.bind({
    "mouseout": function(){
      console.log("移出");
    }
  });
  //多个事件:三个方式
  text.bind("dblclick blur",function(){
    console.log("双击或者失去焦点");
  });
  text.bind({
    "dblclick blur":function(){
      console.log("双击或者失去焦点");
    }
  });
  text.bind({
    "dblclick":function(){
      console.log("双击");
    },
    blur:function(){
      console.log("失去焦点");
    }
  });
  
  //取消事件
  text.unbind("dblclick"); //取消单个事件
  //text.unbind("dblclick blur"); //取消多个事件
  //text.unbind(); //取消全部事件
});

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家继续关注小编为大家分享的精彩文章。

Javascript 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
js制作提示框插件
Dec 24 Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
基于jquery实现最简单的选项卡切换效果
May 08 #Javascript
基于javascript实现图片滑动效果
May 07 #Javascript
基于jquery实现图片放大功能
May 07 #Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php对称加密算法示例
2014/05/07 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python实现Const详解
2015/01/27 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
为Centos安装指定版本的Docker
2022/04/01 Servers