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学习2 选择器的使用说明
Feb 07 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
Python subprocess模块学习总结
2014/03/13 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
日语专业个人的求职信
2013/12/03 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python