js事件【续】(事件类型)
一、UI事件【使用时需要添加on eg: onload 页面加载完成事件】
load 【一张页面或一幅图像完成加载】
页面加载后触发的事件,即进入页面后
unload 【用户退出页面】
页面卸载后触发的事件,即离开页面时(firefox不支持)
select 【文本被选中】
当用户选择文本框(<input>,<textarea>)中的一个或多个字符时
resize 【窗口或框架被重新调整大小】
当浏览器窗口被调整到一个新的高度或者宽度时,会触发
scroll
当用户滚动带滚动条的元素中的内容时,在该元素上触发resize,scroll会在变化期间重复被激发,尽量保持代码简单
二、焦点事件【使用时前面添加on eg: onblur 点击事件】
blur 失焦事件
focus 聚焦事件【支持冒泡】
//IE支持
focusin 与focus等价 【支持冒泡】
focusout 与blur等价 【支持冒泡】
三、鼠标事件与滚轮事件【使用时前面均需要添加on eg: onchange 元素改变事件】
change HTML元素发生改变
reset 重置按钮被点击
submit 确认按钮被点击
click 鼠标左键点击【鼠标按下及松开】事件或按下回车键触发事件
dblclick 鼠标双击事件 相当于相继触发两次click事件
mousedown 鼠标按钮(包括鼠标左右按键)按下事件
mouseup 鼠标释放按钮事件
mousemove 鼠标在指定元素内移动事件
mousewheel 滚轮事件
mouseenter 鼠标光标从元素外部首次移动到元素范围内激发 【不支持冒泡、不支持子元素】
mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发 【不支持冒泡、不支持子元素】
mouseover 鼠标位于元素外部,将其首次移入另一个元素边界之内时触发 【支持子元素】
mouseout 在位于元素上方的鼠标光标移入到另外一个元素中 【支持子元素】在被选元素上与mouseleave效果相同
四、键盘与文本事件【使用document调用,使用时前面也需要加on eg: onkeydown 键盘按下事件】
keydown 按下键盘任意键时触发,如果按住不放会重复触发此事件
keypress 按下键盘字符键时触发,如果按住不放会重复触发此事件
keyup 释放键盘上键时触发
说明:
当键盘事件发生时,event对象的keyCode属性【event.keyCode】中会包含一个代码与键盘上的特定键对应,对数字字母键,
keyCode属性的值与ASCII码中对应的小写字母和数字编码相同
五、相关元素,event特殊属性
1、客户区坐标位置 【clientX,clientY Safari浏览器不兼容】
事件发生时,鼠标指针在视口中的水平坐标位置为clientX和垂直坐标位置clientY
2、页面坐标位置 【pageX,pageY 不兼容ie浏览器】
事件发生时,页面滚动时,鼠标指针在页面本身而非视口的坐标pageY = 滚动距离 + clientY
页面没有滚动的时候,pageX和pageY的值与clientX和clientY值相等
3、屏幕位置 【screenX,screenY】
4、修改键 【布尔类型】
用来判断对应的按键是否被按下shiftKey,ctrlKey,altKey,metaKey
5、鼠标按钮 【mousedown,mouseup】
该事件的event对象中包含了button属性,表示按下或释放的按钮
event.button属性值: 【0、1、2】
0表示鼠标左键按钮
1表示中间的滚动按钮
2表示鼠标右键按钮
js事件【续】(事件类型)的更多相关文章
- JS中的事件类型和事件属性的基础知识
周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习, 小姨子再也不用担心我的学习啦 ...
- JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型
事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...
- 《JS高程》事件类型学习笔记
事件类型: UI事件&焦点事件: 鼠标滚轮事件: 键盘与文本事件: 复合事件&变动事件: HTML5事件: 设备事件&触摸与手势事件:
- Node.js:events事件模块
Nodejs的大部分核心API都是基于异步事件驱动设计的,所有可以分发事件的对象都是EventEmitter类的实例. 大家知道,由于nodejs是单线程运行的,所以nodejs需要借助事件轮询,不断 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js学习笔记---事件代理
事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...
- JS的Touch事件们,触屏时的js事件
丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.on ...
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
随机推荐
- Oracle存储过程常用语法及其使用
1.什么是存储过程 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行.它可以接受参数.输出参数,并可以返回单个或多个 ...
- Java 数组ArrayList语法
恶补基础,记录一下数组ArrayList的常用语法 1.导入 import java.util.ArrayList; 2.定义数组list ArrayList<类名> list = new ...
- 模拟赛 T1 费马小定理+质因数分解+exgcd
求:$a^{bx \%p}\equiv 1(\mod p)$ 的一个可行的 $x$. 根据欧拉定理,我们知道 $a^{\phi(p)}\equiv 1(\mod p)$ 而在 $a^x\equiv 1 ...
- Shell里的特殊符号
Shell里的特殊符号: (1)单引号: 由单引号括起来的符号都作为普通字符处理,他们都失去了特殊意义. (2)双引号: 除美元符号($).倒引号.反斜线(\)仍保留特殊含义外,其余符号都作为普通字符 ...
- 8-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(Apache 配置SSL,HTTPS连接)
https://www.cnblogs.com/yangfengwu/p/10947423.html 和当时配置MQTT差不多,去下载证书文件 https://www.cnblogs.com/ya ...
- 【转】C# 对sqlite基本操作,带批量插入
原文地址:https://download.csdn.net/download/mic_gary/10154869 public class SQLiteHelper { //数据库连接字符串 pub ...
- 缓存穿透 & 缓存击穿 & 缓存雪崩
参考文档: 缓存穿透和缓存失效的预防和解决:https://blog.csdn.net/qq_16681169/article/details/75138876 缓存穿透 缓存穿透是指查询一个一定不存 ...
- java IO流读取图片供前台显示
最近项目中需要用到IO流来读取图片以提供前台页面展示,由于以前一直是用url路径的方式进行图片展示,一听说要项目要用IO流读取图片感觉好复杂一样,但任务下达下来了,做为程序员只有选择去执行喽,于是找了 ...
- Markdown 编辑器指南
一直觉得博客园默认的编辑器不好用,后来了解了Markdown,并且博客园也支持Markdown标记,所以写篇博客总结下. 一.认识 Markdown Markdown 是一种用来写作的轻量级「标记语言 ...
- Maven 教程(7)— Maven使用的最佳实践
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79544201 1.设置MAVEN_OPTS环境变量 通常需要设置MAVEN_OP ...