jquery on和bind的区别

Introduce

在jquery插件库下了很多别人写的轮播图源码，就那么傻乎乎的翻一翻，有些代码写的惨不忍睹，有些代码看着看着就让人忍不住拍案叫绝。

在查看源码的时候，发现了一些自己掌握的不熟的知识点，比如题目的on和bind

Others

1. 先随便说一说，这里的bind 和javascript的绑定this指针的bind不一样， 后期有时间我会好好整理bind，call,和apply对this的影响。
2. 还是觉得吧，有时间，多看看书，多看看代码，多学学习，真的是一件很美好的事情。生活并不是只有游戏和爱情。毕竟大学没多久了。唉。你说王者更新了，画质变好了，腾讯赚了多少钱，kpl比赛一等奖多少万，和你有什么关系呢。

course

on 和 bind都是为了更方便的解决事件处理而出现的。我们顺便讲讲js事件处理发展的历程和大意吧。

• 简介

  1. 事件就是用户和浏览器自身执行的某种操作，比如click(点击), mouseover（鼠标滑过）,load（浏览器加载），当我用户点击页面的某个按钮啊，触发了弹窗啊，音效啊，加载了数据啊，这些都是事件
  2. 传统事件处理程序大多都是以on开头的，比如onclick，onmouseover，具体的可以查看高程三。不知道啥叫高程三吗。。百度搜一搜，javascript高级程序设计第三版，哈哈哈

• 历程

  1. 最传统的，我觉得每个初级程序员都会用到的吧，就是在dom节点中直接写。举个例子

     <input type = \"button\" value = \"test\" onclick=\"action()\" />
     
     <script>
         function action() {
             console.log(\"this is a test\");
         }
     </script>
     

  2. 然后就是所谓的dom0级事件了，个人不觉得第一种算dom0，所以分开说了。dom0级事件，就是把一个函数赋值给一个时间处理程序属性。举个例子。

     var btn = document.getElementByClassName(\"btn\")[0];
     btn.onclick = function() {
         console.log(1);
     }
     
     

     删除掉这个事件也非常的简单。比如

     btn.onclick = null;
     

     但是你会很容易的发现，不好，为什么不好呢？，比如我需要给这个btn同时绑定两个事件，一个是鼠标点击弹窗，一个是鼠标点击加载数据。行了，那个函数写在后面，那个就起作用，写在前面的就无效了。嗯，我不知道你会不会问。。为啥不写在一个函数里。

     1. 你不能确定这个项目是一个人开发，也不能确定后期维护的人是不是你，会不会仔细看你代码
     2. 你不能确定你这个代码放在一个地方很久之后，再拿出来还能不能看得懂

  3. 行吧，这个时候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);
     
     

     这里的优点就是

     1. 可以设置事件捕获的类型是冒泡还是排序。这个知识点可以自己百度
     2. 当对同一个dom绑定两个click事件的时候，她会按照声明的顺序来依次执行，取消事件只需要加上函数名就行。

     IE这里不做讲解，我也不会，从来没想过去兼容

  4. 后来，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的区别是

1. on可以指定具体的子元素，bind不可以
2. on可以绑定没有页面渲染时不存在的dom，bind不可以
3. on是jquery推荐使用的，bind是从某个版本开始就不推荐使用的

writer&contact

{
  \"name\":\"Jontyy\" , 
  \"email\": \" jontyy@163.com\"
}