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 相关文章推荐
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
JavaScript canvas实现流星特效
May 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
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python单元测试实例详解
2018/05/25 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
Structs界面控制层技术
2013/10/11 面试题
心得体会的写法
2014/09/05 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python