92.尚硅谷_JS基础_事件的简介

我们来接下来进入到下一个知识点，那现在我们来讲一个什么叫做一个事件，那关于事件的注意了，关于事件其实东西还挺多的，当然由于我们马上就要用到这个事件了，所以我们现在就是一个初步的一个了解这个事件，做一个这个简介啊，你知道什么是事件，什么是事件啊，事件叫什么呢？就是我们这个文档和浏览器窗口中发生的一些特定的交互瞬间啊，定交互瞬间什么意思呢？事件说白了就是什么呀。就是事儿啊，就是事儿发生了一个事儿啊，发生了什么什么一个什么样什么样什么样的那个事儿，举个例子，比如说我说我干嘛呢？诶我亲了马超一下，这是什么呀，这就是一个事件啊，这就是一个事件，事件就是什么呀？就是事儿啊，就是事儿，但是我们说了，这是我们这个现实生活中的事件，当然也不太可能发生是吧？也不太能发生，诶那我们来说，那我们浏览器里边事件什么样呢？我们来演示一下啊，比如说。

来新建一个这个零六，我们来说一下叫什么呢？叫做一个这个事件，事件我们这来创建一个BTN来一个按钮，按钮给它来一个ID，我们叫做一个这个一天，然后呢，这写一个我是一个按钮，然后一保存咱们CTRL运行在外边来看，那现在我这页面里是不是就有这么一个按钮了，诶那这按钮怎么叫事件了，我这看一点这个按钮，这就什么呀，这就是一个事件，就相当于什么呀，亲了一下。能理解吗？这就是一个什么呀，事件啊，这就是一个事件啊，包括什么呀，你看我这干嘛呀，我是不是能拖动浏览器窗口啊，我干嘛呢？我可以用鼠标去改变我这个浏览器窗口大小吧，甚至说我可以点这个插的是不是关闭浏览器啊，这些都是什么呢？都是事件，我只要在这儿有行为了，它都是什么呀，都是事件，鼠标你跟浏览器这里边晃悠，它也是什么呀，也是事件啊，所有的操作都属于什么呀，都属于事件，但是这块就有问题了，我们知道事件，那这事件有啥用啊，这件有啥用啊，我这点完这按钮干嘛呢？点一点反应也没有啊，哎，一点反应没有，就像什么呀，清完马超以后，马超一点反应没有，这听着是不是也挺没劲的是吧？同样我点完这按钮，他没反应，是不是也挺没意思的呀，所以我们说了事件是什么，事件并不关键，关键是什么呀，我们要处理这个事件，怎么叫处理这个事件呢？诶当我亲完马超，马超可能干嘛呀。

也亲我一下是吧，哎，亲我一下或者干嘛呢，或者他干嘛呀，哎，他特别害羞的说是吧，讨厌，哎或者干嘛呢，或者回过头来打我一大嘴巴，对吧，比如说当事件发生以后，我们是不是得有一个行为去处理这个事件啊，哎，处理个事件啊，所以这块我们来说一下我们关键的问题在哪。

Script的标签，我们来说一下什么呢？什么叫事件，诶事件就是什么呢？诶就是我们这个什么呀，诶我们这个用户，就是我们这个浏览器，诶之用户和这个浏览器之间的一些交互行为，诶之间的一些这个交互行为，比如什么呢？诶比如我们那什么呀，诶点击按钮，比如鼠标移动，比如关闭窗口，诶比如还有什么呢？还有我们那什么呀，诶等等等等一系列所有操作，它都是什么呀，事件，事件呢，非常非常的什么呀，非常非常多，我就不一一去举例子了，但是还是这个问题，事件对我们来说其实并不关键，我们关键要关注的什么呀？诶那我们说了，事件发生的时候，我是不是得需要去处理这个事件呀，比如说按钮，当我点击按钮的时候，我干嘛呢？我希望你给我可以给我弹出一个什么呀提示框，哎，你给我弹出一个提示框，那我需要干嘛呢？那我怎么来去处理这个事件呢。哎，那我们来说第一种方式。

