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高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
随机推荐
- PHP将图片转base64格式函数
base64的好处是什么?今天在跟小伙伴讨论这个问题,要是全站用Php把图片转为base64行不行? 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终 ...
- java spring框架的定时任务
由于测试的原因,最近有接触java spring @Scheduled的定时任务,当时还以为配置起来表达式和crontab是完全一样的,没想到还有些许不一样. 在spring中,一个cron表达式至 ...
- LeetCode 348. Design Tic-Tac-Toe
原题链接在这里:https://leetcode.com/problems/design-tic-tac-toe/ 题目: Design a Tic-tac-toe game that is play ...
- 编写一个方法去掉数组里面重复的内容 var arr=['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
function noRepeat(arr) { var arr1 = []; for (var i = 0; i < arr.length; i++) { var item = arr[i]; ...
- 归并排序 MergeSort
今天第一次看懂了严奶奶的代码( ̄▽ ̄)~*,然后按照厌奶那的思路进行了一波coding,稍加调试后即可跑起来. 学习链接:排序七 归并排序.图解排序算法(四)之归并排序 merge函数:将两个有序序列 ...
- db服务器参数优化
1.swap分区 swap作用是在系统内存不够的情况下,当做临时的内存使用. swap是在硬盘上,性能肯定没有再内存好,当系统内存使用超过40%的时候, swap会可能被使用,而系统一旦使用swap会 ...
- 1473. [Ioi2000]Post加强版 n log^2 n做法
1473. [Ioi2000]Post加强版 n log^2 n做法 题面 有n个城市从负方向向正方向按照1至n标号,\(d[i]\)表示城市i离原点的距离并且\(d[1] = 0\),对于\(i \ ...
- [BZ1925] [SDOI2010]地精部落
[BZ1925] [SDOI2010]地精部落 传送门 一道很有意思的DP题. 我们发现因为很难考虑每个排列中的数是否使用过,所以我们想到只维护相对关系. 当我们考虑新的一个位置时,给新的位置的数分配 ...
- python发展
python的创始人---吉多·范罗苏姆(Guido van Rossum)
- ASP.NET Core WebApi基于Redis实现Token接口安全认证
一.课程介绍 明人不说暗话,跟着阿笨一起玩WebApi!开发提供数据的WebApi服务,最重要的是数据的安全性.那么对于我们来说,如何确保数据的安全将会是需要思考的问题.在ASP.NET WebSer ...