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. JAVA 设计模式 策略模式

    用途 Title 它定义了算法家族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化,不会影响到使用算法的客户. 策略模式是一种行为型模式. 结构

  2. c# 游戏策划配置工具

    该工具是提供策划配置excel数据,导出到mysql数据库,以及生成xml文件,和对应的xml解析实体类 实现了程序 excel 列名 ID =P 表示ID这列是唯一字段 =S=300 表示这列类型是 ...

  3. 在IBM Bluemix上部署Hyperledger应用

    简介 IBM Bluemix (http://www.ibm.com/bluemix‎)是一个基于cloud的应用开发和部署平台,提供包括多种服务和运行环境的支持.对Hyperledger应用开发者而 ...

  4. ClojureScript魔法堂：搭建开发环境

    一.前言 当看到Lisp等函数式编程语言的语法是 (say (concat "hello" "world")) 这样的时候,我就有种深入学习的冲动,因为它的语法 ...

  5. SQL Server获取下一个编码字符实现继续重构与增强

        我在SQL Server获取下一个编码字符实现的博文中,虽然实现了这个问题,但是感觉维护起来比较麻烦,例如如果调整编码字符串的固定长度,就需要变更三个函数,这样的为何成本确实比较大.面向对象编 ...

  6. SQL--视图

  7. ASP.NET MVC系列:开始

    创建Asp.Net MVC项目 从visual studio主界面开始菜单中点击“新建项目”

  8. iOS App上架AppStore 会遇到的坑

    前言部分 前言:非原创 文章摘自:http://zhuanlan.zhihu.com/100000PM/20010725 相信大家一定非常「深恶痛疾」AppStore的一系列产品上架规则.每次产品上架 ...

  9. Java---Java的面试题（二）

    1 Switch能否用string做参数?在 Java 7 之前, switch 只能支持byte,short,char,int 或者其对应的封装类以及 Enum 类型.在JAVA 7中,String ...

  10. Android事件处理机制

    包括监听和回调两种机制. 1. 基于监听的事件处理: 事件监听包含三类对象,事件源,事件,事件监听器.Android的事件处理机制是一种委派式(Delegation)事件处理方式:普通组件(事件源)将 ...