22. 尚硅谷_佟刚_jQuery_事件处理.wmv原创

解块中的事件第一个看加载到，那前面我们讲了说我们现在用的这个方跟window onload是类似的两个方法，它们完全一样吗？诶，不完全一样。我们来说一下这两个。试驾。好，我们说一下什么呢？我们说一下这个说一下。加载到。啊，两两种方式，两种方式分别是quiry。

啊。NO点啊漏这两个好了，我们说一下啊，首先的话呢，我们现在这几块里边提供的是这个，而在我们的这个。嗯，提供的是点等于这样，这两种有区别吗？有区别我看一下。在页面加载完以后呢，浏览器会通过JS为DOM元素添加事件，在常规的JSJS里边用的是window.onload几块里边用的是document ready OK，我们先看传统的这个window onload这个执行时机啊，是整个道完全加载好之后才执行，包括图片，所以说如果你要图片特别大的话，就导致了这个加载速度会比较慢。

大家可能现在没有了哈，大家在头几年看网页的时候，比方说那个图片那个模型已经加载好了，就是整个图片已经出了一块了是吧，然后你点向左向右的时候，发现那个图片移不了，只有那个图片完全加载好之后，你才能够进行翻页，那个时候用的就是这个window.onload。而要是用document ready的话，没有这个事儿，它只要是干什么呀，只要把这个down结构绘制好以后，我就可以来进行GS操作，所以说这个呢，执行时机更短，第一个区别，第二个编写个数window onload啊，这个只能编写一个，而document ready可以编写多个windowlo不能够简写，Document ready可以进行简写，我们看一下第一个我们不出来，我们来说第二个，第二个什么意思呢？我写老原生的版本，应该这么写，看着。

叫document document是谁啊？是不是文档啊，文档ready文档准备好了，这样写，这么写，我写方写个一。准备好了，我再写个二。嗯。这个暂时我先。去掉好我们看一下它。一二注意这个一二是不是都可以行啊，这个是很有意思啊，说一和二都可以执行，好了我们再看这个window.load这个也限量。

You see。啊，这我要是写两个的话，这两个也都会执行吗？大家觉得呢，只有一个二啊，为什么我是不是在为圆柱的一个属性赋值啊，那我在赋值的时候，我开始是等于它吧，那我后边这个赋值是不是把前面这个赋值给覆盖了，所以说这只能直行一个二，就是这么一个区别说说。Document ready可以同时写多个windowlo，只能写一个，一个区别，第二个的话呢，Document ready可以缩写，缩写之后的样子是什么呢？缩写之后的样子就是我们说的那个直接写一个方式，我们看一下这个缩写的过程啊，这么结的。本来是。Doin直接加到。

方式本来是这么写啊，我说我我怎么说写呢，这部分我都可以去掉。这就是个心。再看一遍啊，不来这么写，现在的话呢，高部分在都可以，不要就是做写，我们用的一直是做写版本简洁，我希望大家知道这个数据是怎么来的，他把什么，他把这个方法是不都给解决了，这么来的，这是说。本来是这样的。然后的话呢，变成了。特写由这个到什么呢，找他。

是个什么情况？这种情况好吧，这是我们的这个叫on的加载，那我们用的话肯定用这个了哈，更加简洁，而且的话呢，下载速度更快，还可以写多个。好，我们具体来看一下这个事件的绑定，说对匹配元素进行特定的绑定的话呢，是用这个。看一下。首先我们把这个打开。哎，现在呢，我想这样，我这实际上啊，什么是结块RY，它是什么呀？它里边有一个div，哎，我想通过点击这个头，我让下边这个嗯给我显示出来，再点的话呢，再给我隐藏，我们看这个功能如何来实现，首先我需要导入解块。

这个解宽啊，事件应该是在外边啊，这么写不行，简单一点吧，C把这个复制起来，然后。Copy。最早讲解包这个版本是1.3那个版本好了，那现在的话呢，我们看一下我们的需求是这样的，我来点击这个header div显示。再点一下隐藏。为谁呢？为点爱。

添加。Click响应函数说点。com隐藏A显示弱点方显显示则隐藏好看一下。首先我要保证在方程里面，是不是只有这个时候这个文档才会加载好啊。然后加事件head.click然后的话就这样啊function好了，说说如果它显示就隐藏，如果隐藏就显示，那我如何判断它是个什么状态呢？看我判定这个状态的方案是这样，使用一个叫类似方法。

