zoukankan      html  css  js  c++  java
  • js的event对象 详解

    一直在使用event.code来判断按键,可是对于event对象还有很多属性和兼容性的问题没怎么了解,今天好好看了一下。

    一、event对象是什么

    在很多情况,我们需要使用js的这个event对象,那么今天我就给大家说说event是什么东西

    我们知道,js里有很多事件,比如onclick等。这些事件之所以可以称之为事件,不仅仅是因为他们可以有执行某种动作的能力,还有事件的一些状态属性,比如这个事件的返回值是什么等等,或者你可以理解为java里的反射Class,用来描述这些时间状态的对象,就是今天我们要讲的event对象。

    二、如何获取event

    有时候我们需要用到event,比如最常用到的便是阻止事件的冒泡行为。那么最起码我们得先知道怎么获取这个event对象吧。

    firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。 
    在IE/Opera中是window.event,在Firefox中是event;

    <script type="text/javascript">
    function doSomething (obj,evt) {
    var e=(evt)?evt:window.event; //判断浏览器的类型,在基于ie内核的浏览器中的使用cancelBubble
    }
    </script>

    也就是FF系列的必须要传进来,比如在页面中调用这个方法的时候,需要另外传进event来,而IE是全局变量,无需传进来。

    <div id="child2" onclick="doSomething(this,event);">

    那么用jquery的时候,应该如何来获取event呢?

    $("#inputId").bind("click",function(event){
                    p=i;
                    alert(p+"=="+event.target);
                });

    利用jquery,不论在IE上还是FF上,都没有必要必须”从页面上进行传进来了“。

    三、event对象有哪些属性或者方法

    1、type。事件类型。用来描述这个事件是什么类型的,比如onclick的事件类型为click。

    2、srcElement/target:事件源,就是发生事件的元素; FF下是target,IE下是srcElement

    比如我要打印下面这句话执行这个方法时候的目标事件源:

    <div id="child2" onclick="doSomething(this,event);">
    <p>This is child2. Will bubble.</p>
    </div>

    会弹出:

    我就很纳闷,我明明是将这个click时间绑定在了div上了,为何给告诉我事件源是P标签呢?下面我们再来做一个小eg,将上面的html换成:

    <div id="child2" onclick="doSomething(this,event);" >
    aaaaaaaaaa
    </div>

    那么现在弹出的结果是

    这时候说明我是DIV。原来何为事件源?就是你出发事件的那个元素,并不是你绑定在哪个元素上那个tag。

    3、cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();) 。FF下是后者。

    这个地方非常有用。在下一篇文章中我们专门来讲解这个问题。

    4、returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)

    5、attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在 attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;

    6、keyCode。这个不陌生了吧。也非常的常用,用来判断你按下了哪个键

    这系列的方法相当有效,动态的绑定、解绑定tag的各种事件,日后我们会讲解。

    当然还有其他的一些属性,我这里列出来的都是最常用的。比如还有,button、 clientX/clientY、offsetX,offsetY/layerX,layerY、x,y/pageX,pageY、altKey,ctrlKey,shiftKeyfromElement,toElement、screenX、screenY。

    文章转自:http://www.esnsc.com/news632.html

  • 相关阅读:
    基于集合成工控机Ubuntu系统安装分区详解
    MySql连接问题
    再记一个提供webServices的网址
    J​a​y​r​o​c​k​.​J​s​o​n​读​取​j​s​o​n​数​据​(​n​e​t​)
    jquery mobile页面跳转后,必须重新刷新页面js方可有效
    删除数据库失败 因为当前数据库正在使用
    如何解决自定义404页面在IE等浏览器中无法显示问题
    HTTP协议详解(真的很经典)
    如何在XAMPP中设置多个网站
    apache php 多站点配置 重新整理
  • 原文地址:https://www.cnblogs.com/cfhome/p/2942523.html
Copyright © 2011-2022 走看看