DOM基础教程之事件类型


Posted in Javascript onJanuary 20, 2015

对于用户事件类型而言,最常用的是鼠标、键盘、浏览器。

1.鼠标事件:

DOM基础教程之事件类型

鼠标的事件都频繁使用,下面例子就测试各种鼠标事件

<script language="javascript">

            function handle(oEvent) {

                var disp = document.getElementById("display");

                if (window.event) oEvent = window.event; //处理兼容性,获得对象

                disp.innerHTML += "鼠标事件名称:" + oEvent.type + "<br>";

            }

            window.onload = function() {

                var oP = document.getElementById("box");

                oP.onmousedown = handle;

                oP.onmouseover = handle;

                oP.onmouseup = handle;

                oP.onmouseout = handle;

                oP.onclick = handle;

                oP.ondblclick = handle;

            }

        </script>

        <div>

            <div id="box" style="width:100px;height:100px;background:#ddd;">

                box内容

            </div>

            <p id="display"></p>

        </div>

鼠标的键值button测试(附对照表)

DOM基础教程之事件类型

<script language="javascript">

            function TestClick(oEvent) {

                var oDiv = document.getElementById("display");

                if (window.event)

                    oEvent = window.event;

                oDiv.innerHTML += oEvent.button; //输出button的值

            }

            document.onmousedown = TestClick;

            window.onload = TestClick; //测试未按下任何键

        </script>

        <div>

            <p id="display"></p>

        </div>

2.键盘事件

键盘事件种类不多,仅三种事件。

keydown(按下某键,一直按住会持续触发)

keypress(按下某键并产生字符时触发,即忽略Shift、Alt,ctrl等功能键)

keyup(释放某个键时触发)

键盘监听示例:

<script language="javascript">

            function handle(oEvent) {

                if (window.event) oEvent = window.event; //处理兼容性,获得事件对象

                var oDiv = document.getElementById("display");

                oDiv.innerHTML += oEvent.type + " "; //输出事件名称

            }

            window.onload = function() {

                var oTextArea = document.getElementById("textin");

                oTextArea.onkeydown = handle; //监听所有键盘事件

                oTextArea.onkeyup = handle;

                oTextArea.onkeypress = handle;

            }

        </script>

        <div>

            <textarea rows="4" cols="50" id="textin">

            </textarea>

            <p id="display"></p>

        </div>

对于键盘而言,最重要的不是事件的名称,而是所按的是什么键。由于ie没有charCode属性,而keyCode只有在keydown、keyup事件发生的时才与标准dom的keycode相同,

在keypress事件中等同于keycode,因此采用以下方法。

oEvent.charCode = (oEvent.type == "keypress")?oEvent.keycode:();

之所以不采用keyCode是因为它表示键盘按键,而不是输出的字符,因此,输出“a”和“A”,keycode是等值的,charcode则以字符区分。

另外在keypress中,标准dom的keycode值始终为0;

例子:键盘事件的相关属性:

<script language="javascript">

            function handle(oEvent) {

                var oDiv = document.getElementById("display");

                if (window.event) oEvent = window.event; //处理兼容性,获得事件对象

                //设置ie charcode的值

                oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;

                oDiv.innerHTML += oEvent.type + ":charCode" + oEvent.charCode + "keyCode" + oEvent.keyCode + "<br>"; //输出测试

            }

            window.onload = function() {

                var oTextArea = document.getElementById("textin");

                oTextArea.onkeydown = handle; //监听所有键盘事件

                oTextArea.onkeypress = handle;

            }

        </script>

        <div>

            <textarea rows="4" cols="50" id="textin">

            </textarea>

            <p id="display"></p>

        </div>

3.htm事件

对于浏览器而言,各种html有着自己的事件,有一些也是用户常常接触到的,比如load,error,select等,常用的html事件如下:

DOM基础教程之事件类型

load事件是常用的事件之一,因为在页面载入完成之前,dom的框架还没有搭建完成,因此任何相关操作都不能发生。

给window对象分配load,unload事件等同于<body>标记的onload和onunload方法。

Javascript 相关文章推荐
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 #Javascript
DOM基础教程之事件对象
Jan 20 #Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 #Javascript
js实现的捐赠管理完整实例
Jan 20 #Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 #Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 #Javascript
DOM基础教程之使用DOM + Css
Jan 20 #Javascript
You might like
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
javascript跨域刷新实现代码
2011/01/01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
js实现自定义路由
2017/02/04 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
webpack常用构建优化策略小结
2019/11/21 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
快速了解Python相对导入
2018/01/12 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
GWebs公司笔试题
2012/05/04 面试题
查环查孕证明
2014/01/10 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
天坛导游词
2015/02/02 职场文书
岁月神偷观后感
2015/06/11 职场文书
七年级作文之雪景
2019/11/18 职场文书
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js