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第二章
Sep 30 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
javascript事件冒泡实例分析
May 13 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
Java 生成随机字符的示例代码
Jan 13 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
phpize的深入理解
2013/06/03 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
强制设为首页代码
2006/06/19 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
python获得一个月有多少天的方法
2015/06/04 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python文件和流(实例讲解)
2017/09/12 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
高三英语教学计划
2015/01/23 职场文书
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android