JS-事件对象(鼠标键盘事件)
一 事件对象
1 需要获取键盘和鼠标的信息的时候,用到事件对象。(e)
例如:document.onclick = function(e){
var e = e || event;(做兼容)
}
注意:由于事件对象有兼容性,在IE中传不传参数无所谓,但是输出的参数必须是event。
2 查看用户点击了鼠标的那个键:e.button
e.button == 0:代表左键 1:代表滚轮 2:代表右键
3 事件对象 坐标
clientX clientY 可视区的x和y坐标;(可视区可以肤浅理解为一屏的body)
offsetX offsetY 当前元素自身身上的坐标;(相对于第一个定位父级)
pageX pageY 页面的坐标(包括滚动条);
screenX screenY 屏幕的坐标;(整个电脑的屏幕);
4 键盘中onkeydown和onkeyPress区别
前者按键盘上的任意字符都可以,后者只能识别字母和数字以及一些常用字符;
后者不支持ALT和SHIFT键;
前者回车键的ASCII码的值是13,后者是10。
5 如何知道用户按下了哪个键
e.keyCode (兼容) e.which (返回值是ASCII码);
需要的话可以用String.fromCharCode 将ASCII码转化为字符进行操作;
二 事件监听
addEventListener()三个参数;
第一个参数是事件名称,不需要加 on ,但是事件要用引号括起来;
第二个参数是回调函数;
第三个参数是布尔值,一般情况是false,true代表是捕获。
三 事件冒泡
1 IE提出来的事件冒泡。什么是事件冒泡?
从子元素的事件到父元素的事件依次执行的一个过程就是事件冒泡。
2 如何阻止事件冒泡:
e.stopPropagation()兼容e.cancelBubble = true;
四 事件捕获
1 网景公司提出来的。什么是事件捕获?
从父元素的事件到子元素的事件依次执行的一个过程就是事件捕获。
2 注意:IE是事件冒泡,火狐是事件捕获。
3 当事件冒泡遇到事件捕获的时候会先捕获再冒泡。
五 事件代理(事件委托)
1 利用事件冒泡的机制将子元素的事件加到父级身上。
2 事件代理优点:
减少了dom的绑定,提高了性能;
可以给未来的元素添加事件。
3 查看用户点击了那个对象?
e.srcElement 兼容 e.target (返回的是大写字符);
JS-事件对象(鼠标键盘事件)的更多相关文章
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码
MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- js进阶 12-4 jquery键盘事件如何使用
js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...
- Tkinter 鼠标键盘事件(一)
一: 鼠标事件 <Button-1> 鼠标左键单击 ...
- Linux 模拟 鼠标 键盘 事件
/************************************************************************ * Linux 模拟 鼠标 键盘 事件 * 说明: ...
- Python——pyHook监听鼠标键盘事件
pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...
- Python - selenium_WebDriver 鼠标键盘事件
from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...
- Selenium4.0+Python3系列(四) - 常见元素操作(含鼠标键盘事件)
一.写在前面 上篇文章介绍的是关于浏览器的常见操作,接下来,我们将继续分享关于元素的常见操作,建议收藏.转发! 二.元素的状态 在操作元素之前,我们需要了解元素的常见状态. 1.常见元素状态判断,傻傻 ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
随机推荐
- orika core工具对实体(Bean)进行深度拷贝
1. 在pom.xml中添加orika core依赖: <!-- https://mvnrepository.com/artifact/ma.glasnost.orika/orika-core ...
- 编码,基本数据类型,str索引和切片,for循环
1. 编码 1. 最早的计算机编码是ASCII. 美国人创建的. 包含了英文字母(大写字母, 小写字母). 数字, 标点等特殊字符!@#$% 128个码位 2**7 在此基础上加了一位 2**8 8位 ...
- [oracle,2017-11-28] 怎么判断oracle数据库中字段是否为空
要给oracle某个字段插入空值非常简单 insert into table(column) values('') 但是查询的时候通过语句 select * from table where colu ...
- (转)日期类型的input元素设置默认值为当天
原文地址 html5的form元素对日期时间有丰富的支持 <input type="date"> <input type="time"> ...
- oracle 服务名 数据库名 实例名
服务名 show parameter service_name 实例名 show parameter instance 数据库名 show parameter db conn username/pas ...
- 使用NetBox实现ASP网页封装为EXE教程
简单的形容就是把ASP文件打包 成一个EXE文件,并且不需要在调试的机器上安装IIS即可正常调试.如果按照说明书来操作的话,观看比较繁琐,本人为方便大家使用,现制作一个简单的使用教程. 封装过程 1. ...
- 寻找cost函数最小值:梯度下降与最小二乘法
Editted by MarkDown 寻找cost函数最小值:梯度下降与最小二乘法 参考:最小二乘法小结--刘建平 背景: 目标函数 = Σ(观测值-理论值)2 观测值就是我们的多组样本,理论值就是 ...
- 以虎嗅网4W+文章的文本挖掘为例,展现数据分析的一整套流程
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文作者将结合自身经验,并以实际案例的形式进行呈现,涉及从 ...
- iOS基础知识之多态问题
多态是基于继承而言的,例如自定义父类Person,子类Son,那么可能会出现如下情况: Person *p =[ [Son alloc]init]; 这种情况时,便是多态的使用.多态属于动态创建对象, ...
- List转数组
eg: List<Product> products = new ArrayList<Product>(); Product[] array = products.toArra ...