JavaScript第13天

属于BOM的重点有两个：定时器  和  event

1、事件周期：从事件发生到所有事件处理函数执行完毕的全过程

        3个阶段：

                1、捕获阶段：由外向内，记录要发生的事件

                2、目标优先触发：目标元素->当前点击的实际发生事件的元素

                3、冒泡触发：由内向外，依次执行之前记录者的要发生的事件

2、获取事件对象event：

                1、主流：会自动作为事件处理函数的第一个形参传入

                2、老IE：event；老IE全局有这个变量

                3、兼容：event；//老IE可用，主流也可用

        得到事件对象event可以做什么？

                1、获取鼠标的坐标：

                        1、获取鼠标相对于屏幕的坐标：e.screenX/Y

                        2、获取鼠标相对于窗口/客户端/文档显示区域的坐标：e.clientX/Y

                        3、获取鼠标相对于网页的坐标：e.pageX/Y

                2、阻止事件冒泡：

                        1、主流：e.stopPropagation（）；

                        2、老IE：e.cancelBebble=true；

                        3、兼容：e.cancelBrbble=true；//老IE可用，主流也可用

                3、利用冒泡/事件委托—开发中常用，提升网页性能；有了它，事件函数也可以换为箭头函数

                        优化：如果多个子元素定义了相同或相似的事件操作，最好只给父元素定义一次

                        原因：每一次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站性能越差

                        事件内可以淘汰了this，但是没淘汰完        

                        目标元素target：你点击的是哪一个，他永远就是哪一个，不会变化

                                1、主流：e.target；

                                2、老IE：e.returnValue=false；

                                3、兼容：e.returnValue=false；//老IE可用，主流也可用

                4、阻止游览器的默认行为：

                        如：a标签默认的跳转、提交按钮可以提交表单、右键自带一个弹出框...

                        1、主流：e.preventDefult（）；

                        2、老IE：e.returnValue=false；

                        3、兼容：e.returnValue=false；//老IE可用，主流也可用

                        4、新事件：

                                1、右键事件：window.oncontextmenu

                                2、键盘事件：一般来说用于游戏开发较多+都要搭配上键盘

                                        1、window.onkeydown—按住和按下，任何键盘按键都可以触发

                                        2、window.onkeypress—按住和按下，只有字母、数字、回车、空格可以触发，其他按键不行

                                        3、window.onkeyup—松开，任何键盘按键都可以触发（如：比手速的游戏）

                5、获取键盘的键码

                        e.keyCode；—可以获取按下的哪个键，每个键都有自己对应的键码

event可以说是BOM之中最最重要的一点，其他的就算不用也要知道

老IE：不支持HTML5和CSS3和ES5+