jQuery中绑定事件bind() on() live() one()的异同


Posted in Javascript onFebruary 23, 2017

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件

bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除)

live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除)

delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除)

on()---------------------------版本号大于1.7(在Jquery1.7中添加,相应off()也添加)

A:bind()事件的用法

<title>绑定事件</title>
 <script src="js/jQuery1.11.1.js" type="text/javascript"></script>
 <script>
  $(function () {
   $("p").bind({
    "mouseover": function () {
     $("p").css("background-color", "red");
    },
    "mouseout": function () {
     $("p").css("background-color", "");
    }
   });
  });
 </script>
</head>
<body>
 <p>what are you doing?</p>
</body>
</html>

第一个最大的区别就是:bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件,是没有办法达到效果的

在后面的动态生成DOM元素绑定事件就要使用on();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js原生appendChild的bug解决心得分享
Jul 01 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
js模拟实现百度搜索
Jun 28 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
js实现微信聊天界面
Aug 09 Javascript
js实现简单的选项卡效果
Feb 23 #Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 #Javascript
jQuery事件详解
Feb 23 #Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
Javascript 链式作用域详细介绍
Feb 23 #Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 #Javascript
You might like
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
PHP $_FILES函数详解
2011/03/09 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
微信小程序 slot踩坑的解决
2019/04/01 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
2014年安全生产责任书
2014/07/22 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
学生检讨书范文
2019/06/24 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
pyqt5打包成exe可执行文件的方法
2021/05/14 Python