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:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  5. JavaScript学习03 JS函数

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

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

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

  7. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  8. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

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

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

随机推荐

  1. 一：验证微信的Token

    前言:申请到微信公众号的同学,可能会挺感兴趣的,毕竟微信公众号,确实是一个好东西,它提供了一个很好的平台,而且它自带有一套管理模板,对于微信公众号可以很好的管理. 但是也仅仅是很好的管理,因为作为开发 ...

  2. Elasticsearch聚合 之 Range区间聚合

    Elasticsearch提供了多种聚合方式,能帮助用户快速的进行信息统计与分类,本篇主要讲解下如何使用Range区间聚合. 最简单的例子,想要统计一个班级考试60分以下.60到80分.80到100分 ...

  3. 弹出框优化实例（alert和confirm）

    在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery a ...

  4. ADO.NET封装的SqlHelper

    参照别人的方法,顺便再次复习下ADO.NET的相关知识.为自己的类库做准备. namespace Common.SqlHelper { /// <summary> /// ADO.NET- ...

  5. ASP.NET MVC程序播放H.264视频

    在这篇之前,Insus.NET不管是在ASP.NET还是ASP.NET MVC实现很多视频播放,你可以参考这篇链接:http://www.cnblogs.com/insus/category/4650 ...

  6. 浅谈你感兴趣的 C# GC 机制底层

    本文内容是学习CLR.via C#的21章后个人整理,有不足之处欢迎指导. 昨天是1024,coder的节日,我为自己coder之路定下一句准则--保持学习,保持自信,保持谦逊,保持分享,越走越远. ...

  7. dev中控件属性设置

    private void Form1_Load(object sender, EventArgs e) { ///构建数据源 DataTable table = new DataTable(); // ...

  8. iOS 阶段学习第十天笔记（结构体）

    iOS学习(C语言)知识点整理 一.数据结构 1)概念:数据结构是指计算机程序中所操作的对象——数据以及数据元素之间的相互关系和运算. 2)结构体必须有struct 关键字修饰. 实例代码: stru ...

  9. 提高生产性工具(五) - 数据的过滤器和图形化（适用于 MVC5 + MongoDB）

    在下面流水账似的文章之前,先将一些感悟说一下. 1.如果一个系统对于某个功能在至少三个地方使用的话,必须将其抽象提炼出来,而且时间点最好是大规模测试之前. 2.提炼出来的功能,如果品质做得好,整个系统 ...

  10. UITextView 文本垂直居中

    var center=textView.Bounds.Size.Height - textView.ContentSize.Height; center = center < ? : cente ...