121.尚硅谷_JS基础_滚轮的事件

说一个东西啊，说一个刚才我们说的是包括我们这个拖拽的时候，实际上说的都是我们鼠标事件，什么鼠标摁下呀，松开呀，鼠标移动对吧，那鼠标里边还有一个东西，有时候也会用到，诶现在其实有用的也挺多的，相当于什么呢，鼠标的这个。滚轮事件啊，滚轮事件我们叫滚轮事件，不叫滚轮事件，主要是不是滚轮啊，滚轮可以是不是上下的去滚动啊，哎，说是滚轮的事件啊，滚轮的事件呢，我们直接整一个这个练习来说一下啊，直接div井号一个BOX1创新盒子，然后style标签我们这来一个这个井号BOX1Y来一个这个100个像素，也来一个100个像素，我们很熟悉那个那个小兄弟了是吧？嗯，这个100乘100的一个这个小核是吧？诶考R运行。诶这么一个东西，那我要做一个什么功能呢？现在我希望什么呢？诶，当我鼠标放上去的时候，我这鼠标滚轮是不是可以滚动啊，我希望做一个效果，当我鼠标滚轮往下滚的时候，我希望它干嘛呀，越来越长，越来越长，越来越长，当我鼠标滚轮往上滚的时候呢？它干嘛呢？哎，越来越短，越来越短，越来越短，这能理解吧，那就说它可以随着鼠标滚轮的滚动而改变那个什么呀，长度跟那什么呀，金箍棒似的，我说变大变大变大长了，变小变小变短了啊就这个效果来，那这边我们先写一下这个功能，来一个这个window点一个lo等于一个这个function等于function，我们来说一下什么呢？叫做十，我们这个。

叫做BOX1，诶当这样写吧，当我们这个鼠标滚轮滚滚纹轮，滚轮向下滚动时，我们什么呢？我们这个box子一变变长，诶变长当什么呢？哎，当这个滚轮诶向上滚时，诶向上滚动时，我们这个BOX1干嘛呀？

变短啊，就这么一个功能啊，就这么一个功能，鼠标滚轮滚动，那现在我要怎么办呀？我现在要干嘛呀，那BOXS1那咱们就不用说了，先干嘛呢？先把BOXS1获取到，获取我们这个ID为这个BOX1的一个什么呀？诶div直接挖一个这个BOX1等于一个do点一个盖加600ID来一个BOX1 box1就获取到了，那接下来我们说要干嘛呀，当鼠标滚轮往下滚的时候，它是不是变变长啊，往上滚的时候得变短，那我得第一个线得干嘛呀。哎，我得先知道我们这个滚轮儿他。滚没滚吧，哎滚没滚，所以接下来我们要是要干什么呢？就要给我们这个BOXS1，那注意了，我说这滚轮滚动是指什么呀，我滚轮在这儿滚动的时候再变，在这儿滚动变不变不变，只有在这里边滚的时候它才变，所以这边我需要干嘛呀，给它绑定一个鼠标滚轮滚动的时间啊，滚动的时间直接来什么呢？诶为我们这个BOS1。

诶绑定一个这个鼠标滚轮滚动的一个事件，怎么绑定直接BOX1表一个叫做一个a Mo well啊a Mo well等于一个function等于function，我们来写一个来一个alert一个alert一个什么呢？来一个这个滚了来一保存咱们来看啊打开换个浏览器打开门这一点跟这滚是不是没事啊，当我鼠标一挪上这走你哎是不是滚了呀，哎就触发了啊滚时候滚动的时候会触发，而且只在什么呀，在这上面滚的时候触发，诶在这上滚的时候触发啊好那就完事了，然后再看看我们这个什么呢？我们这个IE这以刷新走，你是不是也可以啊，哎也可以，但你会发现一个问题，我这刚才打的打开的好好的火狐突然不是了是吧？为啥不是了呢？因为这几个浏览器总有一个会给你掉链子啊，总有一个会给你掉链子，一刷新。