I。判断。某个给定的这块对象。是否？符合指定的。选择器或者说是否跟指定的选择器相匹配，那我写个吧，说嗯，这么写看点点意思，说什么它是不是隐藏的。急诊吗？啊，这是这是一个几号对象，后边是一个。选择器，看它是不是它我写的我哎等于OK，是if，如果是隐藏的，我就让它显示，显示是so。

So方法。使。显示的。隐藏的是隐藏的。变为。好了。我就这样，我就这样写啊，点R点。保存再看。扎心坏了，没有反应。不。跟这个分号的关系不是那么的大。

就是这个问题，那我们怎么办呢？我们首先看这个几块进没进来，不客气，就是说我这块我打个ABC的话怎么了，如果这ABC好用的话，说明我这个什么进来，说明我这个块是不好用啊，啊这块是好用的，好了，然后我们再调把这个往下移，看这个点击事件是不是好用，这看。它什么呢？它也好用，那这个代码就比较清楚了，是吧，就是在这呢，说它是什么状态点content。没问题，是hidden，等的时候我让他显示，否则我让他隐藏。嗯。

OK，再看哎，就是这么一个效果，这就是什么呀，这是我们的一个事件，这个事件的话呢，我们已经学过了，在这个里边，我们目前写这个代码哈，啊，如果要说的话，有一个点觉得我们说就是这个is方法。就是这个意思，方法好了，但是我们引入这个的话呢，我们说是要绑定事件，这个绑定事件吧，是这个意思，事件我不但可以这么加，我还可以这么加，看着试卷的方案还可以这么写。点had.and我加事件，加什么试件呢？Click事件后边是吧，后边后边是这个方。我可以这样写，这样。

这是我们说的什么呀啊，绑定事件，我为这个点hi绑定一个颗粒的事件，后边是这个响应函数，看效果结论是一样半。被某JA query对象绑定。是这。绑定什么事件呢？诶，我绑定的是一个click事件，然后弦函数你看就是我们说的。Bad，好了，然后的话呢，我们看到一个什么呢？哎，我这块我可以这样说，我点一下，我再点一下，我们可以达到这样的一个效果，这里面我们还讲了一个方法叫。

用它来判断某个给定的几块对象是不是符合指定的几块的选择器。好，我们看合成事件有ho t果好了，Ho是什么意思呢？叫模拟悬停。模拟全停啊，它是这样一个效果，我放上去注意哈，现在我在点这样，我放上去，我不点它自动的显示，我拿出来隐藏，诶叫悬停，那我这个要是加，比方说我们要是不用那个，呃，合成支架的话，我要手动写的话，应该怎么写啊？我手工写的啊。看我说我把鼠标放出去，放出去应该叫我们再写一个什么呀。

OK。再看一个control c。好了，是不是这个的话呢，关系不是特别大，因为用这个拌的呀，反倒呃没有那么的方便，我们直接用可Li。不是，可应该是啥啥找件有很多鼠标相关的吧，Down，我把鼠标移上去应该是。OVER1出来呢。过来哦over啊，鼠标一上去我就没这么多事儿了啊，我就直接减持。

好，必须点儿。一出来我就隐藏。OK，看哈，这块的话呢，首先有一个方法连缀的问题，我调这个move over之后，这个返回值是不是还是这个head，所以说我们我们就我们接着来调这效果。拿上去拿出来，拿上去拿出来，哎，这就是我们所谓的什么呀，叫悬停。叫悬停，那像这种的话叫悬停的话，我们怎么样，我们可以这样写mostover跟most out，那实际上的话呢，解开准备了一个叫合成试件。Whole？模拟光标悬停事件，鼠标移上去的话会执行第一个函数，移出的话会执行第二个函数，所以说这个可以写为。

写为只有一个就可以了。看着。打hand，然后两个方式。CTRLC放上去，显式移出来。就什么出来，我就是这看。结果是一样的，我刷新了已经哈。哎，这就叫什么叫合成是加合成是叫。特点是什么呢？鼠标。一上去。

执行第一个一出。执行第二个函数，这就是我们的啊，合成是这那刚才的话呢，这块我们讲的，我们也说一下啊，讲的是什么呀，讲的是more over。早。Over，是鼠标一上去发生事件被点燃是吧，而鼠标一出事件被触发。说鼠标你一上去。好了，这个是鼠标遗嘱。

OKOK，我们讲了一个power，就是叫合成试卷，那实际上还有一个合成试卷，就是说我点，我点第一下第一个函数，点第二下第二个函数，再点一下可能是第三个函数，或者又回到第一个函数，这叫什么呢？这叫呃汤果用于。模拟鼠标连续单击时件，第一次点的时候触发第一个函数，第二次点的时候触发第二函数，如果有多个的话，一次一次触发，如果没有呢，循环再回第一个，我们来看一下这个探，这也是一个合成角。C。啊，把这个读掉。样子。

