0x1模仿select控件

完成效果：
5-01模仿select控件

比较简朴的点击事宜处置惩罚，也就处置惩罚点击挑选框展现菜单、点击菜单挑选、点击页面恣意角落隐蔽菜单这三件事。这里注重点击挑选框展现菜单时一定要阻挠冒泡，要不然会冒到顶层元素直接触发隐蔽菜单的事宜，致使菜单点不出来。

至于款式方面，照样用背景图的体式格局来完成一个拟物化的效果，这类做法虽然兼容性好，然则须要牢固元素的宽高位置、运用牢固的背景偏移来“凑出”一个效果。

固然这些牢固也不一定是相对的，赶上背景图不够大简朴的要领就是设置repeat；赶上庞杂背景还能够靠增添元素层级、逐层放一个背景片断、末了再组合起来的体式格局来完成（这里就得设置背景no-repeat了）。比方这里圆角搜刮框的完成就是祖父一个圆角、父元素再一个圆角、末了子元素放上主体背景做出来的。但是这类预先的弥补和折衷总给人烦琐而且不够文雅的觉得，若干也是和设想沟通不到位的效果吧-_-||…

0x2点击页面，显现单击的坐标、0x4阻挠右键菜单（阻挠默许事宜）

完成效果：
5-02点击页面，显现单击的坐标

熟习一下鼠标事宜罢了，除了猎取视口坐标、页面坐标、屏幕坐标，这里还趁便实践了下鼠标事宜的4个按键属性（个中按meta键时会唤出最先菜单，所以无效了）和button属性。由于click事宜和鼠标右键无关，没法用button属性推断是不是点了右键，所以这里改用mouseup事宜替代；同时也把简朴的第四题一并做了，阻挠了点右键后冒出右键菜单。

0x3用户按下键盘，显现keyCode

完成效果：
5-03用户按下键盘，显现keyCode

再熟习下键盘事宜，为充足体验到每一个按键的效果，防备f5革新等，这里还阻挠了默许事宜。

至于猎取输入的内容，要注重keyCode（针对keydown/keyup）、charCode（针对keypress）属性只能猎取非字符、小写字母和数字的ascii码，而且纵然你按了shift键也不能猎取大写字母和其他字符。

所以要猎取输入的是哪一个字符应当运用key（FF和IE，返回按键文本字符）或keyIdentifier（webkit，返回形如’U+unicode码’的字符串），经由过程这个演习能体会到他们的差别。

0x5追随鼠标挪动（大图展现）

完成效果：
5-05追随鼠标挪动（大图展现）

继承鼠标事宜，中心思绪就是监听mouseover、mouseout、mousemove三个事宜离别完成大图的展现、隐蔽、挪动，照样经由过程三个事宜代办便可轻松完成。

详细完成上，重要考核经由过程Image对象来加载大图，起首，如许做就使大图在变成在后期加载，免去了加载页面主体时被几个大图壅塞的问题；第二，还能经由过程Image对象的complete属性和load事宜来推断是不是加载完，依据加载进度举行响应的操纵，以进步用户体验。同时在大图展现上，假如右侧显现地区不够, 还要对大图显现位置做响应调解，这就涉及到一点小计算了。

0x6自定义右键菜单

完成效果：
5-06自定义右键菜单

思绪实在很简朴，阻挠默许的contextmenu事宜换成显现自定义菜单，在加个点击事宜完成隐蔽菜单即可。但在交互细节上另有一些可优化的点：

• 起首，要涌现自定义菜单的处所未必是全部页面，如果只在某一地区内涌现，那末菜单定位就要相对这个地区才行，而clientX和clientY都是相对全部屏幕而言的，这时候就须要我们重置下坐标系了。

• 第二，和上面一题一样，点右键后右侧和下边的空间未必能容得下全部菜单，所以还要依据盈余空间来决议菜单涌现的位置，防备菜单出界致使款式失调。

0x7用键盘掌握Div

完成效果：
5-07用键盘掌握Div

底本认为只是个简朴的键盘事宜演习，没想到碰到的坑照样挺多的，由于浏览器的键盘事宜是不支持组合按键的，只能一次触发一个按键上的事宜。而这题显著就请求运用组合键了，一个简朴的思绪就是给要用到的组合按键分派一个对应的布尔值，按下一个按键触发keydown就标记该按键为true，而松开按键触发keyup时则标记为false，如许后续的其他按键事宜触发时就可以获知按键的组合了。

关于ctrl和其他键组合，能够直接运用上面提到的思绪，即先标记ctrl，按下其他按键时便可推断是不是同时按住ctrl，实行响应的行动即可。

而在运用方向键时，除了组合的需求，还要完成长按按键使方块一连活动的效果。但长定时keydown的触发倒是在触发一次后，等一段时候再一连触发，假如只在keydown事宜的处置惩罚函数中对方块的活动做处置惩罚，就会使得方块的活动效果显得卡顿而不流通。

那该如之奈何？原题给出思绪是：让keydown事宜担任标记按键就好了，而方向键的事宜处置惩罚运用setInterval设个周期比较小的定时器延续监听，由于周期小，长定时就会马上实行响应的事宜处置惩罚，效果越发流通。

除了效果的流通，还要注重阻挠默许事宜，毕竟ctrl和方向键都是浏览器经常使用的功能键。同时和前面的问题一样，也必需限定效果的天生局限，不能让小方块跑到没边的处所去了。

0x8 Div闪灼

完成效果：
5-08 Div闪灼

简朴的一个定时器运用，用setInterval或setTimeout都能够完成。

固然，我照样比较喜好用setTimeout，由于setInterval完整能够用setTimeout的递归挪用来模仿，而且另有以下几个缘由：

• 起首，链式挪用setTimeout能够严厉保证实行递次，而setInterval就不那末让人费心了，详见前端碎语（3）

• 而且setInterval一最先还要等时候距离跑完才挪用回调函数，如果运用setTimeout就可以够直接挪用递归函数马上最先；

• 末了，setTimeout的递归函数要中断只需损坏递归前提即可，不必再运用clearTimeout，还能省去定义一个定时器变量~

— 第五课完 —