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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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 日期时间处理函数小结
2009/12/18 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
php多重接口的实现方法
2015/06/20 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
应届毕业生求职信
2013/11/30 职场文书
理想演讲稿范文
2014/05/21 职场文书
应届大专生求职信
2014/06/26 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
创先争优个人总结
2015/03/04 职场文书
车位出租协议书范本
2016/03/19 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Python 统计序列中元素的出现频度
2022/04/26 Python