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 盒模型 尺寸深入理解
Dec 31 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
Vue插件之滑动验证码
Sep 21 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图片上传代码
2013/11/04 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
政工例会汇报材料
2014/08/26 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电