JavaScript学习笔记之JS事件对象


Posted in Javascript onJanuary 22, 2015

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

事件对象的属性:格式: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>
Javascript 相关文章推荐
JavaScript Accessor实现说明
Dec 06 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
jquery实现搜索框常见效果的方法
Jan 22 #Javascript
JavaScript学习笔记之定时器
Jan 22 #Javascript
JavaScript学习笔记之JS对象
Jan 22 #Javascript
JavaScript学习笔记之JS函数
Jan 22 #Javascript
JavaScript学习笔记之基础语法
Jan 22 #Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 #Javascript
Angularjs基础知识及示例汇总
Jan 22 #Javascript
You might like
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
客户端静态页面玩分页
2006/06/26 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python调用摄像头拍摄数据集
2019/06/01 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
python 如何上传包到pypi
2020/12/24 Python
《我要的是葫芦》教学反思
2014/02/23 职场文书
幼儿园标语大全
2014/06/19 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
文明单位申报材料
2014/12/23 职场文书
工人先进事迹材料
2014/12/26 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
检讨书格式
2015/05/07 职场文书
php实例化对象的实例方法
2021/11/17 PHP
mysql序号rownum行号实现方式
2022/12/24 MySQL