处理事件怎么处理，我们可以什么呢？哎，我们可以在什么呢？在我们这个事件对应的这个什么呀？哎属性中。完呢，诶设置一些什么呢？一些这个GS代码，那这样什么呢？这样当我们这个事件被什么呢？被触发时啊，当我们这个事件被触发时，这些什么呢？这些代码将会什么呀，将会执行啊这些代码将执行，诶我们可以在事件的对应的属性中什么意思？这东西其实我们做过，那怎么做呢？我们来看，那我希望的是什么呀？我希望当我单击这个按钮以后，你是不是可以给我弹出一个提示框啊，那怎么办呢？来在标签里我添加一个属性叫什么呢？叫做on click，诶on click on就是on click click什么意思呀？诶点击诶on就什么呀，当我点击的时候啊，当我点击的时候，我这来什么呢？来一个A乐乐，我写一个，诶写一个这个讨厌，诶你点我干嘛？诶，咱们写这么一句话，然后呢来个叹号，那这是什么意思呢？这个代码我们先说他，我一保存它会不会执行不会执行啊，不会执行，为什么不会执行，哎，我还没点。

这什么时候执行啊，当我点这个按钮时候才会执行，所以你看我一点走，你是不是讨厌，你点我马就出来了呀，诶那我们说了，我现在是不是就用这个GS代码，是不是去响应我这个事件呀，哎，就响这个事件我一点。它干嘛是不是就出来呀，哎，再一点是不是就出来了，哎叫做响应这个事件啊，所以注意我们都需要干嘛呀，诶通过这种响应这个代码响应函数来处理这个事件，诶但是我们说了，现在这个安可丽上，你你你告诉我们有一些东西，它事件上还有很多呢，比如说我想干嘛呢，我想点两下。带反应，这样我点一下是不是反应了呀，哎，我想什么呢？我想点两下的自带反应，那这块要怎么办呢？诶，那是不是应该还有。

其他事件呀，诶它的事件我们在哪看呢？来找到我们这个文档，文档来看这儿有一个叫做do参考，点开这个do参考，其实就回到那个对象，那个对象那个页面啊这些对象里边往下有一个什么呢？有一个叫做一个do，一个invent invent什么意思呢？就是事件的意思啊，就是事件意思来你这一点开往下看，你看这是不是一堆啊，哎，你看刚才咱们用的啊clickli，哎，当用户单击某个对象是吧？哎，当用户单击某对象时，往下看还什么呀啊double click当当用户什么呀，双击某个对象时啊，Double d BL，诶所以我一想干嘛呢？我不不写可利格了，加一个BBL，现在我这一保存，咱们看我点一下走你走你是不是没反应了，哎，没反应了来。走。哎，你是不是连着点两下啊，哎，你得双接才有反应啊，这是我们说这个D比L这个double可粒，你说double可力也不过瘾了，诶这刚才是亲一下是吧，这回得亲两下是吧？诶然后再看还有什么，还有一个叫什么呢？还有一个叫做on mouse。

木，诶，On mouse move这什么玩意儿，我们来看看，诶是不是鼠标被移动啊，我直接试一下啊，试一下来，我跟这一写on mouse move，现在你看着啊，我跟这晃悠没事吧，诶当我鼠标干嘛呢，我一要这个按钮。是不是就出来了，哎，这变得是不是更敏感了呀？诶稍微一靠近干嘛了，就出来了啊，就出来了啊好，那这一块呢，是我们说这个，诶事件这个处理啊，我们需要通过这种方式去处理，但是注意了，写完是写完了，他有没有啥问题啊。哎，是不是又耦合了呀，哎，我将这个GS代码和这个nmr是不是又写一块去了，哎，所以这种方式怎么说呢？诶可以用，但是呢，不推荐使用，因为如果你写太多的话，不方便维护啊，不方便维护，那我们再强调一下这种写法，我们什么呢？我们已经说过这个问题了，称为叫做什么呢？叫做这个结构和这个行为耦合，诶不方便我们这什么呀，维护啊，不方便维护，所以这个呢是我们这什么呀，诶不推荐，诶使用啊不推荐使用，好，那这一块我们说了，那这东西不推荐使用，那你得想别的招了，那首先了，那我就不能这么写了，我这复制一下把它给住了，住了以后保存这按钮就。

