111.尚硅谷_JS基础_事件对象

来看这儿有这么一个东西啊，有这么一个功能来看看啊，这个有这么一个小的页面，这个页面比较简单，上边呢，是一个这个大一点div，下边是一个这个小1.div，对吧？那什么功能呢？嗯，你看当我鼠标去在我们这个大的div里边去移动的时候啊，我这一移动。你看什么了，在这个小的div里头，可以显示出我这个鼠标的一个坐标啊，诶你看我移动这这可能是一个这个哎1010对吧？哎，然后往这边一挪，它这个坐标X轴是不是在改变呀，往下挪的时候，这个Y轴是不是在改变呀？哎，可以来显示我们这个数标的一个坐标，诶那我们来看看这个功能我们要去怎么去完成啊，怎么去完成，那这里边呢，我来把这个文件我给它复制过来，CTRLC直接复到我们这个页面里，CTRLV改一个名啊，我们这来说一什么呢？叫做一个零八，我们的一个这个事件对象啊，事件对象也是一个比较重要一个概念啊，我们来说一下，那这里边他都已经给我们给我们写好了啊，我把这里边都给它。

删了啊，删了保存，现在我们这CTRL1运行，这里边是不是现在没有任何功能啊，哎，没有任何功能，那我们来说一下我们要实现一个什么样的功能，在这儿我们来写一下叫什么呢？当我们这个鼠标在这个大大div，也就是我们这个a realar div a realar div中移动式在哪呢？在我们这个受message，这是不是还有一个div啊，叫受message中干嘛呢？哎，来显示我们这个鼠标的坐标吧，哎，鼠标坐标，哎，当我们这个鼠标在这个RA电位中移动时，在show me中来显示我们这个鼠标的坐标，但是现在我们先宾管怎么做吧，那现在涉及到了。两个div是吧，哎，两个div，所以干嘛呢？我来获取这两个div，直接挖一个这个AA a real，一个div等于一个document点一个get ID来一个诶他然后呢，再来一个一个这个show，一个message，等于一个document点一个get摆ID叫做一个show message是不是这两个div都有的，好，两个div都有了，那接下来我们来看看嘛吧，就当鼠标在我们这个div中移动时，当鼠标在div中移动的时，也就是说我这坐标不是随便显示的，我这鼠标跟这晃的时候显不显示。

不显示只有什么呀，鼠标在这儿移动的时候才显示啊，哎，那我这块就需要干嘛了，我是不是得先得知道我鼠标在这。移动啊，哎，我得知道蛇标在这移动，那那怎么办呀？诶，那是不是得具有个鼠标移动的事件呀？哎，来，那我们来看这有没有啊，我们这个叫做一个你问他往下来看有没有什么鼠标移动，鼠标移动诶你看这儿有一个什么呀，叫做on mouse move mouse鼠标move什么呀，移动啊，那这个是不是就是我们的鼠标被移动那个事件呀？哎来，我把它整过来叫做一个on mouse move，该事件什么呢？诶，该事件将会在我们这个什么呀，鼠标，诶在我们这个元素中移动时被什么呀？被处罚啊，被处罚，所以事件我们找到了，那接下来我们来看这个事件我要给谁。

给谁绑啊，是不是给大div绑定啊，诶就是我们这个div，所以这直接来一个div点一个那个on mouse，诶on mouse木等于一个function等于一个function，然后我们来看这alert一个alert一个，诶我动了，然后一保存，咱们先看效果，现在我一刷新，你跟这动有没有反应，没有反应你得带什么呀，在它里边吧，诶这一动咔是不是就出来了，诶这一动它就出来了，诶这一动就出来了啊是不是经效果好，那现在这个鼠标移动的事件已经有了，那接下来呢，在这里边我是要干嘛呀，在我们这个叫做show message中要干嘛呢？要显示我这个鼠标的坐标，显示坐标好显示直接in h前边是不是显示了，但问题是什么呀？坐标是啥呀？

诶，那我这不能，我一看那这又动了是吧，我一看哎呦来保存一下啊，一刷新你看这没事是吧？诶一堆劣质的广告什么玩意是吧？哎，你往这一弄，你是不是鼠标有一个坐标啊，比如说现在鼠标坐标是不是这个点呀，你需要把这个点的坐标是不是在这去显示啊，那问题是什么呀？这坐标是啥呀？那我不能拿个尺子上去量去是吧？这成本是不是太高了，所以鼠标的坐标我知不知道。我不知道这个坐标，我根本就不可能知道，根本就不可能知道，那我不知道谁知道呢？哎，总得有一个人知道对吧，谁知道浏览器知道啊，浏览器知道，那既然浏览器知道我们就干嘛呀。

问浏览器是不是行了呀，哎，问浏览器就行了，其实呢，诶那既然浏览器知道我们来说，那我们怎么去问浏览器呢？那这块我来说一下，那这块就要用到了，我们这个什么呀，叫做一个事件对象啊事件对象什么叫事件对象，我们来说一下，当我们这个什么呢？呃，当我们这个叫做事件的这个响应函数被触发时，注意了，我们事件响应函数是不是都是被浏览器掉的呀，所以这函数你这绑定完了，最后掉的时候都谁掉的呀？哎都是浏览器掉的啊，都是浏览器掉的，当事上响应函数被触发时，我们说什么呢？浏览器每次都会什么呢？都会将一个这个事件。

