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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
微信小程序日历效果
2018/12/29 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
JS实现小米轮播图
2020/09/21 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python读文件逐行处理的示例代码分享
2013/12/27 Python
用Python编程实现语音控制电脑
2014/04/01 Python
python海龟绘图实例教程
2014/07/24 Python
python访问系统环境变量的方法
2015/04/29 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python打开使用的方法
2019/09/30 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
Hibernate持久层技术
2013/12/16 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
医药工作岗位求职信分享
2013/12/31 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
退税申请报告怎么写
2015/05/18 职场文书
公司管理制度范本
2015/08/03 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书