没用吧，哎，没用啊，所以注意on mouse well叫做一个鼠标滚轮滚动的一个事件，叫做鼠标滚轮滚动的这个事件会什么呢？会在我们这个滚轮滚动时出发，但是呢，但是什么呢？但是我们这个火狐，哎不支持改属性啊，这个东西呢，火狐他干嘛呢？他不认，有时候就就很讨厌这个事儿是吧，总有一个给你找事儿的，那火狐其实你要说不兼容呢，可能也没有那么多用的，但是呢，我们说那怎么兼容的，如果要真要兼容，我们要怎么去兼容呢？来说一下在火狐中呢，在火和五个火火狐中需要什么呢？使用一个叫做什么呀？叫做一个，叫做一个do Mo Mo c LL DOM Mo，死扣，哎，它它不一样就不一样嘛，还起一个这么难听的名字是吧，诶，DOM Mo。

此刻来干嘛呢？诶，来绑定我们这个滚动事件，而且注意你看这个跟这玩意儿长得不太一样啊，人家都是on，它是不是没有on啊，哎，没有on，而且你要注意注意什么，该事件需要通过我们这个A的invent listener这个什么呀，这个函数来绑定，你说我直接来一个box 1.1个do Mo score，没用啊，人家压根就不认啊，不认，所以呢，你还得用那个A的invent listener怎么来呢？直接来一个吧，来一个这个box 1.1个A的invent listener，哎，我这一传，咱们这样吧，不用他了，咱们上午是不是写一绊子呀，咱们直接用绊子啊，绊子可能省点事，把这个绊子呢给他占过来。CTRLC，然后把这band给它放这儿，放过来以后呢，我直接来了，直接来一个叫做一个band b，我这来一个BOX1，然后事件呢，叫这么一个倒霉名盗Mo死克，然后呢，来一个这个function不就完事了，然后我这也写一个，写什么呢？写一个滚了一刷新走你哎是不是滚了呀，哎这一块是不是就OK了呀，哎就OK了啊就可以了，那我们说现在cruome也可以了，现在我们这个IE是不是就也行了呀，哎就也行了啊用这个半的函数绑定的，但是问题来了，现在我要问你了，我在火狐里触发那个函数，还有在我们IE里边触发那函数，它是一个吗？是一个不是吧，在里边是不是触发的上面这函数在这个火狐里是不是发的，下边这函数都是这个滚动，那我们说了这两个函数，我们用不用做两个业务啊，业务需求是不是一样的呀，所以这块呢，如果你在这写的话，它就什么就麻烦了，你是不是。

得写写两个函数，那怎么办？

诶，我可以把这函数干嘛呀，我说给提出来呀，翻个来什么呢？就叫一个f fun，我在这干嘛呢，我让它等于这个f fun在这儿将f fun作为。参数这样是不是就一个了，诶一保存一刷新走你滚了，然后一刷新是不是也滚了呀，这样是不是就一个函数了，这样写也行，但是也可以这么写呢。看着啊，直接把它去掉，直接写什么呢？直接这么写。这么写行不行呢？你们先看看啊，先看看一刷新走你是不是一样啊，在这我一写一刷新走你是不是一样啊，诶这东西能看懂吗？我将这个函数赋值给了box1.1个on mouse，喂，对吧，然后我又将这个这个函数作为回到回调函数传给这个半的了，那现在这两个是不是同一个函数能看懂吧，还是同一个函数啊，大会看一下这东西没有什么难的，都是咱们以前讲的东西啊，直接把这个函数作为这个参数传过来，跟刚才那写法实际上是一样啊，实际上是一样的，好，那现在滚动这个事件绑定完了，那下边这种方式呢是什么呢？是为我们这个火狐绑定我们这个滚轮事件的啊，为火狐绑定的，那接下来该干嘛了？接下来干嘛了？诶说在这儿啊，当鼠标滚轮向下滚动的候，BOS1变变长，向上滚动的时候，Bos变变短是吧？诶那我得先干嘛呀。

