115.尚硅谷_JS基础_事件的绑定

哎，还是说事件啊，今天一天我们都来说这个事件啊，来二我们叫做一个事件的一个这个绑定啊事情的绑定，那这块我们要说什么呢？还是说一个简单的问题啊，我这现在有一个这个button b done button的给他来个ID，我们叫一个B填零一，然后这来一个叫做点我一下，然后呢，我在这写一个script的标签，我要实现一个什么功能呢？诶就非常简单的功能，先写一个window，点一个load，等于function，什么功能呢？就是点击按钮以后，哎我们要干嘛呢？弹出一个这个内容，随便弹出一个弹出啥都行啊，那这块，那我是不是要给这个按钮绑定一个单击响来是吧，诶先来获取我们这个按钮对象，直接挂一个B填零一，等于一个document，点一个GET100ID，来个B填零，一。

就完事了呀，然后来一个B填01.1个on click等于一个function，然后呢，我们这来写一个alert一个，我就随便写写一吧，诶弹出一个一，我这一保存，咱们来CTRL运行，现在我这一点走，你是不是出来一个一啊，哎，出来一个一，绑定了一个单击响函数，这东西应该早就会了，对吧，我们用了很多遍了，反复的去使用这种东西，那现在呢，我这是绑定了一个为B天N0一来绑定一个这个单机响应函数，但是现在我觉得啊，绑定一个都不过瘾了，我希望什么呢？哎，我希望我一点它触发两个函数，那我是不是想给它绑定两个呀，我一想我这么写一个吧，1.01.1个，那个什么呢，叫做一个昂Li等于一个方，我是不是又给它绑定一个，这来一什么呢？来一个alert，一个二已保存。是不是绑定两个呀，诶，那现在我们来说什么效果，我希望的效果是什么？先aler它一，再aler它二，我希望的效果现在什么效果一刷新一点，哎，是不是二出来了呀，那你确定。

不就没了，哎是不是纸出来啊，二这一出没出来呀，为什么没出来呀？哎，我是不是后边的就把前边给覆盖了呀？哎，你这B填01点安克等于什么，这负一个值后边又负一个，那后边是不是就给它覆盖了呀？哎覆盖了啊所以这块我们来说，诶为我们这个B天零一绑定诶第二个响应函数，那我们这会带来一个问题，那我绑定第三个，绑定第四个是不是都一样啊，只有什么呀？是不是只有最后一个生肖啊，哎，最后一个生肖啊，所以这里边我们来说这种方式有一个小的局限啊，小的局限我们来说使用什么呢？使用我们这个直接写了啊对象点这个事件等于一个这个函数的这个形式，哎直接描述了啊，这个形式绑定什么呢？绑定我们这个想要函数它干嘛呢？它只能同时为一个元素的一个。

啊，事件绑定一个小应函数啊，只能同时为一个元素，一个事件绑定一个小应函数，不能什么呢？不能绑定多个，如果什么呢？如果绑定了多个则会什么呢？则后边的会什么呢？会覆盖掉是不是前面的，哎，后边的会覆盖掉前面的，所以这块呢，只能绑定一个，那但是有些情况我就需要它干嘛呀，同时触发多个，那这种方式是不是就不够。不够灵活了呀，诶所以我们来说一下第二种绑定事件的一个方式，怎么绑定呢？诶我们可以，我们还可以有一个方法叫什么呢？叫做一个a invent listener，哎，Invent a什么意思，增加invent呢，事件listener是我们这个监听器啊，监听器通过这个方法，哎，这个方法也可以什么呢？也可以为我们这个元素绑定这个什么呀，响应函数行，我们来看怎么用，直接来一个给谁绑定啊，是不是给我们这个B天零一啊，直接来一个B天01.1个A的invent listener，注意了，咱们就不要写什么了，不要写这uncle了，直接来一个A的invent listener，那我们来看看它怎么用，那我们就需要说一下什么了，哎，说一下它这个参数，诶，它需要哪些参数，诶那你们想想，你觉得觉得应该需要哪个。

