JavaScript学习06 JS事件对象

  事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型、鼠标坐标等。

  事件对象的属性:格式:event.属性

  一些说明:

  event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;

  event对象只在事件发生的过程中才有效。

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

  在IE/Opera中是window.event,在Firefox中是event;

  而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。

绑定事件

  在JS中为某个对象(控件)绑定事件通常可以采取两种手段:

  首先在head中定义一个函数:

    <script type="text/javascript">
    function clickHandler()
    {
        //do something
        alert("button is clicked!");
    }
    </script>

  绑定事件的第一种方法:

       <input type="button" value="button1" onclick="clickHandler();"><br/>

  绑定事件的第二种方法:

       <input type="button" id="button2" value="button2">

       <script type="text/javascript">
        var v = document.getElementById("button2");
        v.onclick = clickHandler; //这里用函数名,不能加括号
      </script>

其他实例

  实例1:

<!DOCTYPE html>
<html>
<head>
<title>eventTest.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script>
    function mOver(object) {
        object.color = "red";
    }
    function mOut(object) {
        object.color = "blue";
    }
</script>
</head>

<body>
    <font style="cursor:help"
        onclick="window.location.href='http://www.baidu.com'"
        onmouseover="mOver(this)" onmouseout="mOut(this)">欢迎访问</font>
</body>
</html>

  实例2:

<!DOCTYPE html>
<html>
<head>
<title>eventTest2.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
    <script type="text/javascript">
        function getEvent(event) {
            alert("事件类型: " + event.type);
        }
        document.write("单击...");
        document.onmousedown = getEvent;
    </script>
</body>
</html>

参考资料

  圣思园张龙老师Java Web视频教程。

  W3School JavaScript教程:http://www.w3school.com.cn/js/index.asp

  英文版:http://www.w3schools.com/js/default.asp

  博文:

  JavaScript Event对象的属性和方法:

  http://www.nowamagic.net/librarys/veda/detail/736

JavaScript学习06 JS事件对象的更多相关文章

  1. JAVAscript学习笔记 js事件 第一节 (原创) 参考js使用表

    <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <me ...

  2. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  3. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  4. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  5. Javascript学习6 - 类、对象、继承

    原文:Javascript学习6 - 类.对象.继承 Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成 ...

  6. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  7. JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JavaScript学习07 内置对象

    JavaScript内置对象 图像对象 导航对象 窗口对象 屏幕对象 事件对象 历史对象 文件对象(重要) 锚点对象 链接对象 框架对象 表单对象(重要) 位置对象 JS Window 窗口对象:ht ...

  9. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

随机推荐

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. PHP浮点数精度问题

    这一段时间维护一个类似团购的系统,需要处理订单,也就难免会处理金额 所以有很多PHP的坑 被我狠狠的踩了~~ 首先我们要知道浮点数的表示(IEEE 754): 简言之 就是 埋下了一个大坑 等着你跳 ...

  3. 使用Swift打造动态库SDK和DemoAPP时所遇到的(Xcode7.3)

    使用Swift开发SDK的优点是,生成的SDK对于Obj-C或是Swift调用都不需要自己去建桥接文件,因为Swift的SDK打包时默认已经自动生成供OC调用的.h文件.OC调用时直接import,s ...

  4. 发一则自己创作的Lae程序员小漫画,仅供一乐

  5. My SQL的内连接,外链接查询

    1.内连接:只连接匹配的行. 2.左外连接:包含左边表的全部行,以及右边表中所有匹配的行,无论右边的表有没有和左边匹配的行,左边的所有行都必须要显示. 3.右外连接:包含右边表的全部行,以及左边表中所 ...

  6. 巧用JS内置对象Function

    在做练习的时候也好,做项目的时候也好,我经常会碰到想要的到一个字符串“”里面的东西的这样的需求. 注意,“”里面的东西可以是任何东西[],number等等 于是有了个大神教我一个绝招: 于是世界圆满了 ...

  7. ASC47B borderless

    题目描述 border集合为{NULL,str}的串str称为borderless串. border即KMP里的那个. 字符集{'a','b'},给定长度n,求第k(给定)小的borderless串. ...

  8. Unable to open file &#39;TYPES.OBJ&#39;

    Unable to open file 'TYPES.OBJ' 有旧的控件HPP文件存在,旧控件的HPP文件里是Types::TPoint: 新的Berlin的是System::Types::TPoi ...

  9. 使用SSIS包调度开发的包

    在项目中,开发完自己的packages之后,需要使用agentjob之类的服务来调度自己的package,当然我们也可以使用一个package来调度这些,下面就是我的一个简单的尝试. 没有设计得像Ag ...

  10. [Android Pro] proguard.cfg 配置文件

    转载自:http://my.oschina.net/zhangzhihao/blog/72393 # ------------------------------------- # android 原 ...