我得先知道它，它是往上滚还是往下滚吧，所以接下来的操作呢，我要干嘛呢？我要判断我们鼠标滚轮滚动的方向啊，我得知道它是往哪滚的，那完了它往哪滚我哪知道啊，谁知道哎，这事也不用考虑，肯定找谁呀，诶我们这个这个老引是吧，诶我们这引问他啊，直接来一个引问，等于一个引问或者是一个window.event因为那是不是有了呀，滚轮滚的方向来看一下，直接来一个属性叫做一个event，点一个叫做while dit啊well dit来我们来干嘛呢？我们来说一下。

这倒霉名是吧，没有de尔ta可以干嘛呢？可以获取我们这个鼠标滚轮滚动的一个方向啊，方向来一个LT一个塔，咱们来看看它的值啊，先看看我们的pro，我这一滚走你诶是一个负一百二是吧？诶往上滚是一个什么呀？正一百二是吧？哎，正120，所以这里边我们来说往上滚是正120，往下滚是负一百二啊说一下向上滚是一个120，诶向下滚是一个负一百二啊负120，那我们来说一下啊，这个值它是一百二还是250。

都无所谓，哎，都无所谓，所以注意啊，这个值我们不看什么呀，不看大小，哎，我们不看大小，只看正负啊，只看正负，我一看正值我就知道了，是不往上滚，我不愿别看它没看见啊，没看见看这往上滚正值是不是就是向上啊，往这看负值是不是就向下呀？哎，只看正负不看大小啊，所以注意y de尔塔这个值干嘛呢？一百二向上滚是一百二是正值，向下是负，一百二是负值啊负值好，那这块看完了，向上滚正值，向下滚是负值，再看谁呢？我们的IE1刷新，向下滚腹指向上滚是不是正指啊，一样，但是呢，来咱们看看火狐，诶火狐你们猜猜会什么呀？安你贩的是吧，刚才看的啊，往上滚走，你你贩子往下滚。

也是安find，那换句话说什么意思啊，诶，他不支持这个东西啊，他不支持这个东西，所以总有人给你捣乱啊，这个属性火狐中，哎它不支持，火狐中不支持，那怎么办呢？来，那再看一个呗，住了火狐里边用什么呢？火狐里边用一个alert叫做一个这个也是一个这个event点一个叫做detail tap deta，哎detail tap来保存，我们来看。诶爱啥啥吧是吧，有么东西啊，应该是细，这应该是细节的意思是吧？诶来一刷新走你诶往下滚是三，往上滚是负三，诶这挨千刀的是吧，就是三有一百二了啊我们来说一下这个玩意儿呢，在我们这个火狐中使用什么呢？使用我们这个这个玩意儿哎来获取我们这个滚动的一个方向啊滚动的方向我们说了它干嘛呀，向上滚，向上滚是一什么呀？负三是吧？哎，向上滚是负三，向下滚的是哎，是三啊，向下滚是三，诶这玩意儿就特别可气是吧？特别可气，为什么可气呢？三都不管了，跟他正好是不是反着呀？诶这个呢是向上滚是正值，这个呢，向上滚是负值啊，正好相反。所以现在我们来看两种方式，在我们其他浏览器里用这个while de尔，Ta在我们火狐里用这个。

Detailtime啊这两种方式来判断，那所以现在我就要判断我们这个滚轮的一个滚动方向吧，诶那我们先说先管这个chome，在chome里边什么时候向上滚，If什么呀，If我们这个点一个这个while de它干嘛呢？它的值干嘛呀，大于零，大于零说明什么，是不是向上滚啊，诶alert一个叫做一个向上向上滚，然后呢，我这来一个else else是干嘛了，是不是向下滚了，哎向下滚来我们来看效果，看看对不对啊，保存一下来胡room走你是不是向上滚呀，这走你是不是向下滚呀，诶这不OK了呀，再看我们的IE1刷新走你向上滚往下是向下滚呀，哎就都OK了，包括我们这个IE8。

