区别"/>
jquery on和bind的区别
jquery on和bind的区别
Introduce
在jquery插件库下了很多别人写的轮播图源码,就那么傻乎乎的翻一翻,有些代码写的惨不忍睹,有些代码看着看着就让人忍不住拍案叫绝。
在查看源码的时候,发现了一些自己掌握的不熟的知识点,比如题目的on和bind
Others
- 先随便说一说,这里的bind 和javascript的绑定this指针的bind不一样, 后期有时间我会好好整理bind,call,和apply对this的影响。
- 还是觉得吧,有时间,多看看书,多看看代码,多学学习,真的是一件很美好的事情。生活并不是只有游戏和爱情。毕竟大学没多久了。唉。你说王者更新了,画质变好了,腾讯赚了多少钱,kpl比赛一等奖多少万,和你有什么关系呢。
course
on 和 bind都是为了更方便的解决事件处理而出现的。我们顺便讲讲js事件处理发展的历程和大意吧。
-
简介
- 事件就是用户和浏览器自身执行的某种操作,比如click(点击), mouseover(鼠标滑过),load(浏览器加载),当我用户点击页面的某个按钮啊,触发了弹窗啊,音效啊,加载了数据啊,这些都是事件
- 传统事件处理程序大多都是以on开头的,比如onclick,onmouseover,具体的可以查看高程三。不知道啥叫高程三吗。。百度搜一搜,javascript高级程序设计第三版,哈哈哈
-
历程
-
最传统的,我觉得每个初级程序员都会用到的吧,就是在dom节点中直接写。举个例子
<input type = "button" value = "test" onclick="action()" /><script>function action() {console.log("this is a test");} </script>
-
然后就是所谓的dom0级事件了,个人不觉得第一种算dom0,所以分开说了。dom0级事件,就是把一个函数赋值给一个时间处理程序属性。举个例子。
var btn = document.getElementByClassName("btn")[0]; btn.onclick = function() {console.log(1); }
删除掉这个事件也非常的简单。比如
btn.onclick = null;
但是你会很容易的发现,不好,为什么不好呢?,比如我需要给这个btn同时绑定两个事件,一个是鼠标点击弹窗,一个是鼠标点击加载数据。行了,那个函数写在后面,那个就起作用,写在前面的就无效了。嗯,我不知道你会不会问。。为啥不写在一个函数里。
- 你不能确定这个项目是一个人开发,也不能确定后期维护的人是不是你,会不会仔细看你代码
- 你不能确定你这个代码放在一个地方很久之后,再拿出来还能不能看得懂
-
行吧,这个时候dom2级事件就闪亮登场了,其实本质就是addEventlistener和removeEventlistener,举个例子
var btn = document.getElementByClassName("btn")[0]; btn.addEventlistener("click", function(e) {//三个参数分别设置事件类型,函数,以及冒泡还是捕获 },false); //或者 var handle = function () {console.log(1); } btn.addEventListern("click", handle,false); //解除函数 btn.removeEventListerner("click",handle,false);
这里的优点就是
- 可以设置事件捕获的类型是冒泡还是排序。这个知识点可以自己百度
- 当对同一个dom绑定两个click事件的时候,她会按照声明的顺序来依次执行,取消事件只需要加上函数名就行。
IE这里不做讲解,我也不会,从来没想过去兼容
-
后来,jquery出现了,它对前端的事件做了很多的封装,比如只执行依次的时间one,比如附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数的live,和live作用几乎相同的bind()我没看出哪里不同,以及后来出现的代替一切的on
这里就举个大概的例子,这几个都差不多。
$('.btn').bind("click", function() {console.log(1); })
我们来主要讲讲on和bind的区别。
先看参数
- bind有三个参数,分别是event,data,function,也就是事件,额外要添加的数据以及执行函数
- on有四个参数,分别是event,selector,data,function,分别是事件,选择器,额外添加的数据和执行函数。
首先啊,有没有发现,多了一个选择器。 我来举个场景的例子啊,你看了就懂了
一个大的dom节点里有两个小的节点,比如一个class1,一个class2.所以你会这样写。
var x = docuemnt.getElementByClassName("name")[0]; x.addEventLister("click",function(e) {var target = e.target;if (target.className === "class1") {dosomething();}else if (target.className === "class2") {doanother();} else {console.err("ss");} })
是不是很烦,这样子你需要判断事件对象,那么在jquery里面
你只需要
$('.name').on("click",'.class1', function() {dosonmething(); }).on("click",'.class2', function() {doanother(); });
这是on能做到的,bind不可以。
并且,对于那些用js生成的dom节点,你bind绑定不了,因为dom之渲染一次,而on可以,也就是说,对于那些还没有生成的dom节点,on同样可以绑定事件。
-
review
总而言之,言而总之。on和bind的区别是
- on可以指定具体的子元素,bind不可以
- on可以绑定没有页面渲染时不存在的dom,bind不可以
- on是jquery推荐使用的,bind是从某个版本开始就不推荐使用的
writer&contact
{"name":"Jontyy" , "email": " jontyy@163"
}
更多推荐
jquery on和bind的区别
发布评论