对象作为什么呢？作为实参传递进我们的什么呢？我们这个响应函数，所以注意浏览器在调函数的时候不是干着掉的，他干嘛了呢？他每次都给你传了一什么呀，十参进来啊，每次都给你传了一个十参进来，那注意了，那就传一个十参，我想用怎么办呀。我可以用那个什么呀，Argument对吧，但是有点麻烦，那我直接干嘛呀。我是不是定一个这个行参是不是行了呀？哎，那比如说我定一个行参就叫什么呢？叫一个event，我这干嘛呢，我先来一个alert一个event，我先不管它是干嘛的，我先干嘛呀，我先看看他。传没传吧？诶传没传，我这一保存，咱们来看我这移动走，你是不是来了一个呀，诶叫做一个Mo，你问的注意了，是每一次都会传进来啊，每次都传进来，那注意了，这名儿我是不是非得叫一问的呀，你说我就叫E行不行，易保存易刷新是不是也是啊，跟你行参的名字呢，他无所谓啊，行参叫啥都行，我叫你问他呢，这意思更明确一点，而且说了你不定义行参，他传不传，哎他也传，跟你定不定义行没有没有关系，我们定义行只不过是为了方便使用吧，哎，方便使用啊好，那这对象有了，这对象是干嘛的呢？浏览器每次都会将一个事件对象作为实参传递进响应函数，那这这个玩意儿是干嘛的呢？诶，那我们说了，在我们这个事件对象中干嘛呢，封装了我们这个当前事件相关的这个一切信息，那一切信息呢，比如什么呀，鼠标的。

坐标，比如键盘哪个哎，按键被按下，比如我们鼠标滚轮滚动的这个方向等等等等，所有我们这个事件的这个细节都在这个事件对象里边呢封装，所以如果你想去获取这个鼠标坐标，那怎么办？你是不是去问这个。

事件对象就完了，诶那现在我想获取鼠标坐标，那我怎么获取呀？那我要获取无非也就是什么呀，它的方法获者属性吧，哎方法或者属性，那就问题又来了，他有啥方法，他有啥属性，诶查呗，对吧，其实我们这个对象呢，一直在看我这个do这个你问它就是谁啊，这就是时间对象啊这就是时间对象它的属性呢在下边，诶你看鼠标键盘属性什么out key诶叫什么呀？Out是否被按一下button鼠标哪个按键标一下，往下一看叫LAN xlan叫什么呀？返回当事件被触发时，鼠标指针的水平坐标，诶兰Y当事件触发时，鼠标指针的垂直坐标是不是这两值就有了呀？诶那我们现在要的是不是就它俩呀，但是你要要别的可以在下边参考，那现在我们这两个就够了，所以我直接来一个叫什么呢，叫做一个可烂。

X来这一块我们来说一下，叫做ctx可以获取我们这个鼠标指针的叫什么呀？水平坐标，而我们叫什么呢？兰一个Y，诶可以获取我们鼠标指针的这个垂直坐标，那问题又来了，这东西我怎么获取啊？我是不是通过事件对象啊，对，直接来一个Y，一个X等于invent点一个X，再来一个Y，一个Y等于一个引问的点一个Y，这两个坐标是不是有的呀，然后呢，我们在这来输出一下alert，一个X等于加上一个X加上一个这个，哎，加上一个这个逗号来个Y等于加上一个Y，是不是拼个串啊，我们来看效果啊，这一刷新走你一路。

是不是出来了，X等于309 Y等于44往上移动，是不是X等于32 Y等于57，这值是不是就有了呀，但是还是这个问题，你这东西不能在这显示，需要在哪是下边显示啊，下边显示也就是我们那个。受message吧，哎，受message，那你就在这里边显示，那就简单了，直接什么呀，受message.inner htl等于。这一串是不是就行了呀，上边A了，咱们给它去掉，这样一保存，再看刷新走是不是坐标就有了呀，诶X是多少，Y是多少，就可以获得这个坐标了，所以注意啊，这个东西咱们是不可能知道，谁知道呢？是浏览器知道，既然浏览器知道，我们就想办法要去问什么呀，问浏览器，而且浏览器每次实际上他都干嘛了，都已经告诉我们啊，这是我们这个事件对象，咱们只需要定一个行参就可以去使用了啊，每次都会出，诶绝无例外啊，绝无例外，所以以后想获取事件相关的信息，或者是对事件做一些相关的操作，都找谁呢？找你门啊找你门好，那这块看完了，咱们来看看什么呀，咱们看看它的兼容性问题啊，咱们这个火狐不用测了，好使了，来看看图，走你走，你是不是也好使啊，哎，也好使，再来看看我们什么呢阿姨。