第一个应该需要什么？诶，你是不是要绑定事件，你要绑定哪个事件嘛？诶所以第一个参数的是我们这个事件的这个字符字符串，诶你是on click是on double和click是on，这个mouse move你是不是得告诉呀，哎事件的字符串，但是注意啊注意啊，不要on啊，不要on，换句话说，你要想写click click你就直接写什么呀，可click不要写个什么呀，On click啊，千万不要写个on click一定就是什么呀，单独写这click click不要二啊不要二事件的字符串，那再来说，那还有啥呀，第二个看看还需要啥，哎是不是回调函数啊，当事件触发的时候，哪个函数被执行吧，诶所以第二个我们叫做什么呢？叫做一个哎回调函数，当什么呀，我们这个事件触发时，哎，该函数会什么呢？哎，会被调用，所以呢，我直接来一个，来一什么呢，来一个。

方式啊，我们就回调函数，这个函数是不是相当于我们这个等于号后边的函数，哎，回到函数作用是一样的啊，然后但是稍微麻烦一点，它还需要一个什么呢？第三个参数，第三个参数叫什么呢？诶第三个参数叫做是否在我们这个补货阶段只触发事件啊，是否在捕获阶段触发事件，那注意了，它需要一个这个不尔值，我们一般都传for，一般都传for啊，补获阶段我们待会再说它的什么意思，但是现在你要注意第三个参数没有特殊情况，我们都是什么呀，都是false啊，所以这块你直接来一个这个false啊，不要传出啊，来个false形了，好，那这个函数我们就给它调完了，所以我使用这种方式来绑定单项，跟上边其实是差不多的，但是这种方式稍微有点还有点什么呀，有点麻烦是吧，有点麻烦来我们先看看行不行啊，在这我来一个alert一个一啊还是alert一个一，我一保存，咱们来看刷新这一点走你诶是不是效果。

我是一样的呀，也是触发了这个一的这个单阶相应函数，诶那我们说了这这么麻烦，它有什么优点呢？诶你注意了，你看它的名叫什么呀，叫爱的是吧，叫什么呀，添加是吧？那既然叫添加了，是不是只能绑定一个呀，不是吧？诶来咱们再整一个，我这来什么呢？来一个aler它二，我是不是给它绑定了两个呀，两个都是单击下个函数，我一保存，咱们一刷新1.12是不是两个都执行了呀？哎，两个函数都触发了，你说我再绑定一个来个三它行不行，哎也行，你想绑定多少个就绑定多少个，123是不是都触发了呀？哎，你就可以为一个事件绑定三个响应函数啊响应函数，所以我们来说这种方式使用什么呢？使用我们这个A的隐万的listener，它可以什么呢？可以同时为一个元素，哎得什么呢的相。

同嗯，事件绑定什么呀？同时绑定多个响应函数吧，诶多个相应函数这样什么呢？这样当我们这个事件被触发时，我们这个响应函数将干嘛呢？诶将会，哎按照我们这个事件的这个叫做函数吧，函数这个绑定顺序是不是执行啊，诶绑定顺序执行，所以你一点击它，它先来谁呀？先来这个ALER1，然后ALERTA2，然后ALERTA3，先绑定的是不是先执行后把的那叫后执行啊，诶123是这么一个顺序啊，就是一个A的引半的listener，它其实跟它比呢，就这么一个区别，就是干嘛呀，可以同时绑定多个，然后还有一些作用什么呀，还有一些特殊的事件，我必须得通过它来绑定，用这个呢，它不行啊，一些特殊的事件，然我们用到时候再说啊，所以呢，诶，它就有这么一个特点，可以同时绑定多。

