好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象

事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生 改变或者事件被触发时，浏览器执行该代码并进行相应的处理操做，而响应某个事件而进行的处理过程称为事件处理。HTML文档事件包括用户载入目标页面直到 该页面被关闭期间浏览器的动做及该页面对用户操做的响应，主要分为浏览器事件和HTML元素事件两大类。在了解这两类事件以前，先来了解事件捆绑的概念。 HTML文档将元素的经常使用事件（如 件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑致使特定的代码放置在其所处对象的事件处理器中。若是在javaScript中分配事件处理 函数、则须要首先得到要处理的对象的引用、而后将函数赋值给对应的事件处理函数属性、示例：

<div id="divId">点击</div>
    <!-- 注意JS代码要放在div元素以后、若是先执行JS在执行div元素的话、
         document是获取不到对象的、要时刻记住、解释执行的的特性
                        另一点就是事件处理函数名称必须小写才能正确响应事件。 -->
    <script type="text/javascript">
            var oDiv = document.getElementById("divId");
            oDiv.onclick = function (){
                alert("javaScript事件处理函数!");
            };
    </script>
    <div onClick="alert('HTML中分配事件处理函数!');">点击</div>

事件对象
建立包含关于刚刚发生的事件的信息的事件对象、包含的信息以下：
        一、引发事件的对象；
        二、事件发生时鼠标的信息；
        三、事件发生时键盘的信息。

事件对象只在发生事件时才被建立、且只有事件处理函数才能访问。全部事件处理函数执行完毕后、事件对象就被销毁。

定位：
        在IE中、事件对象是Window对象的一个属性event。事件处理函数必须这样访问事件对象：

oDiv.onclick = function () {
           var oEvent = window.event;
       }

在DOM兼容的浏览器(如Mozilla、Safari和Opera)中访问事件对象、要这么作：

oDiv.onlcik =function (){
            var oEvent = arguments[0];
        }

也能够直接命名参数、访问就更方便：

oDiv.onclick = function (oEvent) {}

 

属性方法：

下面是IE中的属性以及方法

DOM事件对象属性核心方法

类似性：
一、获取事件类型
这样可在任何一种浏览器中获取事件的类型：

<div id="divId">
    ---------------------------------------------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------------------------------------------
    </div>
    <div>
        <input type="text" id="testId" onkeydown="keyFunction();" onkeyup="keyFunction();"/>
    </div>
    <script type="text/javascript">
        var oDiv = document.getElementById("divId");
        function eFunction(oEvent){
            /**oEvent.type在IE会报错、说type为空或不是对象、火狐木有问题**/
            if(oEvent.type == "click"){
                alert("click");
            }else if(oEvent.type == "mouseover"){
                alert("mouseover");
            }
        }
        function ieFunction(){
            /**IE须要这样获取event对象**/
            var oEvent = window.event;
            if(oEvent.type == "click"){
                alert("click");
            }else if(oEvent.type == "mouseover"){
                alert("mouseover");
            }


            /**
             * 获取客户端坐标
             */
             alert("获取客户端坐标X: "+oEvent.clientX+"   Y: "+oEvent.clientY);


            /**
             * 获取屏幕坐标
             */
             alert("获取屏幕坐标X: "+oEvent.screenX+"   Y: "+oEvent.screenY);
        }
        //oDiv.onclick = eFunction;
        //oDiv.onmouseover = eFunction;
        oDiv.onclick = ieFunction;
        oDiv.onmouseover = ieFunction;


        /**获取按键的数值代码**/
        function keyFunction(){
            /**
             * onkeyup 是在用户放开任何先前按下的键盘键时发生。
             * onkeydown 是在用户按下任何键盘键时发生。
             */
            var oEvent = window.event;
            var keyValue = oEvent.keyCode;
            //alert(keyValue);

            /**检测shift、alt键是否被按下返回的是boolean值**/
            var bshift = oEvent.shiftKey;
            var balt = oEvent.altKey;
            alert("shift: "+bshift+" alt:"+balt);
        }
    </script>