25.尚硅谷_jQuery_事件处理.avi原创

好。嗯。来，我们继续往下看啊，嗯，刚才有同学问那个给ABO现在H加一个唯一的数值，为什么？其实真正大家要知道，所有的数据其实最先肯定不是在浏览器端的。大家知道啊，那所有的数据，我这个列表显示的数据。开始肯定在哪里啦。是不是在服务区段呢？啊，可能大家还不是特别懂啊，服务器端是怎么回事，但是我那个随机指什么，相当于是他这条数据的一个什么呢标识。能理解，我们现在是不是只做了一个简单的那个前台展现的一个删除啊，但真正的删除应该怎么做，应该把那个在后台的那个对应的数据给他什么删掉，但那个时候我要把什么东西传过去了。对吧，标识传过去你不然他后台怎么知道删除哪个数据呢。

能不能懂，对于我们当前来说，那个那个ID有没有用啊，还没用，能不能理解啊，对于当前来说还没用啊。好来继续往下看啊，这这个这个文档已经被我们干的差不多了啊。好，下面一个它的一个非常重要的一个模块叫什么呢？事件模块，就是所有跟事件相关的。好。这里面呢，它有一个叫页面载入是什么说有这样一个东西。这个我们用过吗？没有，但是我们用过下面这个。用过吗？用过其实下面这一个的写法是上面这个写法的什么呢？简写，实际上我们前面说过这一个相当于什么。

Window on road还记得吧，是相当于，但不是相等啊，后面我们会去说它啊先，我们暂时先不管它，我们先看一些下面的。啊，下面就说了一个概念，叫事件处理。事件处理你觉得觉得要考虑一些什么东西啊，譬如说怎么样绑定事件。要不要？还有一个有绑定必然会有什么。绑定世界的反方向是什么？是什么？解绑呗。对吧，啊，解绑事件还有一个概念，大家可能刚刚有人有人提起叫事件委派，好像是以前说过是吗？说过吗，说过有时候也叫事件委托啊，这个也是非常重要的一个东西。

啊，这里面的相关的一些API还挺多。但是呢，我们先还是看到我的这个吧，好吧。哎哎，好像这个div，这两个div好像前面见过是吧。啊，这里面两个D，一个外部的D，一个内部的D啊。现在呢，我们要做这么多东西，一个个写啊，都不难。好，我们来看第一个。给这一个什么点out，说白了是给谁呢？是不是给外部的这个div。加什么监听，我们来看一下。绑定什么。绑定一个是不是点钉来看怎么做啊，我们现在知道的至少知道一种做法，点二的是吧，加点进去怎么加克尼格。

是吧？大家看看这文档里面有没有，文档里面是不是各种各样事件所对应对应的一些方法，有没有可定好有来传一个什么回调函数呗。可以吧，可以接着我就干嘛去提示一下呗，是吧，说什么啊，我我我别漏啊，你看到时候东西很多，我就打印输出得了，这个说的是click out。可以吧，嗯，可以，那行，那既然可以的话，那我就要去测验一下，看他输不输出呗。看下点可不可以，请问我点这里行不行，行不行行，因为这里我点红色区域是不是也是它的整个区域之内，对的，没有问题，就这么简单，那他说要用两种方式，我现在是不是用的其中的一种。

那还有别的方式吗？有。来看一下，有一种方式叫on。还记不记得我们以前绑定点击零四笔原生的也有两种方式。延伸的一个是uncle，一个是什么？爱的even listener。没有吗？I even listener，只是这种方式呢，写起来麻烦一点是吧，啊对吧，我们也可以用一下on，看到第二个参是什么。第一个参数事件名，而且它还可以S，什么意思，一次绑定多个事件啊，OK，最后有一个是吗？怎么没有回调函数呗，中号代表什么，是不是可选的，咱一般不用，我们不用管它。

那也就是说我除了我不用这个，我换一种。啊，换一种方式。啊，换一种方法怎么用呢？先找到我的这个点out，接着点什么啊，第一个传什么世界名，第二个方写做法是不是一样的。好，这一次稍微改一改。是不是通过on来执行的这个可逆卡，嗯，我们来看一看行不行。先刷一下进来点一下各位可以。那有人可能就要问了，老师，你说这两种有趣吗？

