JavaScript 学习笔记(十六) js事件


Posted in Javascript onFebruary 01, 2010

回顾
事件对象里包含三个方面的信息····回看上一篇内容!

事件对象里的属性和方法,主要是鼠标和键盘的信息。

1. 获取事件类型

事件对象属性type

2. 获取按键代码

事件对象属性keyCode:回车为13,空格为32,后退键为8

3. 检测Shift、Alt、Ctrl键

事件对象属性是否被按下:shiftKey、altKey、ctrlKey

4. 获取客户端坐标

事件对象属性clientX和clientY

5. 获取屏幕坐标

事件对象属性screenX和screenY

事件的类型
根据触发事件的事物和事件发生的对象,可将浏览器中发生的事件分为几个类型:

一、 鼠标事件

每个鼠标事件都会给以下event对象的属性填入值:

1.坐标属性(如clientX 和 client 等)

2.Type属性

3.Targer(DOM)或serElement(IE)属性(目标对象属性)

4.shiftKey、ctrlKey、altKey和metaKey(DOM)属性

5.button属性(只在mouse事件中)

(oEvent.target || oEvent.srcElement).id逻辑符或操作符作用于两个对象时,第一个对象非空,返回第一个对象,否则返回第二个对象,这里表示的是引起事件的元素的ID。

二、 键盘事件

Keydown --- 在键盘上按下某按键时发生。一直按着某键,它则会不断触发。

Keypress --- 按下一个按键,并产生一个字符时产生(也就是不管类似Shit ctrl alt之类的键。)一直按键时,它会持续发生。

Keyup --- 释放按着的按键时发生

1. 事件的属性

对每个键盘事件,会填入以下的事件属性:

keyCode属性(键位的ASC码值)

charCode属性(仅DOM)

target(DOM)与srcElement(IE)属性

shiftKey、ctrlKey、altKey和metaKey(DOM)属性

2.顺序

当用户按一次某字符按键时,会按以下顺序发生事件:

(1)、keydown;

(2)、keypress;

(3)、keyup;

如果用户按一次某非字符按键(例如shift),会按以下顺序发生事件:

(1)、keydown;

(2)、keyup;

三、 HTML事件

onload、unload、resize、scroll等事件。

四、 突变事件

文档或元素元素的子树的添加删除节点,目前还没有任何主流浏览器实现了它。

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
js加解密 脚本解密
Feb 22 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
js左侧多级菜单动态的解决方案
Feb 01 #Javascript
javascript 三种编解码方式
Feb 01 #Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 #Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 #Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 #Javascript
详细讲解JS节点知识
Jan 31 #Javascript
javascript中的array数组使用技巧
Jan 31 #Javascript
You might like
PHP注释实例技巧
2008/10/03 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python抽象类的新写法
2015/06/18 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python里反向传播算法详解
2020/11/22 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
市场营销专业推荐信
2013/11/03 职场文书
员工培训心得体会
2013/12/30 职场文书
银行简历自我评价
2014/02/11 职场文书
红旗方阵解说词
2014/02/12 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
走群众路线学习笔记
2014/11/06 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS