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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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中Session的概念
2006/10/09 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
Python json模块使用实例
2015/04/11 Python
python操作redis的方法
2015/07/07 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
如何获取Python简单for循环索引
2019/11/21 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
基于Pytorch SSD模型分析
2020/02/18 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
水利学院求职自荐书
2014/02/01 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
大学课外活动总结
2014/07/09 职场文书
社区志愿者活动方案
2014/08/18 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
横店影视城导游词
2015/02/06 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
新员工入职感言范文!
2019/07/04 职场文书