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-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 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服务器实现多session并发运行
2006/10/09 PHP
PHP学习之PHP变量
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
详细分析Python collections工具库
2020/07/16 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
竞聘报告优秀范文
2014/11/06 职场文书
运动会加油稿50字
2015/07/21 职场文书
尊师重教主题班会
2015/08/14 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
python数字转对应中文的方法总结
2021/08/02 Python