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. 微信支付v3发布到iis时的证书问题

    一开始报“出现了内部错误” 解决方法是 方法一 var cer = new X509Certificate(certpath, password,X509KeyStorageFlags.Machine ...

  2. 通过自定义相册来介绍photo library的使用

    因为我在模仿美图秀秀的功能,在使用相册时候,UIImagePickerController本来就是一个UINavigationController的子类,所以没有办法使用push,所以做了一个自定义的 ...

  3. Autofac - 组件

    快到年终了, 最近项目比较悠闲, 就想总结下, 项目中所使用到的一些技术, 以及使用方法. 之前有写过Dapper以及Dapper的一个扩展, 这些也是项目中使用过的. 算是一个温故而知新吧. 代码: ...

  4. No assembly found containing an OwinStartupAttribute

    自从在ASP.NET MVC中使用NuGet添加SignalR类库之后,再次运行程序时,它出现了一个异常: Server Error in '/' Application. The following ...

  5. 【要什么自行车】ASP.NET MVC4笔记02：上传文件 uploadify 组件使用

    参考:http://www.cnblogs.com/luotaoyeah/p/3321070.html 1.下载 uploadify 组件,copy至 Content文件夹 <link href ...

  6. QTableWidget的美化

      FriendTable->setFrameShape(QFrame::NoFrame);  //设置边框 FriendTable->setHorizontalHeaderLabels( ...

  7. SignalR入门之基本介绍

    SignalR是微软对web开发技术的扩充,它是一种框架,方便用来创建实时应用程序. 有一些即时消息系统,实时协作工作集,多人在线游戏,信息广播服务等其他需要在信息产生时就能进行发送的任务系统. 对于 ...

  8. 头文件里面的ifndef /define/endif的作用

    c,c++里面,头文件里面的ifndef /define/endif的作用 今天和宿舍同学讨论一个小程序,发现有点地方不大懂······ 是关于头文件里面的一些地方: 例如:要编写头文件test.h ...

  9. SQL（触发器）

    触发器语法格式(实例): ALTER TRIGGER tri_edituserON dbo.sys_UserFOR INSERT,UPDATE,DELETEAS BEGIN ---判断是新增?修改?删 ...

  10. LeetCode122:Best Time to Buy and Sell Stock II

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...