往上。向上滚，往下向下滚是不是都没问题了，但是问题来了，在火狐里是不是没有这属性啊？火狐里边什么效果，我们来看看，走你走你。是不是怎么着都向下滚呀，为什么呀，这哥们儿是安地范的吧，安发的跟啥比，你怎么比它是不是也是F呀？哎，所以它肯定走al，那我们说了，除了这个值大于零的时候向上滚，还有什么时候向上滚？诶，如果这个值invent点一个DT，如果它小于小于零，是不是也是向上轨啊，诶所以我这还有一个条件叫什么呢？Invent点一个这个，诶de TD t来什么呢？小于零，这是向上轨啊，那这俩条件什么关系，或者是不是只要有一个满足，是不是都是向上轨啊哎，所以你就来什么呢？来一个或啊或的关系，这样一保存保护力走你是不是向上轨啊，来这一走是不是向下轨啊，哎，那这样呢，我们这个方向就给它。

判断出来，哎方向判断出来了，接下来接下来的工作是不是就好整了呀？哎，那刚才我们说干嘛来着，是不是要改变我们BOX1的这个长度啊，哎，改变BOX1这个高度，我们说怎么改啊，当然我们说向上滚，向上滚我们这个什么样，BOX1是不是变变短呀，哎变短向下滚呢，向下滚我们这个样向向下滚。

向下滚，我们这个BOX1是不是变长了，哎，变长，那现在可以烧了。变长来，那现在我怎么让它变长啊，怎么先先变短吧，怎么变短呀，那变短肯定是box1.1个这个style点一个head，是不是使这hi的变变短呀？诶那我等于多少啊变短我在什么基础上变短呀，是不是在它现在这个值基础上变短呀，现在是100，我给它变成什么呢？变成这个90是不是就短了呀？那我得先干嘛呀，我是不是得先获取到它现电值啊？诶那我简单的方式直接来呀，Box1.1个可烂一个height，这是我是现在的可见高度啊，给它干嘛呢？减一个十，减一个十，然后不要忘了加上一个PX，这样是不是变短了呀，每次掉是不是都给减一个十啊哎，每次掉都给减一个十，那这块如果变长呢？

是不是加时就行了呀，哎，加时就行了啊，保存我们来看效果，这一刷新走你走你走你走你走你走你走你是不是就OK了呀，每次变成一个十，你觉得变十它不过瘾了，你变什么呢？你变一百一保存你刷新。是不是就这就太愣了是吧，还是十好点一就有点异行是吧，一可能就有点有点慢，一刷新是不是就变了呀，哎就变了啊，那你在这滚是没用了，只能在这个里边去滚，诶跟一个这个跟大舌头一样是吧，一个效果啊来看我们这一刷新走你啊是不是也就OK了呀，哎就OK了啊，但是你你这这玩意就最可怕的什么呀，你别给他滚没了。然一给它滚没了呢，就就出不来了是吧？哎就出不来了，你可以给他设置一最小值是吧？诶一滚没了就没了啊来这一刷新，为什么滚没了就没了呀，没法触发事件了吧？哎马上触发事件了啊这一块什么说这个啊，那这块它有没有什么问题呢？这这IE8是不是就好使了，这得小心点是吧，不小心又没了啊不小又没了，诶那我们这来这么一个东西啊，现在我们这个它没有滚动条的，我给他来一什么呀，给包来一个这个带给他设置一个高度来什么呢？来一个2000个像素。

