JavaScript学习笔记之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>

时间: 2024-12-10 04:28:01

JavaScript学习笔记之JS事件对象_基础知识的相关文章

javascript学习笔记(七) js函数介绍_基础知识

1.函数内部属性 arguments arguments用来保存函数的参数,arguments.callee指向拥有arguments对象的函数 复制代码 代码如下: //阶乘 function factorial(num) { if (num <= 1) { return 1; } else { return num*arguments.callee(num-1); //用agreements.callee代替 } } var trueFactorial = factorial; factor

JavaScript学习笔记整理_setTimeout的应用_基础知识

setTimeou的t应用 var ids = []; function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout((function () { foo1(i); }),1000); } function foo2(j) { this.j = j; console.log('j = '+j); ids[1] = setTimeout((function () { foo2(j); }),1000); } fo

Javascript学习笔记9 prototype封装继承_基础知识

好,那就让我们一步步打造,首先让我们来看下继承原本的写法: 复制代码 代码如下: <script> var Person = function(name, age) { this.name = name; this.age = age; } Person.prototype.SayHello = function () { alert(this.name + "," + this.age); }; var Programmer = function (name, age,

JavaScript学习笔记记录我的旅程_基础知识

1.什么是JavaScript? (1) HTML只是描述网页长相的标记语言,没有计算,判断能力,如果所有计算,判断(比如判断文本框是否为空,判断两次密码是否输入一致)店铺放到服务器端执行的话网页的页面会非常的慢,用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算,判断,JavaScript就是一种在浏览器端执行的语言. (2) JavaScript和Java没有直接的关系,唯一的关系就是JavaScript原名LiveScript,后来吸取了Java的一些特性,升级为

JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型_基础知识

ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined.Null.Boolean.Number.String)和一种复杂数据类型(Object)的基础之上.这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1. 简单数据类型 简单数据类型 取值 Undefined undefined(只有一个值) Null null(只有一个值) Boolean true|false(只有两个值) Number 数值 St

JavaScript 学习笔记之变量及其作用域_基础知识

一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义:var firstDemo; 二.变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明. 这么说不理解的话可以看看下面这个简单粗暴的例子: 复制代码 代码如下: test(); function test(){ var firstDemo="hello";//定义局部变量    

JavaScript入门教程(4) js浏览器对象_基础知识

更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档,这里我们之做个简单的说明 包括一下几大属性: appCodeName 返回浏览器的"码名"(?),流行的 IE 和 NN 都返回 'Mozilla'. 下面的例子显示了 appCodeName 属性的值: document.write("navigator.appCodeName 的值是" + navigator.appCodeName) appName 返回浏览器名.IE 返回 'Micro

javascript学习笔记(五)正则表达式_基础知识

常用到的元字符有: •. 查找单个字符,除了换行和行结束符: •\w 匹配字母.汉字.数字.下划线等符号: •\s 匹配空白符(包含空格.制表符等): •\d 匹配数字: •\b 匹配位于单词的开头或结尾的匹配: 常用的量词有: •^n 匹配任何开头为 n 的字符串: •n$ 匹配任何结尾为 n 的字符串: •n+ 匹配任何包含至少一个 n 的字符串: •n* 匹配任何包含零个或多个 n 的字符串: •n? 匹配任何包含零个或一个 n 的字符串: •n{X} 匹配包含 X 个 n 的序列的字符串

javascript学习笔记(六) Date 日期类型_基础知识

1.创建日期对象 复制代码 代码如下: var now = new Date(); //获得当前系统日期和时间 var someDate = new Date(Date.parse("May 25,2012")); var someDate = new Date("May 25,2012"); //与上相同 var someDate = new Date(Date.UTC(2010,0)); //GMT时间2010年1月1日凌晨0时 var someDate = n