是吧？啊，从写法上来说，哪个写起来更方便，第一种写起来更方便了，有人说老师我就觉得第二种写起来方便，那我就没办法了，你这个人提示你这个名字能提示你是不是写个C，写个L就差不多了，你这个写必须是不是再去写可立这个字符串。啊，你要正常一点表达。好，那个第一种呢，虽然说它，呃，确实是写法上来说简洁点对吧，方便一些，但是第二种是一种更通用的表达方式。也就是说，我只要指定事件名，是不是可以加上接听，但并不是所有的事件都会有对应的绑定事件的方法。我们这里面不提供了很多事件吗？很多事件所对应的绑定事件的方法看到了吗？但并不是所有的事件都有对应的绑定事件的方法，极个别没有，我们后面会碰到啊，后面我们就会碰到一些，你不用啊，搞不定，因为那个事件呢，那些事件它没有对应的绑定事件的方法，那也就是说这些是不是相当于一些常见的，或者说它现有的。

但并不是所有事件都在这个里面都包含了极个别的，它没有，那也就是说它虽然说简单，但不通用是吧？诶，这个让我想起来我们前面学的什么东西，有这个感觉好像。大家觉得吗？就是好写但不通用那个吧，难写但通用。以前学过什么技术，有有这种感觉啊？通过对象访问属性。

我OB接点叉叉叉是不是这种好写，但并不通用，在极个别的时候，我们必须用什么中化属性民族串来表达，还记得吧的感觉就跟这一样。能不能懂啊？OK，这种方式好写，但并不是完全通用的。和下面这种方式难写，但它是通用的表达方式。能理解吧，啊，诶这个。就是一样的感觉。你说这个有意义吗？有意义，你这样的话，你就把知识容易串起来，不会丢掉啊。好，这样的话，我们是不是第一个需求已经搞定了啊，就这么简单个事。好，下面看没看那个了，给点应了那个div绑定鼠标移路和移出的什么时间监听啊。

这是更更加服务，有三种办法来，至少我应该有两种办法啊，哪两种方法呢？来看到首先我找到那个什么点引导是吧，我一种是按的方式，一种是可以用世界名呗，来我们先用世界名来说一下哪个世界名要记录点什么猫是。好，它其实有两个，一个叫moo，一个叫Mo end。要进入。啊，后面我会专门跟大家说monthover和month有什么区别，我们先用好吧，先来放弃，还有什么？

点猫是，呃，跟猫对应的是，猫是什么呢？Live live什么意思，离开。这个相当于是什么是不是进入鼠标进入我鼠标就得起了，这个是什么，是不是离开，简单吧，好，我接着我就在这里面写一个打印输出，那就说进度呗，可以吧，可以，那下面这个自然就是什么是不是离开。各位好，我们来试一下啊，看看。走。看呐，各位。可以吧，可以，那除了这种方式，我们还有没有别的方式可以加上这个监听呢？是不是按的方式。

来试一下啊，试一下才知道首先找到它接着点啊，还是用这什么点啊。现在我们是不是都是用的方法链调用啊，都是用的方法链，用哪一个名字。叫什么猫是可以吧，接着来一个方，里面的内容跟开始还是什么一样的，只是我这一次我我换一个值啊，换一个值啊，还有一个。啊，只是这个时候叫猫，是啊，离开啊。好的吧，嗯，好的，来，我们现在来看一看，先刷一把。走里出来进去出来各位可以没问题，那有人说那除了两种方式，我想不出来第三种方式了。

那就看文档了。那我先把这个呢给他做了，诶不能这么做这么做。好，来啊，下面我们来看一下文档里面有没有给我们提供另外一种方式啊，文档里面呢，它有这样一个叫世界千万有一个whole。后好像以前是不是用在CS用过呀，它用来干嘛的哟，鼠标是不是一录的时候就会变一种什么东西出来呀，来记记得好来就是一个模仿悬停事件的一个方法，那它这里面呢，一个是over，要传两个什么，大家可以传两个，一个over，一个out，什么意思？鼠标移到元柱上要触发的函数，那不就一路的回调函数吗？

我这个什么。鼠标移出的元素啊，就鼠标移出元素的时候要出来的函数，那么移出的回调函数吗？是不是，那你说我该怎么写，其实非常简单。这个是最好用的点什么？传两个回调函数方弦弦是吧，第一个是不是一路。第二个是什么？移出离开，那我就把这个写成三看不懂好了。刷一下一路移出，移路移出对很好。可以吧，啊，可以我们来看一下他怎么做的啊，点了很多，你选择第一个吧，就。