啊，同榜多个，诶那这块呢，我们来看看其他浏览器什么效果，看看我们这个chome1.123是不是也行啊，哎，咱们就直接看这谁了，18IEIEIE11肯定是没问题的是吧，直接看一八，哎呦不用看了，上来是不是就报错了呀？哎，叫做一个对象不支持a invent listener这个属性或方法，换句话说，咱们来看这一天01.1个A的隐invent的listener。

九加吧，诶九以上才支持啊，所以注意这个方法在IE8及以下的浏览器中呢，它不支持这个方法，它不支持我们这个IE8及以下的这个浏览器啊及以下浏览器，所以呢，IE8你就不能用什么呀，A的invent listener那怎么办呀？哎，这个不支持，他肯定给你提供了一个什么呀，其他的方式叫什么呢？也是类似，叫做什么呢？叫做一个touch event，诶touch问支持度什么呀。

五到十是吧，哎五到十啊TOUCH1问，哎来说一下，哎，在我们这个IE8中可以使用我们这什么呀，和touch event来干嘛呢？诶来解决该问题，诶来绑定我们这个事件啊绑定我们事件它的用法呢，和这个is以外的listener呢，它差不多，我们来说一下它的参数，参数其实都大同小异啊参数第一个什么呀，第一个我们这个事件的字符串啊事件字符串，但是呢，它要啊啊要啊你这写可Li你这得写哎on click，哎要二啊要二必须得啊啊然后第二一个我们叫什么呢？叫做一个这个，哎回调函数啊回调函数直接写了，来一个这个function，诶来一个alert一个一，这就完事了啊。

啊，它省事的地方干嘛呀，就两参数，它没有那个什么呀，没有第三个参数啊，没有第三个参数，就两个参数，一个是时间自符串，一个是回调函数啊其实它是不是还简单一点是吧，还简单一点保存直接看了IE发我这一刷新一点是不是就行了呀？哎，行了啊同时它也可以干嘛呢，也可以绑定多个来一个alert一个二，然后alert一个三，一保存一刷新一点走你。321是不是也都出八了，那什么问题啊，哎，是不是倒过来的呀？哎，倒过来啊，我们先来说一下啊，我们说诶这个方法它也可以同时为一个事件，哎绑定多个处理函数，不同的是什么呢？不同的是它是什么呀？它是诶叫做后绑定先执行吧，因为它的执行顺序什么呀，执行顺序和我们这个什么呀，A的invent listener是不是相反呀，所以你这么一绑定，我们A的invent listener是什么呀？Alert一个123，而我们这个IE8里是什么呀？321是不是反过来的，哎，反过来的啊，是这么一个效果，那这块我们先想想啊，那以后我们要处理兼容性的问题了，这东西我们说用不用处理啊，这个顺序问题，诶那我们先想想啊，咱们想想，我既然要把一个事件分成什么呀？

三个函数对吧？我要给一个事件绑定三个函数，那我既然已经做这个决定了，那我问你这三个函数的关系，它是不是那么的紧密啊，是不是那么紧密啊，他不是因为我要想，我要如果说关系非常紧密，顺序很重要的话，我就没有必要干嘛了，分成三个了，我是不是写一个就行了呀，所以我既然给它分出来了，他们的先后顺序应该是什么呀？没有那么重要啊，没有那么重要，所以此时呢。这个问题我根本就不用处理啊，大部分情况是这个顺序是不重要，你先执行一还是先执行三呢，大部分情况都是没问题的，那么说了老师不行，我这东西就是特别重要，必须得先它后它，然后它错一个都不行，那怎么办？写成一个啊，写成一个，所以那种情况不至于拆啊，不于拆，一旦适于拆了，就证明它的顺序干嘛呢？

