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 相关文章推荐
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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
19个Android常用工具类汇总
2014/12/30 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
angular4笔记系列之内置指令小结
2018/11/09 Javascript
浅谈js闭包理解
2019/04/01 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
pandas将numpy数组写入到csv的实例
2018/07/04 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python 实现dict转json并保存文件
2019/12/05 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
tensorflow常用函数API介绍
2020/04/19 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
kfc实习自我鉴定
2013/12/14 职场文书
亲子拓展活动方案
2014/02/20 职场文书
新春文艺演出主持词
2014/03/27 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
运动会200米广播稿
2015/08/19 职场文书
导游词之西安骊山
2019/12/20 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers