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高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
随机推荐
- 修改Discuz!X系列开启防CC攻击,不影响搜索引擎收录
最近网站一直被攻击,特别是新上线的交流社区,所以今天写了一个开启CC攻击防护代码,而且不影响搜索引擎收录. 在config_global.php文件中有如下代码: $_config['security ...
- UiPath: Selectors repair 选择器的修复,即被选择的按钮发生改变如何选择第二按钮
实现批量注册用户功能时,出现第一个用户注册完时,弹出确认按钮,点击即可,但是第二个用户注册完成时,弹出的按钮与第一个有差异,图形用户界面元素及其父元素的属性都发生改变.所以就点不了按钮,就卡死在这.如 ...
- acwing 算法面试、笔试题公开课整理记录
week1 Google KickStart 2019 A轮 讲解视频地址AcWing 549. 训练 tag: 排序 遍历 在线练习地址AcWing 550. 包裹 在线练习地址Ac ...
- 02-docker入门-docker常用的一些命令
在这里,有必要先对ducker在做一次介绍 ducker 是一个容器. 容器内部运行的是一个系统. 系统内部安装好了要调试 / 发布的工程,然后这个系统被打包成了一个镜像. ducker 就是这个镜像 ...
- IDEA控制台输出中文乱码问题
IntelliJ IDEA 真的是一款很方便的Java开发工具,但是关于中文乱码这个问题我不得不吐槽,这个编码也弄得这么麻烦干嘛,真想找idea开发者干架,我敢打包票我能在一分钟之内一拳飞过去让他跪下 ...
- 把antd的组件源码搬到Ant Design Pro中使用
把组件源码搬过来后,样式死活不生效,经过1天的努力,有说less-loader的,有说webpack配置,还有说babel配置的,最后,我自己找到了方法 就是在global.less中使用@impor ...
- WindowChrome
"chrome"一词在设计术语中是"框架"的意思,即浏览器的除了网页之外的部分. https://www.cnblogs.com/dino623/p/Cus ...
- UNIX网络编程卷1 - >环境搭建(ubuntu16.04)
学习unp网络编程,树上的例子均存在#include“unp.h”,故需要对环境进行配置. 1.到资源页下载www.unpbook.com 2.解压并将unpv13e移动到相应的文件夹下 (因为我 ...
- 微信网页分享使用了jssdk,分享图还是不显示的几个坑
坑爹的微信分享,设置图片链接必须要满足如下条件: 1. 微信分享图链接必须是绝对路径,写相对地址不行. 比如图片地址写成 './assets/images/share.jpg' 不行!!! 必须写成 ...
- 【luoguP1168】中位数
题目链接 用一个大根堆和一个小根堆维护中位数即可 #include<iostream> #include<cstring> #include<cstdio> #in ...