IE运行呢，诶很完美是吧，完美来看看我们这个IE9IE把咱们老师放到最后是吧？来我也没问题啊，也没问题，来咱们看看这个来一八，那也就是这个激动人心的时刻是吧？来走你完了，这一走报了11个错是吧，回来又爆了九个是吧，一共这半天是爆了干嘛了，20个错是吧？哎，20个兔太太可爱了是吧？诶诶叫什么呢？三兔几行啊？46行是吧？无法获取未定义或nu引用的属性X诶无法获取未定义或nu引用的属性client x46行看看是不是这样的呀？诶这行无法获取他的climb X，那换句话说，它的意思是我的这个invent是。

没有是吧，哎，Event没有，咱们来看看这个invent有没有啊，直接来一个alert，一个这个event，然后一保存，咱们来看一刷新这一点。哎呦安find他是确实是没有吧，哎，一没有这是不是就错了呀，你注意啊，这是一个安find，你and find点兰X这是不是报错了呀，一定注意啊，这一报错，这46行报错了，下边还执不执行了，就不执行了啊，这一报错我程序就干嘛了，就终止了啊就终止了，所以一定要注意它有这么一个问题，他一旦出问题了，下边就都不执行了，所以就不用考虑下边了，诶万是unde find这是为啥呢？

诶，我们来说一下吧，哎，但家注意啊，我们说在我们这个IE8中，我们这个函数叫做什么呀？响应函数被触发时，浏览器干嘛呢？不会传递我们这个事件对象，换句话说，它传没传时态呀，没传人家压根就没传，他没传你这玩意儿是不是就是安你范的呀，安你范的所以就不行了，那怎么办呢？那他没传他什么呢？在我们这个IE8级，呃，以下的这个浏览器中，它是什么呢？是将我们这个事件对象作为我们这个什么呀，Window对象的属性保存的，换一句话说，在这些浏览器里边，事件对象是个什么呀？是个全局全局对象，所以这你就不能用window了，不是不不能用了，用什么呢？哎，用一个window.event来，一个这个window.event来。

曹存他们来看，这回一刷新走你诶是不是就很happy了，诶来再看我们这个他是不是也没问题啊，哎，这都没问题了啊，看看我们ome呢，依然很坚挺是吧？哎，依然很坚挺，咱们来看看我们这个火狐托尼。完了是吧？火狐是不是又不灵了呀？抱一堆腿抱一堆腿window is，诶，但是你要注意了。IE8的这个引问它保存到这个window里，而还有一些浏览器呢，它没保存到一个window里，它还是作为什么呀，13传进来了，但是这种方式你要注意啊，其实我们的Co还有IE都是什么呀，兼容的都是兼容的，唯独谁呀，火狐是不兼容啊，哎，这哥俩又捣不捣乱了，那怎么办呀，这种方式兼容爱意这种方式。

是不是兼容火狐啊，诶那怎么办呢？是不做个判断呀，哎怎么判断呢？If if什么呀，你问的什么意思呀，我判断有没有这个你问的如果有我们用不用不用吧，如果有疑问的，你前你前边是不是直接用啊，直接用就完了，那我来什么呢？叹号这叫什么呀，没有，如果没有怎么办？是如果没有问我就要问于问点问吧，这样在我下边是不是可以确保我这个问存在了，哎存在了，这回一保存碳火锅一刷新。是不OK啊，诶OK，看我们这个，哎CH一直都OK是吧，诶一直都OK，然后看他说IE8，诶这11啊，诶看我们IE8。

是不是也OK了呀，哎，也OK了啊，所以可以使用这种方式来处理我们这个兼容性问题，如果有我什么也不管，如果没有我干嘛呢？我就让你等于window.event啊window.event这是一种写法，还有一种我们更常见的怎么写的呢？诶这么写怎么写呢？来一个event等于一问，这什么玩意儿，让他自己等于自己是吧，然后看着啊，或者window点一问。看这么写了吗？诶，已问的等于疑问的，或者是1WINDOW点疑问的，那这或者它有什么特点，如果第一或我们说或是找什么呀？是找处的吧？诶找处的，如果第一个是处，他干嘛了？是不是直接返回了第二个，人家压根儿是不是就不干了呀？如果第一个是for，是不是直接返回第二个呀？哎，第二个，所以我这句话意思什么呢？我先让已问的等于它，那我们说了，如果已问的这个存在的话，它是不是就有对象啊，有对象它是什么呀？True true是不是直接把它返回了？如果它不存在，它是什么呀？And find and find是不是就是for呀？For返回谁呀？就是返回第二个呀，哎，第二个啊，所以这种写法跟上边其实是一样啊一样的，但是这种呢，更简单一点，它更简单点，我这一保存，那们一刷新移动。

是不是OK啊，哎，都是OK的啊，看这一刷新移动是不是也OK啊，诶那这里边一刷新移动是不是也OK啊，也OK啊，所以注意我们在操作事件对象的时候，往往都需要写这么一行代码，这是干嘛的呢？就是为了解决我们这个，解决我们这个，哎事件对象的这个，哎兼容性问题啊，兼容性问题。好，那这个呢，是我们说的这么一个事件对象，那接下来呢，我们来听一下下边。