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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
Vue.js对象转换实例
Jun 07 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 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的博客ping服务代码
2012/02/04 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
js性能优化技巧
2015/11/29 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python实现飞机大战小游戏
2019/11/08 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
财务管理专业毕业生求职信范文
2013/09/21 职场文书
建筑自我鉴定
2013/10/19 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
车贷收入证明范本
2014/01/09 职场文书
入党介绍人意见范文
2015/06/01 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android