一次点OK，这就是好了，又是一个合成支架，合成支架。好，第一次点击执行。第一个版主。一二，因为我只有俩。怎么样循环？这方执行，那你要再点的话，那就是第一个，因为我这块只有两个，好吧，我们看看我们以前讲的支架啊。试卷这块的话呢，我们首先讲了一个方法叫is，它可以来判断某个给定的这块对象是否某个是否符合某个指定的选择器，然后的话呢，我们讲了一个半的方法，不过这个办的方法呀，不是那么的实用。

它什么时候用啊，比方说你这个参数要是这个传住的，这个时候用的方便，哎，我时而是点，时而是这个鼠标移动，时而是怎么样的，这个时候的话呢，为了实现比较炫的效果是吧，我你你猜一下我下一次功能是点操作的还是这个移动操作的，那这个时候我们可以用这样的方式来写，但是正常开发的时候这种情况用的不多。然后我们讲了这个moo跟Mo out，讲了两个合成事件，一个是O，这个是模拟鼠标悬停事件，还有一个to，模拟鼠标点击事件，下面我们来看一下，这个叫事件的冒泡。冒泡说，试件会按照档层次结构，像水泡一样不断的向上，直到顶端。

哦，首先呢，我需要考入这块。往往里边移怎么办呢？点点回去，然后这个过来。C过来。Proceed。好，然后的话呢，我们看一下啊。整个是个包，包里边有个div div里边还有一个子弹。打开看一眼。

哎，长成这个样子好了，我现在呢，我为body加上一个，我用div为div加一个，With也加一个。来看试卷冒泡的效果。市假感冒了。OK，看我首先呢会div。OK，加上一个可以。对，OK，一样是div和磁盘，我们看啊div.C。

然后的话呢，SPA只有一个可以直接写。ID是吧？号OK，这个写成div，这个写成。看一下。放心。Click没问题，正常好了，看dp click。发现一个什么呀，这个div是不是同时会触发body，好了再看SPA click SPA click会触发divli，还会触发bodyli，能理解这个意思吧，我span是不是在div里边啊，那span也在body里边，所以说这个时候这个是像水泡一样不断的往上冒。给我带来了一些麻烦是吧？我们不希望他冒泡。

那阻止冒泡的方式就是我在这个嗯，弦函数的结尾写个return，写一个看。Return FOX如此，某通过在响应函数的结尾返回Bo可以阻止。好。看一下。注意哈，OK，这个忘了，这个是不是这个我没有，好了，这块我们需要知道两件事，第一个什么是冒泡，什么是试卷冒泡。事件。

行好不好？第二个如何解决，这叫什么法，如何解决？12个好了，我们就需要。搞定这两个问题，那这块的话我们都给了是吧？嗯，试件会按照倒层子结构，像水泡一样不断的向上冒，直到顶端解决方案处理函数里边返回false，还会阻止冒泡，实际上这个return false还有一什么功能啊，还可以阻止原柱的默认行为吧，比方说超链接，比方说地球按钮。我们来看这个叫事件对象的属性事件，在我们点击点击一个按钮的时候呢，这个时候会触发一个click事件。

这我们知道是吧，那实际上呢，我们可以在那个可显应函数里边得到正在触发的这个事件对象，事件对象，当事件发生时，事件对象被创建，在程序中使用事件只需为函数添加一个参数，这个参数就是事件，那重要的是这个事件里边有这样的两个属性，配置X，配置Y，我们可以得到当前。事件的这个触发相对于页面的XY坐标，我再说一遍啊，这个时候我们可以得到它相对于当前页面的XY坐标，OK，我们在这个基础下。配XY。X。

这个时候的话呢，这就不要了。事件的属性。嗯。支架的配置X配置Y属性OK好了，现在呢，比方说比方说我在这个内啊，我来移动这个鼠标，移动到什么移动啊，我移动它，我移动的时候的话呢，我会每次动的时候都会产生一个事件，这个事件的话呢，我放在这个里边叫。一袋，然后我们可以得到配置X配置Y，你要是这个时候一个一个可乐的吧，太麻烦了，我们直接把这个配置X配置Y呢，放在这个里边来作回他的这个，呃，文本就是看。

Message。X。加一。配置X加。嗯。WHY？加一点配值来OK，看一下效果。大家看我的鼠标动的话，这个坐标是不是跟着动了，哎，这就是我们的配置，配置Y看首先的话呢，我们需要知道这样一件事，第一个什么是市价。

