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 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
详解http访问解析流程原理
Oct 18 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
详解如何在vue-cli中使用vuex
Aug 07 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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取进制余数函数代码
2012/01/19 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
了解重排与重绘
2019/05/29 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
企业节能减排实施方案
2014/03/19 职场文书
六年级学生评语
2014/04/22 职场文书
爱耳日活动总结
2014/04/30 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
考试作弊检讨
2015/01/27 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python
MySQL约束超详解
2021/09/04 MySQL
MySQL 逻辑备份 into outfile
2022/05/15 MySQL