哎呀，他怎么做的。啊，无比简单。他不就跟我一样吗？是一样吗？这不是Mo吗？Mo吗？我前面就用的什吗most吗吗？是不是？能懂吧，能懂。这里面就很清楚的告诉了有人说，老师，你这个this是什么东西啊？意思是什么？回过头来再想一下，我们函数中的意思是什么东西？是不是调用函数那个对象要调后那个对象？谁来知道后果呢？谁来调后是多元素还是写块对象干嘛呢？后是谁掉的看嘛，谁叫的是不是尽快对象。

你想看动物元素，它能有这两个方法吗？这没有啊，说老师我就认定了这个例子必须是动物元素，你别认定了，好吧，你也稍微看一下。嗯。这个说白了就是一个API的简化，其实很好的，对不对啊，方便使用的一种方式。啊，那现在我们是不是使用了三种方式来去写鼠标一路一出的世界响应啊，嗯，就这么回事。好，那第二个我们就搞定了啊，来看第三个。下面我们要干嘛呢？点击BUTTON1解除。

那个婴儿上面的那个div上所有的什么事盈利，我们现在婴儿上面有几个事件。几个，两个，一个是猫是，一个是猫是什么？那要解除事件监听看一下。有啊，诶，下一个是什么of。他在这里面有个他，你说这什么意思。找到屁哦，啥意思？解除P上面什么所有的监听。有没有看到我好，那我们来写一下，这个很好写啊，太简单了，来个井号八乘一，接着点可立，一般情况我们肯定用这种啊，这种用的舒服一点，好，接着找到我的这个点引导，接着调用一下什么哦，可以了。

好点，八塔二它是解除阴的上面的什么？哎，不是Mo over是Mo吗？我是不是一摁和一个例啊，你要解除over就没效果了，那也就是说我能不能这么写，这两个有没有区别看一下啊。设一个传一个什么什么意思，是不是解除指定世界名的经历？是吧，好，我们来去对比一下。现在肯定一路和移除是不是都能响应，都能响应下面呢，我要点一下它是移除什么，所有的点一下。

还有吗？有没有没了，好，下面有没有都有都有，以后给它给他油了。我是不是一路的没有了，但我是什么哦哦。这个。来看一下，点一下它是吧，一路还有没有出来。有没有，是不是出来有啊。对的吧，对的啊，看一下那个看看看一下刚才我这个一啊点它还有没有，我要重新刷一下，是不是肯定有啊。能看懂吗？这个还是比较好走的，而且用起来确实方便，非常简单的一个API就能搞定。还挺爽，好下面下面我们点击八乘三，那点击八乘三那它有ID没有，看看啊，应该都有吧，这个ID来点击八乘三，我要得到的是什么？四件坐标。

诶有个井号8.3是吧，这咋得啊，你要想得到事件坐标，你是不是得到事件对象，事件对象在哪呢。事件对象不叫一文的吗？一在哪？是不是它默认是可以生明一个形象的吧？而这个英文就是什么世界对象啊。是不是，那事件对象里面我如何得到它的一些坐标呢？这个坐标啊，它有不同的坐标，我们来看一下，有client X，有page X，还有什么呢？Of X，大家想一旦说到坐标，就涉及到一个东西，什么东西。

什么东西？啊，OK，什么意思啊，大家看到我点在这上面是不是，视线是不是放在这里，原点在哪里？左上角。哪水哪个左下左上角好多，左上角呢，是不是左上角可多了。能不能懂哪个左上角啊，那就是看你用的哪个方法的一个属性了。如果你是of X，它是指的左上角，那个原点是谁，就是当前发生事件的这个元素的左上角。能不能懂配X什么意思，页面页面的左上角和XX啊四口也就窗口的左上角，能不能懂那个窗口的左上角和这个页面左上角是同一个吗？不是你想啊，你可能页面是发生滚动啊，那个页面左上角是不是滚进去了，那窗口会动吗？不会。

