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 相关文章推荐
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
PHP中调用JAVA
2006/10/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP 柱状图实现代码
2009/12/04 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
js module大战
2019/04/19 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python 获取等间隔的数组实例
2019/07/04 Python
Django框架 querySet功能解析
2019/09/04 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
C#基础面试题
2016/10/17 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
仓库管理制度
2014/01/21 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
六年级学生评语大全
2014/12/26 职场文书
学术会议邀请函
2015/01/30 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
教务处干事工作总结
2015/08/14 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android