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 ajax获取网站Alexa排名的代码
Dec 12 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 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
服务器端解压缩zip的脚本
2006/12/22 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php之可变变量的实例详解
2017/09/12 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue 组件简介
2020/07/31 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
对python Tkinter Text的用法详解
2018/10/11 Python
详解Django admin高级用法
2019/11/06 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
介绍一些UNIX常用简单命令
2014/11/11 面试题
专业销售业务员求职信
2013/11/18 职场文书
自我评价范文点评
2013/12/04 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
家具商场的活动方案
2014/08/16 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
昆虫记读书笔记
2015/06/26 职场文书
《称赞》教学反思
2016/02/17 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang