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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
动态加载js、css的实例代码
May 26 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP学习笔记之session
2018/05/06 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python 同时读取多个文件的例子
2019/07/16 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
公司出纳岗位职责
2013/12/07 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
导师就业推荐信范文
2014/05/22 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
生产现场禁烟通知
2015/04/23 职场文书
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers