javascript事件监听

 

事件监听

通用添加事件监听的方式，也是最常用的：即在HTML 的标签中直接就分配事件处理函数。如

      < p onclick ="pClick1"> Click Me</ p > 

< p onclick ="alert(' 您点击了我');"> Click Me</ p >

IE 中：添加和删除监听函数，即attachEvent() 和detachEvent(), 接受两个参数，即事件名称，要分配的函数名。事件处理顺序是pClick2 ，然后再pClick1;

< script type ="text/javascript" language ="javascript">

       function pClick1() {

           alert(" 我被1 点击了！" );

       }

       function pClick2() {

           alert(" 我被2 点击了！" );

       }      

        var myP;

        window.onload = function () {

            myP = document.getElementById("para" );

            myP.addEventListener("onclick" , pClick1, false );

            myP.addEventListener("onclick" ,pClick2,false );

        }

    </ script >

 

标准Dom: 添加和删除监听函数，即addEventListener （）和removeEventListener() 。与IE 不同的是它接受三个参数，即事件名称，要分配的函数名和是用于冒泡阶段还是捕获阶段。第三个参数如果是捕获阶段则为true, 否则为false 。事件处理顺序是，先pClick1, 然后pClick2 ，这点与IE 是不同的。

< script type ="text/javascript" language ="javascript">

       function pClick1() {

           alert(" 我被1 点击了！" );

       }

       function pClick2() {

           alert(" 我被2 点击了！" );

       }      

        var myP;

        window.onload = function () {

            myP = document.getElementById("para" );

            myP.addEventListener("click" , pClick1, false );

            myP.addEventListener("click" ,pClick2,false );

        }

</ script >

 

IE 浏览器与标准 Dom 浏览器在获取事件对象上也存在差别

在 IE 浏览器中事件对象是 Window 对象的一个属性 event, 访问时通常采用如下方法

oImg.onclick = function (){

     var oEvent=window.event;

}

而标准的 Dom 中规定 event 对象必须作为唯一的参数传给事件处理对象，因此在类似 Firefox 浏览器中访问事件对象通常将其作为参数，代码如下：

oImg.onclick = function (oEvent){}

所以为了兼容两者，通常采用下面的方式：

oImg.onclick = function (oEvent){

             if (window.event)

               oEvent = window.event;

}

如下列中，使用的是兼容的方式。

< html xmlns ="http://www.w3.org/1999/xhtml">

< head runat ="server">

    < title ></ title >

    < script type ="text/javascript" language ="javascript">

       function handle(oEvent) {

           var oDiv = document.getElementById("display" );

           if (window.event)

               oEvent = window.event;

           if (oEvent.type == "click" )

               oDiv.innerHTML += " 你点击了图片&nbsp;&nbsp;" ;

           else if (oEvent.type == "mouseover" ) {

               oDiv.innerHTML += " 你移动到了图片上&nbsp;&nbsp;" ;

           }

       }

       window.onload = function () {

           var oImg = document.getElementsByTagName("img" )[0];

           oImg.onclick = handle;

           oImg.onmouseover = handle;

       }

    </ script >

</ head >

< body >

  < div >

    < img src ="images/2.jpg" border ="0" />

    < div id ="display"></ div >

  </ div >

</ body >

</ html >