那我X是这样，Y是不是类似？Y内饰，所以我们重点把X给大家搞一搞啊。来看一下都给他打印输出一下就行，这没什么难度。大家觉得最小的应该是？这个不好说，不好说最小的因因为因为这个地方得看你的元素是什么样的情况啊，不一定是OX跟大家说啊，Even的点上of set X还有一个even的点of set什么。Y，这里吧，是不是还有几个，呃，这个叫什么？呃叫client。

Y和CX。等等吧，好，下面这一个是什么？叫KX？找配。What？可以吧，可以来看一下啊，你你的我们一搞你就能看的出来，打开了，我我现在不滚动，那这个配和client都一样的字。对不对，因为他们的左上角重合的是吧，好点它一下。首先是三十四十啊，因为我这个比较跟我这个左上角比较近嘛，能不能看出来，但是他们俩是不是一样的，但他们俩永远一样吗。不是。稍微滚动一点就行，是不是家长走。你看它X坐标都会变，因为X方向没法移动啊Y你看它谁小了。

谁变小了，是可小了还是配小了可小了，因为我不管我的这个按钮，我的这个按钮不往上移动了吗？那我点的位置不就隔我的这个视口的左上角越来越近了吗？对不对。能走吧，但是我的页面是不是还是跟我的距离还是一样的，这个不会变的吧，页面左上角跟我的这个按钮的位置是不是固定的。能懂不？嗯，所以明白这个道理就行啊。这里面一共有三个outside和什么page原点不一样，记住了原点，为什么？世界元素对不对？能懂吧，发生世界的元素吧，我简称世界元素，而这一个原点为什么窗口左上角是吧，都是元素的左上都左上角。

落脚点肯定都是左上角。而这个呢？圆点为什么页面什么的左上角。原点吧，知道原点的坐标是不是就确定了。嗯嗯。好，下面一个。啊，下面呢，我们啊，我们这样啊，我们点击音的区域外部点击监听不要响应，那也就是说什么意思，我给这一个，我先找到这个音了是吧，我给他一个可好，我现在打印一下和in了，看看我们看现在是一个什么样的情况。

大家看啊，我点这里面点是不是in和out都发生了点击事件，是不是都触发了回调函数，但我现在希望什么？外部。点击监听不要响应，现在响应没有响应了，那咋办呢？是不是有一个概念叫什么停止事件，什么冒泡。那停止世界冒泡啊，它这个地方怎么做看着啊。这样一个方法。啊，OK，这个里面有一个啊还是什么，这是怎么读啊看一下。

这个叫叫叫啊propagation啊，这一个本来什么意思叫传播，其实我们平常不叫传播，我们叫做什么冒泡，因为是从里向外嘛，能懂吧，那我是不是执行这条语句去。是不是好执行这条语句行不行？不行，我得声明什么疑问，你说我不声明，他传不传？传，但你不声明你没接收啊。可以吧，可以来试一下。这样啊，我现在点一下响应几次，是不是就应了响应了，二响应没有，但是我点击外部呢。

是不out能响应，Out肯定能响应啊，可不可以啊，可以这就OK了啊好，最后有一个。还有一个需求啊，还有一个需求，我这上面不有一个链接吗。啊，有一个百度的链接A标签能看到吧？好啊，我是开始4I啊，我们来看一下我们要做什么需求，点击链接，如果当前时间是偶数不跳转，那也就是说是奇数才什么跳转。这咋做啊，默认他的行为是不是就跳转了一个链接的默认行为是不是跳转，那我现在啊，那我该干什么去嘞。直接取消默认行为吗？不是你得先啊，取到当前的什么时间，当前时间date.no是吧？如果它模拟什么二等等于什么零，说明它是偶数奇数偶数偶数不跳转不跳转我应该干嘛。

啊，这个东西叫阻止默认行为，一定要你，你最好表达准确，因为表达准确，你的这个英文这个翻译就好翻译。能看到吧，啊OK，那也就是说我应该怎么做，先声明一个event。记得。Prevent。有没有default？是吧，好。看他点一下这说明什么，说明是不是跳了呀，跳了，但是我是不是现在没有网啊啊，难道他每次都跳吗。

三把啊，13把肯定至少按出来个英，我天呐，几率也太低了，我运气这么不好啊，三把啊，说了三把是不可以啊，啊可以啊，没有问题，我刚才点了，你不要怀疑我为了能够成功不点点了啊，OK，可以吧，啊可以啊，这就是关于事件的啊，方方面面的一些东西。