哎，现在一点它是不是就哎哟我没删呢是吧。来。把他给。删了，已保存，现在一点是不是没反应了。那接下来那怎么办呀，不让往这写了，那往哪写呀，没地儿了，只能往什么呀，是不是script在标签里写了呀？哎，只能往这标签里写了，那标签里写我要干嘛呢？我现在可以什么呢？诶可以为我们这个按钮叫什么呢？诶对应诶事件来绑定什么呢？绑定我们这个处理函数的那个形式来干嘛呢？诶来处理我们这个事件或者叫什么呀，来响应我们这个事件啊，来响应的事件，也就是说我要给这个按钮对应事件绑定一个什么呀，处理函数怎么绑定啊，咱们先不管怎么绑吧，我们先来看我是不是要给这个按钮去弄事件啊，那我得先干嘛呀，我是不是先在找他对象啊？哎，第一步找对象，对象没有什么都白说啊，什么都白说，所以第一件事我先在干嘛呢？先来获取我们这个按钮对象怎么获取啊，直接挖一个bta，它是不。

有ID啊哎，直接来一个document，点一个get element版ID，然后来一个闭拼按钮，对象是不是就有了呀？然后我们这来一个canl，点一个log，一个B填我这一保存对象有了吧，诶对对象有了怎么办？怎么用呢？诶来我们可以什么呢？诶在这儿直接粘过来吧，诶可以为我们这个事件的这个对应，诶可以为按钮对应事件绑定处理函数的形式来响应事件什么意思？那现在假设我想干嘛呢？我想为按钮绑定一个什么呢？绑定一个这个单击事件啊处理一个单击事件，单击事件我刚才说了叫什么呀？是不是叫UN可Li呀，哎，Uncleli那怎么处理呢？直接来一个必填眼on clickli干嘛呢？是不是得给给这个对象去添加属性啊哎，给这个对象添加属性，那这属性等于什么呢？属性我们要等一个注意了，等于什么呢？等于一个函数看见吗？哎，属性。

等于的是一个函数啊，等于的是一个函数，那我们先来说我这来什么呢？来一个alert，诶你还点啊写这么一个，我写这么一个啊，那现在要注意了，还是这个问题，这函数它会不会执行，我已保存直没执行，没有执行啊没有执行，那这个函数什么时候触发呢？哎，我们可以，哎可以为按钮对应事件绑定处理函数的形式来响应事件，这样什么呢？诶这样当我们这个事件被触发时，事件被触发时，哎，其对应的被什么呀？哎，函数将会什么呢？将会被调用，所以注意这个函数什么时候调用，当这个BTN的这个昂可Li事件被触发时才调用，所以注意这也属于什么呀。

是不是回调函数啊，哎，不是马上执行的时候，什么时候执行来看我一点走，你是不是执行了，哎，我再一点是不是执行了呀，哎，当事件触发的时候才执行啊，事件出发时才执行，那我们来看写在这儿是不是比写在上边就就好多了，诶这一块我们将他们进一步的这个分离，我们维护起来呢，更加的什么呀，更加的这个方便啊，更加方便，那你这现在是单机时件，你说我不想绑定单机时件来什么呀，我想整一个双机事件，那怎么办呀？诶安一个这个double click d BL click，我这一保存现在一点一下没用了，是不？你点两下啊，再点两下，你说这也不过瘾了，可以来一什么呀，来一个on mouse一个哦啊，我一保存移动是不是出来了，哎移动出来了啊，所以这块可以采用这种方式来绑定，那这种方式呢，也是我们说的一个什么呀，推荐使用一个方式啊，使他们进一步的去分离啊，进一步分离，那像我们说的这种，我是不是给他安可Li，给这个单机事件绑定的一个回调函数，诶，那我们来说像这种。

为我们这个单击事件绑定的这个函数，我明什么呢？我们称为叫做单击响应函数啊，响应单击时间呢，如果为双击实间绑定的是什么呀？双击响应函数啊，以此类推，反正总之呢，这个函数叫什么呀？叫响应函数用来响应我们什么呀，事件这个函数什么时候执行，当事件被触发的时候执行啊，当事件被触发的时候执行啊好，那这个呢，是我们说的这个事件简单了解一下，然后这两种绑定方式都要非常非常的这个熟悉啊，一种是什么呀，直接在标签里通过属性来绑定，还有一种呢，获取对象，然后通过为对象的指定属性去绑定这个回调函数啊，两种方式都给他记住了啊来，我们先停一下。