第一个事件本身，第二个事件的两个属性如何，如何得到事件，得到事件对第三个。事件对象的两个数题，OK，什么是事件二呢？事件这个时候我们前面已经很清楚了啊，叫Mo over，当我鼠标移动的时候，会触发这个鼠标移动的支架。好了，比方说嗯，就我们填这个啊啊。鼠标移动时就会触发。出发。60。同学说那click我点的时候就会触发click事件。大包可立个，我点两下的话就会触发double包，可一个事件我们拿这个的话呢，注意一个具体的例子好了，如果得到这个对象呢，说在响应函数中添加一个参数就可以，这个参数名无所谓，比方说这个参数按OB接一样的。

这样的方式的话，我就可以到这个指了两个性，一个配，一个叫配Y，配置X，配置Y指的是相对于当前窗口的这个坐标窗口，这是零，零。累移不了啊，这块我CTRL一下。一般是零零，如果能移的话，零零好了，往下走，这个是什么呀？这是横X，这是Y，整个就是一个XY。

好了，那它有什么用呢？我们看我们的一个练习，练习四。哎，这个怎么了，你看我鼠标动的时候，旁边是不是也也跟着动啊，这个很明显就用到了这个实像我得先得获取到鼠标。鼠标的位置，那个这个位置的话呢，就是move move这个事件的这个XY坐标，然后的话呢，我再让这个图片跟着动就可以了，一会儿的话呢，我们会来写这个练习。好，下面我们来看叫移除事件，移除事件我们可以使用unbound移除，那我们还可以使用一个万，这万是什么意思呢？就是该方法可以为原数绑定一个处理函数，当处理函数触发一次后，这个处理函数立即被删除，叫遗嘱视角unbound看一下。

I。测试移除事项。移出事件，OK，移出事件的话呢，我们首先我们按什么呢？诶比方说我为所有的Li添加上一个和这个假函数Li点干什么，我们希望能够弹出自己的这个文本值。这点这习惯了是吧，Value行吧。

我看一下。这个时候的话呢，每次每次点都会有反应。我上。故事。字点的话呢，这些都会有反应，而且我会一遍一遍一遍一遍的点，那好了，我现在我希望怎么样呢？诶，我希望比方说我对于城市节点的的这些Li点一次之后就再没有反应了，我希望这样这样啊看着说对于对于这个有一个具体的啊，有一定节点。点击。

一次后就没有。响应函数怎么办呢？北京。安移除什么呀，移除。离看这个什么意思啊，我第一次点的是不是还有反应啊，然后我再点的话没有了，被移除了看。刷新首尔。首尔没问题，我再点的话呢，还有北京。坏了。一次也没有过来看第一次点北京有，第二次是不是就没有了，那为什么刚才我点完首尔之后它也没有啊，因为我点首尔的话，是不是也会触发它呀，啊，这就叫I bond。

嗯，那我目前这个效果的话呢，很明显是这样的是吧，我这北京啊。嗯，我必须得这个，我点击其他事件的话呢，也会移除，那我如何说我只有点北京的时候我才移除呢。啊，我是不得判断一下，我只有点北京的时候我才移出，否则我不移出一。base.id等于。北京，如果我点的是北京的话，他才被移除来看刷新。这个时候可以点一下，但第二个就点不了了吧，这就叫什么叫移除事件使用。安放移除。好了，这个完成之后的话呢，实际上对于这个一次性的试卷，我们还有一个方法。

叫换，这是一个方法说。只为。某一个元素碳是只为某一个元素添加一次试加。然后呢，呃，试卷被响应后。是这样函数吧，函数响应后将不再。会触发响应，OK，看一下这个。这个的话呢，我来加他。写个这个吧，Not。那谁呢？我们还有一个井号，比方说叫IOK，我为这个IL啊。

这么写一个2L点。八第四，告我什么是价，可是价告我方式。什么呢？来，L红警，红色警戒。嗯。这是我们上大学的时候玩的游戏。红警二。这些都不好，我们看这红景。我点这红色警戒，我再点没有反应了，它只执行一次，就是我们说的这个Y，好了说了两件事，一个是啊移除事件使用这个。Bo在这儿还有一个就是半。

只为某个元素添加一次响应，再点的话，你就没有反应。移除某按钮上的所有可click，使用这个就可以所有可click移除某按钮上所有事件，不加任何参数是移除所有事件外，该方法可以为原数绑定函，该方法可以为元柱绑定函数。当处理。函数触发一次后立即被删除，即在每个对象上，事件处理函数只会被执行一次。