这一刷新是不是出滚动条了呀，包括这一刷新是不是也出出滚条了呀，诶来，我这一滚走你。走，你。走你他是变长了是吧，但是你发现你这一滚。滚动条是不是随着你去动了呀，哎，随着你动了，那么说这是为什么呀，是不是默认行为啊，哎，你滚动滚轮滚动条就应该动，不动就出问题了，滚动条必须动啊，滚条必须动，所以这块我们来说一下这个问题啊，在一块说什么呢？在这儿来说啊，诶我来把这注释给写这来了，往上挪啊。我们说当我们这个滚轮滚动时，如果什么呢？如果浏览器有什么呢？有滚动条，我们的滚动条会什么呢？会随我们这个浏览器，诶随滚动条会随之是不是滚动啊，诶随着滚动，那这样呢，我们说了不会有一个太好的效果吧，我希望什么呀，我滚它的时候啊，你就它动滚动条，你是不是跟老师你别动啊，哎别动那怎么办呀，那这是什么呀，这是我们这个浏览器的默认行为，如果不希望发生则什么呢？诶则可以取消这个默认行为，取消怎么取消，直接来一个return false啊return false，你这一保存咱们来看一刷新走，你是不就没事了，哎就没事了，滚它就不动了，但是跟这滚还不会动，但是在这滚就不会动了啊，就不会动了。

就可以任意长了是吧，然后看我们这个IEIE。

这也没问题啊，没看啊，你点一下啊，先点一下浏览器，但是呢。但是呢，火狐呢，诶小伙是吧，有点问题啊，一点一点压根儿是不是就没跟没看见一样，哎，没看见一样，为什么呢？这块也是你需要注意的一个问题，我们来说啊，火狐我是通过这个半的函数是不是来绑定的呀，半函数在里边实际上是使用的谁呀？是使用我们这个A的invent listener啊注意啊，我们使用这个A的invent listener这个方法绑定的这个响应函数取消默认行为时不能。干嘛呢？使用我们这个return for，你使用了它干嘛呢？它也没用啊，它也没用，所以你会发现你这写半天对火狐干嘛呢，一点作用也没有，为什么没有作用，就是因为我们火狐那个事件是通过it event listener去绑定的，诶你就不能用return first了，那不用return first怎么办呢？诶那这里边需要什么，你猜猜需要用谁呀？诶需要使用我们这个老尹了啊谁呀？诶引问他来干嘛呢？来取消我们这个默认行为，怎么取消，直接来写了event点一个叫做一个prevent，一个default，调这么一个方法，这个方法既可以干嘛呢？取消默认行为啊，取消默认行为来一保存，咱们来看啊，这一刷新走你咱们看看啊，来见证奇迹的时刻到了一点，是不是就OK了呀，那就OK了啊，所以注意这个东西的作用就是什么呀，取消默认行为的和软for其实一样，只不过这种是专门对付谁的。

对，我们这种is event listener绑定的这个函数的啊，取消默认行为，诶那这一块是不是就功能就做完了呀，哎，就OK了啊，但是注意了，这做完了你回过头再看他们问这118是不是又出事了呀，告诉你什么呀，对不支持的方法，所以这块一注意啊，改完了以后一定要都测了啊都测了为什么出什么问题了呀，哎，但是呢，我们这个IE8它不支持什么呀，这个玩意儿，哎如果什么呢？如果直接调用会什么呢？会报错啊会报错，所以在IE8里就不能用这个，所以你会发现我们伺候这么多浏览器是不是特别烦呀，哎，特别烦，所以以后你们注意，就是这个东西跟我们人生是一样的，以后去交朋友千万不要。

啊。脚踩两条船是吧，你这找多了，你看我把一个浏览器伺候好了，还得去整另一个，把他整好了还得干嘛呀，整另一个，你想你这要是你三个女朋友是吧？这事很可怕是吧？容易给你扒，容易给你弄死是吧？所以这块注意，IE8里边不能用这个，那怎么办呀，判断吧，哎，直接来咱们这老招呗，如果有你用没有你是不是就别用啊，哎，没有你就别用，来PO5里正常使用，G里正常使用，IE8里也正常使用，也正常使用啊，这块我们就是不是就OK了呀，好，那这块整完了啊，整完了我们就先停一下啊来。