zoukankan      html  css  js  c++  java
  • JavaScript学习——事件对象Event

    什么是事件对象?

      在触发DOM上的某个事件时,会产生一个事件对象Event,这个对象中包含者所有与事件有关的信息。包括导致事件的元素,事件的类型,其他与特定事件相关的信息,所有的浏览器都支持event对像,但是支持的方式不同。

    DOM中的事件对象

      兼容DOM的浏览器会将一个event对象传入事件处理程序中,无论指定事件处理程序中使用什么方法(DOM0级或者DOM2级),都会传入event对象,如下:

      DOM0级

      var btn=document.getElementById("myBtn");

      btn.onclick=function(event){

       alert(event.type);             //click 

      };

      DOM2级

      //false表示在冒泡阶段处理事件

      btn.addEventListener("click",function(){alert(event.type);},false)       //click

      使用html特性指定事件处理程序时

      <input type="button" value="Click me" onclick="alert(event.type)"/>

      event对象包含与创建它的特定事件有关的属性和方法,触发的事件类型不同,可用的属性和方法也不一样,不过,都有如下列出的成员:

      

           

      在事件的处理程序内部,this始终等于currentTarget的值,而targer则包含事件的实际目标,如果直接将事件处理程序指定给了目标元素,则this,currentarget,target值相同。

      event的用法:在需要通过一个函数处理多个事件时,可以使用type属性:

      var btn=document.getElementById("myBtn");

      var handler=function(event){

        switch(event.type){

          case "click":alert("Clicked");break;

          case "mouseover":event.target.style.backgroundColor="red";

          case "mouseout":event.target.style.backgroundColor="";

        } 

      };

      //注意DOM0级和DOM2级事件的区别,要加“on”

      btn.onclick=handler;

      btn.onmouseover=handler;

      btn.onmouseout=handler;

      如果要阻止特定事件的默认行为,可以使用event对象的preventDefault()方法,列如,链接的默认行为时点击会被导航到href特性指定的url,如果像阻止这一行为,可以通过链接的onclick事件处理程序取消它,如下:

      var link=document.getElementById("myLink");

      link.onclick=function(event){

        event.preventDefault();

      }

     

    IE中的事件对象

      与访问DOM中的event不同,要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法,在使用DOM0级方法时,event对象是作为window对象的一个属性存在的,如下:

      var btn=document.getEventById("myBtn");

      btn.onclick=function(){

        var event=window.event;    //event对象是作为window的一个属性存在

        alert(event.type);          //click

      }

      如果是使用attachEvent()添加的,那么就会有一个event对象作为参数传入事件处理程序函数中,如下所示:

      var btn=document.getElementById("myBtn");

      btn.attachEvent("onclick",function(event){alert(event.type);})

      如果是使用html特性来指定事件的话,和DOM中的事件模型相同。

      

  • 相关阅读:
    1、Python的初识与简介
    解密解密
    python看是32位还是64
    linux实战一段,安装python3(centos)
    前段技巧
    django后端safe和前端safe的方法
    测试
    python小知识整理
    ajax格式
    111
  • 原文地址:https://www.cnblogs.com/zhilili/p/12836625.html
Copyright © 2011-2022 走看看