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 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
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执行.SQL文件
2013/07/05 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python如何处理程序无法打开
2020/06/16 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
文员自我评价怎么写
2013/09/19 职场文书
口腔医学技术应届生求职信
2013/11/09 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
Win2008系统搭建DHCP服务器
2022/06/25 Servers