28_尚硅谷_大数据JavaWEB_JavaScript 的事件驱动 .avi原创

来，我们接着往后说啊，呃，那么我们刚刚在说这个JS的时候呢，我们说到了它是一个动态性的一个语言，那么它是，呃，采用这个事件驱动的一个脚本语言，明白了吧？诶，事件驱动的一个脚本语言，那么我们就需要给大家去说一下它这个事件驱动啊呃，大概呢，有两种这个事件，一种呢，就是用户的事件，什么叫做用户事件呢？比如说你在这个页面中呢，你会做这样的操作啊，比如说我去点击一些按钮，这是你用户做的事吧，对吧，我鼠标呢，诶一进来一出去，这也是你用户所做的事儿吧，对不对，就是你用户产生的行为，我们叫做用户事件，那么基本上我们研究的都是这个用户事件了。另外一个叫做系统事件，就是由系统触发的事件，比如说我把你整个的这个HTML这个页面加载完了，那么它会有一个加载。

完成了一个事件，那么你说有这些事件能干嘛呢？我们可以做事件监听，比如说我监听到你触发了某一个事件了，OK，那我就可去做出对应的一些操作来，明白这个意思吧，比如说我监听到你用户点击了某一个按钮了，好，那我就当你点击了这个按钮以后呢，我接听到了，那我就会对应的去做出一些什么处理来。明白这个意思吧，叫做什么事件来驱动啊，啊，那么常用的事件的话呢，给大家列了几个啊，我们看一下onload就是什么呀，加载完毕的事件on click就是点击的事件on floor就是失去焦点的事件on focus就是获取焦点的事件on month over就是鼠标移移上来，就是比如说我有一个元素，当我鼠标移进来以后，叫做almost over almost out就是什么鼠标从这个元素上面移出去，这些都是一些什么事件，明白这个意思了吧？啊，都是一些事件，好吧，那我就简单的呢，给大家去啊，演示上其中的一两个，明白了吧，OK啊，那这个的话呢，我们还是在我们的这个index这个页面中给大家去做一个基本的演示啊，Index里面啊，那么对于这个事件来讲的话呢，我们这么来做哈，比如说我就在这了啊，我写一个东西啊，我叫做什么呀，就叫做input呢。

我们可以用一个button button就是一个普通的摁钮，能理解吧，就是一个普通的按钮啊value的话呢，比如说就写个啊这个点我呀，是吧，好大家注意哈，我先让你访问到这个页面，我们来看看，访问到这个页面好访问到我们的INDEX2件B。你看是不是有个这个摁钮啊，现在你点你点死了都没有任何反应，看到没有对吧？因为它就没有任何效果啊，所以说呢，接下来我们就要给大家去演示，诶当我监听这个事件会出现什么事啊，注意我就可以怎么写的呢，我在这个上面呢，我通过一个事件，比如说我要监听你的点击事件，那就是一个on click，当你点击的时候呢，我就可以通过一个JS的一个函数来去处理这个事件，比方说呢，我就来处理什么呀，比如说啊，就是呃，Click button吧，好，这个叫什么名字，这个是什么东西呢？BT to是吧？OK，大家听我说啊，这个相当于就是当我点击了这个按钮以后呢，它会去执行这个函数，而这个函数呢，就是我们JS的一个函数，那么这个东西在哪写的呢？我们得自己把它写出来，回到上面，在我们head下面。

我们写一个script，而在script里面呢，我们就可定义我们的函数了，怎么定义呢？语法特别简单，Function function后面直接跟你的函数的名字，是不是这个函数啊，对吧？来CTRLC好把它放到这个位置，然后呢，呃，后面有个小括号啊，有个大括号，这个里面我们也可以给参数听明白了吧，这就是我们JS里面的一个函数，就是相当于我们Java里面的一个方法，明白这个意思吧，OK，那在这里面的话呢，我可以做一个特别简单的事儿啊，比如说我给你做一个弹窗，那我们用到的是一个alert这个函数啊，比方说啊，啊是谁在点我是吧？啊那么大家注意，我给大家分析一下啊，就是当我再去点击这个八帧的时候呢，它就会监听到你点击了，并且帮你去执行这个函数。而执。

定义我们上面的这个函数的时候呢，大家注意它里面就会执行这一行代码，而这行代码呢，就会帮你做一个弹窗理解了吧，我们来试试啊刷新。

点了啊，刚才点是不是没任任何反应啊，现在我在点呢，你看了啊，我点看到这个弹窗没看到没有，哎，直接就出来了啊而且呢，告诉你是谁在点我，那么这个呢，就是一个啊点击就是用户的事件了，这就是一个点击事件了，明白了吧，诶，这就是一个点击事件了啊啊再来演示两个吧啊比如说呢，我们再写个这个div吧，然后呢吧，然后这个div的话呢，我们给一些简单的样式啊，我们给个呃ID吧，等于D1可以吧，D1啊D1，然后呢，呃，我们给一些简单的样式啊样式的话我们再写一个style好，你可以通过这个ID选择器啊这个井号D1是这么写的吗？是不是啊，还记得不记得宽200个像素，然后呢啊高哦200个像素，再来个背景色吧。

Background color，比如说红色吧，来，我们先看到它哈，呃，刷新一下。有了吧，OK，有了以后呢，我们要注意了哈，我们要做这样的事，我给这个div啊，我要去绑定这个事件啊，绑定什么事件呢，你注意了哈，比如说啊monthover好，我就给它绑定一个什么，就是鼠标进来的这个事件。能明白这个意思吧，啊，那就什么呀，啊，那就什么嗯，就是这个month overver吧，好，我让你去执行这个函数，好同样我还能再绑定，比如说month什么呀，Out，就鼠标出去了吧，哎，Out，那我再给你绑定这个函数，那么我们只需要把这个函数都给它写好啊，比如说monthover ctrl c，好我写到上面，我再写一个function monthover这样的一个函数，当你触发了这个事件以后呢，我也给你弹了窗啊就是什么呀啊，鼠标离开了，好再写一个是不是有一个什么来着，貌似什么out吧，诶，这是这是鼠标进来了是吧，鼠标进来了好，那这个的话，我们就来说一下什么呀，Alert，这叫什么呀，叫这个鼠标离开了。

能听懂吧，哎，鼠标离开了啊好吧，来，我们再来看一下这个事件啊。好，你看哈，鼠标进去。进来了吧，是不是这个事件啊，OK，确定啊，啊你看啊，呃，进来就是鼠标进来了，然后呢，我在离开的时候呢，它其实也有一个事件，你看看啊，我进来了，你看点了以后是不是就是离开了呀，对不对，OK，那么当我你看看啊，把这个注释掉了，就是你进来的时候呢，我不做弹窗了啊，这样的话，我看到这个效果更好一点啊，我进去没有反应，因为我注视掉了，我离开你看是不是出来了，对吧？诶都有这样的一些事件啊，那么其实我们大部分页面上的这些动态的效果都是通过这种事件驱动来去做的。

明白这个意思了吧，好吧，那我暂时呢，就来给大家去演示这么几个就可以了，OK。好，那么这就是我们，呃，Javascript的一个什么事件啊，驱动。