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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
原生JS实现留言板功能
Feb 08 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中运用http调用的GET和POST方法示例
2014/09/29 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python Pandas 读取txt表格的实例
2018/04/29 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
python文件排序的方法总结
2020/09/13 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
学习十八届三中全会精神实施方案
2014/02/17 职场文书
代理协议书
2014/04/22 职场文书
空气的环保标语
2014/06/12 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
债务纠纷委托书
2014/08/30 职场文书
个人创业事迹材料
2014/12/30 职场文书
话题作文之呼唤
2019/12/18 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