JavaScript(十九) Dom Event 二

事件处理函数/监听函数
      用于响应某个事件而调用的函数称为事件处理函数(event handler),或者DOM称为事件监听函数(event listener). 事件处理函数有2种分配方式,在javascript中或者在HTML中.

javascript中分配事件处理函数
    首先要取得处理的对象的引用,然后将函数赋值给对应的事件处理函数属性,例如

            var oDiv = document.getElementById('div1');
            oDiv.onclick=function ()
            {
                alert('I was clicked');
            }

用这个分配方法,时间处理函数名必须要小写,才能正确响应事件。

HTML分配事件函数
    只要在HTML标签中添加事件处理函数的特性,例如 

<div id="div1" onclick="alert('I was clicked')"/>

    用这中方法,事件处理函数的大小写可以任意.(不过要使用标准的XHTML代码，则事件处理函数需要用小写) 在HTML中分配事件处理函数时,记住特性值中的代码(双引号之间的),是被包装在匿名函数中的,所以HTML代码 实际上是执行了JavaScript代码

    

            oDiv.onclick= function()
            {
                alert('I was clicded');
            }

在IE中，每个window对象和每个元素都有两个方法,attachEvent()和detachEvent(). 
    attachEvent()用来给事件附加一个事件处理函数，而detachEvent()用来将事件处理函数分离出来。 每个方法都有2个参数，要分配的事件处理函数的名字(例如:onclick)及一个函数

    attachEvent
       Binds the specified function to an event, so that the function gets called whenever the event fires on the object
    Syntax
       bSuccess = object.attachEvent(sEvent, fpNotify)
    Boolean. Returns one of the following possible values:
       true The function was bound successfully to the event. 
       false The function was not bound to the event. 
==================================================================
     detachEvent
        Unbinds the specified function from the event, so that the function stops receiving notifications when the event fires.

            var fnClick=function()
            {
                alert('Clicked');
            }

            function attachEventDemo()
            {
                var oDiv= document.getElementById('div1');
                var bl;
                bl=oDiv.attachEvent("onclick",fnClick);  //增加事件处理
                alert(bl);  //显示事件是否添加成功
                if (bl)
                {
                    alert('增加事件处理成功');                    
                }
            }
            
            function detachEventDemo()
            {
                var oDiv=document.getElementById('div1');
                oDiv.detachEvent("onclick",fnClick); //取消事件处理
            }

        <form>
            <div id="div1">abc</div>
            <br>
            <input  type="button" id="butAttach" value="attachEvent" onclick="attachEventDemo()">
            <input type="button" id="butDetach" value="detachEvent" onclick="detachEventDemo()">
            
        </form>

对IE的事件处理，事件名要加上"on",例如"onclick",对于DOM事件流，则不需要直接 "click"

    DOM方法 addEventListener() 和 removeEventListener() 用来分配和移除事件处理函数，与IE不同，这些方法 需要三个参数，事件名称，要分配的函数和处理函数的阶段 
    Syntax 
        target.addEventListener(type, listener, useCapture); 
        ------------------------------------------------------------- 
        addEventListener() 
            target.addEventListener(type, listener, useCapture); 
        type 事件名称 
        listener 要分配的函数 
        userCapture 处理函数是用于冒泡阶段还是捕获阶段. 
        要使用这些方法,首先获取要处理的对象的引用,然后分配或删除事件处理函数 此页只能在mozilla上运行 直接给赋值的属性默认是添加到冒泡阶段的. 
        第三个参数，true 为捕获阶段，false为冒泡阶段 
        对于IE的事件类型，需要增加 "on" ,比如 onclick,但是对于DOM,则不需要，比如"click" 如果在增加事件处理函数声明在捕获阶段，那么删除的时候也必须是捕获阶段

        var divClick =function()
        {
            alert('div click');
        }
        
        function DivAddEventListener()
        {
            var div=document.getElementById('myDiv');
             div.addEventListener("click",divClick,false);
             alert('AddEventListener success');            
        }
        
        function DivRemoveEventListener()
        {
            var div=document.getElementById('myDiv');
            div.removeEventListener("click",divClick,false);
            alert('Remove Event Listener success');
        }

    <div id='myDiv'>abc</div><br>
    <input type=button onclick="DivAddEventListener()" value="AddEventListener"><br>
    <input type =button onclick="DivRemoveEventListener()" value ="RemoveEventListener">