不重要啊，这个顺序不重要，所以这个问题我们就不用管它了啊，不用管它了，要管的话比较麻烦啊，还比较麻烦，可能利用一些其他东西啊，那好，那这块呢，是我们说的一个绑定方式，It，你listener，还有一个attach你问的，但是接下来你就知道我要说什么了，来回到我们火狐狸，哎，老十走你诶呵，还出来了是吧，没刷新。来。走你走你走你就不用走你了，一上来就已经爆错了是吧？诶touch is not了function来F12，我们这个CHOME1刷新是不是也不行啊，诶又到这个境地了，他是invent ie8以下A的invent listener正常的浏览器，你现在需要兼容什么呀？兼容所有的浏览器对吧？哎，那这玩意怎么办？其他浏览器用它其他浏览器IE浏览器用这玩意你需要干嘛了？是不是他这方法不行了，咱们是不是得自己自己写一个了，哎，自己写一个了，来我给你定义一个，到时候你们来尝试写一下。

定义一个什么呢？定义这么一个东西，咱们这来一个定义一个函数，哎，用来干嘛呢？用来为指定元素绑定我们这个想要函数，直接来一个方式就叫什么，就叫BB什么意思啊，绑定啊，就叫绑定的意思啊，然后呢，我们想想，我们先定义出它的参数吧，我们需要什么参数。首先是不是需要一个obj呀？哎，Obj是干嘛的呀？哎，是不是要绑定我们这个事件的对象啊？哎，你给谁绑定，你得传谁啊，你得绑定传谁，然后第二一个呢，哎，来一个EVT叫做什么呀？Str叫什么呀？事件的这个字符串吧，哎，事件的一个字符串，也就说你要绑定哪个事件吧，哎事件的这个字符串，但是问题来了，两个方法，一个要啊，一个不要啊，我这要不要盎，要不呢？诶到时自己思考一下啊，我们这要不要啊，到底盎不棒啊？然后还有一个谁啊，哎扣back我们的什么呀？回调函数啊，回调函数扣back我们这个回调函数，我希望干嘛呢？我给你传这么三个参数，一个object对象，一个什么呢？事件的字符串，还有一个回调函数，你就干嘛呢？把这个回调函数设置为我们这个对象的什么呀？事件的这个响应函数，而且干嘛呢。

要兼容所有的浏览器啊，兼容所有浏览器，所以这一块呢，你要考虑一下怎么写啊，考虑一下怎么写，但是这里边啊，我要给你看一个问题，咱们先说一下这个问题啊，这里边把它给住了，我在这alert一个这个this，我要看它这个什么呀，This是谁是吧？哎，This是谁，咱们这有一个attach疑问，还有一个叫什么呀，叫做it invent listener，咱们把它呀都往下写，这还改成一啊给它也住了。

住了以后呢，我把这东西也往下写一个，这呢都是alert一个this，这也是alert一个this，我们来看一下啊，先看一下我们这个A的invent listener这个它的this是谁，我一保存咱们希望是谁啊，是B填零一啊，哎，希望是必填零一啊，我这一刷新一点走你。哎，是but是吧，那八它就没没啥问题了，肯定是我们这个B填零一对吧，哎，肯定是BT01，那就不看了，再来看谁呢，我们的这个touch event。保存现在我一刷新一点走，你哎呦window诶，它竟然冒出很很很神奇的冒出一个window是吧，那这个事儿就很恶心了，你要都是window呢也行是吧，你都是必天呢也行，就怕什么呀。

诶就怕你不一样对吧，诶就怕你不一样，所以这块我们来说一下，什么叫什么呢？在这来说吧，我们这个A的invent的listener中的什么呢？中的this是谁呢？是我们这个绑定事件的这个对象，而我们这个touch invent，嗯中的这个this是谁呢？是我们这个window，那我们需要什么呢？嗯，需要统一我们这个两个这个方法中的Z，也就说我希望什么呀，我希望这两个它都是绑定实验对象啊，都是绑定实验对象，那你在写这个函数的时候，你要考虑一下我们这个Z要怎么去给它处理一下啊，给它处理一下好，那这块呢，我们说事件绑定这块，我们先停一下，你们来把这东西看一下，然后尝试。