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 单选框,多选框美化代码
Aug 01 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 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
Home Coffee Roasting
2021/03/03 咖啡文化
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
JQuery1.6 使用方法三
2011/11/23 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
简介JavaScript错误处理机制
2020/08/04 Javascript
python 定时修改数据库的示例代码
2018/04/08 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
浅谈Django的缓存机制
2018/08/23 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
主持人演讲稿范文
2013/12/28 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
公司节能减排倡议书
2014/05/14 职场文书
小学班主任个人总结
2015/03/03 职场文书
敬老院活动感想
2015/08/07 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB