09.JS-事件、事件对象

这篇文章是我自己在学习js过程中做的笔记，如果有错误或者遗漏的请评论告诉我。希望大家一起学习！

笔记内容主要有:事件的要素、事件分类、事件对象

•             事件三要素：

                    1.事件源 --  发生在哪里

                    2.事件句柄 -- 发生事件的类型

                    3.事件处理函数 -  事件发生时执行的函数

•             事件分类：

                鼠标事件：

                    onclick:点击事件

                    oncontextmenu：鼠标右键事件

                    onmouseover：移入事件

                    onmouseout：移出事件

                    onmousemove：移动事件

                    ondbclick：双击事件

                    onmousedown：鼠标按下

                    onmouseup：鼠标抬起

                键盘事件：

                    onkeydown：按键按下(未抬起)

                    onkeyup：按键抬起

                表单事件：

                    oninput：文本框输入

                    onsubmit：表单提交事件

                    onfocus：一个表单项获得焦点

                    onblur：一个表单项失去焦点

                    onchange：一个表单项内容的改变(通常用于select选项值的改变)

                    onrest：表单重置事件

                窗口事件：

                    onload：网页加载完毕时发生

                    注意：后面onload事件的会替代前面的

                    以上事件我只记录了些比较常用的。
            

•             事件对象(event)： 

                          event代表事件的状态 event对象只在事件发生的过程中才有效。事件发生时产生的一个对象，包含所有事件相关的信息

                       例： 

                                    在触发一个元素的点击事件时，event对象内会记录下一些的属性值

                       比如：

                        target：触发此事件的元素

                        button：那个鼠标被点击

                        clientX,clientY：距离浏览器的坐标

                        screenX,screenY：距离屏幕的坐标

                        offsetX,offsetY：距离事件源的坐标
                                   等...

            事件的生命周期：

                开始时间：事件发生时产生

                结束时间：事件结束时对象停止

            事件对象的使用(兼容性)：

                非IE：当事件发生时，事件对象作为事件处理函数的参数传递到事件中

                    

div.onclick = function(event){
    
 }

              

                IE:当事件发生时，事件对象是作用在window.event属性上

                    

div.onclick = function(){
     window.event;
}

                兼容：                  

 div.onclick = function a(event){
        var e = event || window.event;

        //查找事件源 兼容非IE 和 IE
        var dom = e.target || e.srcElement;
}