Event对象、MouseEvent对象、inputEvent对象和focusEvent对象

Event事件
change事件：多用于表单元素
1、用于文本框时，当输入内容被修改并且失去焦点时触发
2、select下拉菜单切换选项时触发，不用失去焦点，this.value就是下拉菜单的选项，仅限于下拉菜单，列表不可用
3、用select.selectedOptions就是选中的所有选项组成的列表
4、checked单选多选时也可以被激活

var values=Array.from(select.selectedOptions).map(function(item){return item.textContent;})
console.log(values);//打印选中的选项是什么内容

load事件：多用于加载
图片的加载：load是在图片加载完成后才执行
图片如果没有放在body中时就是没有放在DOM树中，此时offsetwidth为0，直到图片被放在body中才有，直接打印img.width是原图的宽高，img.width=800修改原图宽度，没有单位，img.style.width
当使用offsetwidth，clientwidth，scollwidth时，需要拆开渲染树，然后计算，会回流，所以尽量减少这些获取
window.οnlοad=function(){}，希望代码全部加载执行完才运行，所有的都加载完后才执行window.onload
error事件
img.addEventListener(“error”,errorHandler);
因为地址因素出现加载失败时，触发error事件，当出错接下来就执行errorHandler这个函数

reset和submit重置和提交
只能针对表单使用
阻止提交和重置

e.preventDefault();取消系统默认行为（例如取消点击提交按钮就会转到action中的地址页面）
e.returnValue=true;兼容写法（true取消/false不取消）

resize事件
textarea不能用resize事件
window可以使用，改变窗口大小时可以激活

案例：
元素自适应窗口大小：

 resizeHandler();
//打开时就自适应一遍，避免一打开是CSS中设置的大小var img = new Image();img.src = "./img/1.jpg";img.style.width=(screen.width-2)/100+"rem";
//-2是因为适应窗口大小浏览器左右有两个边框document.body.appendChild(img);window.addEventListener("load",loadhandler);
//添加load事件，让图片加载完成后重新计算大小window.addEventListener("resize", resizeHandler);//   当预加载时图片的宽度会重设，所以需要重新计算fontsizefunction loadhandler(){resizeHandler();}function resizeHandler(e){
//给HTML设置fontsize，rem大小与html的字体大小有关document.documentElement.style.fontSize =(document.documentElement.clientWidth / screen.width) * 100 +"px";
//用当前页面的宽度除以屏幕宽度乘以100就是1rem的大小}

Select事件
针对input表单
输入文本框中的选择
user.selectionStart();user.selectionEnd();选中的从第几位开始；第几位结束

案例：

使文本框中选中的部分自动删除

var user=document.querySelector("#user");user.addEventListener("select",selectHandler);function selectHandler(e){// console.log(user.selectionStart);//选择的起始位置// console.log(user.selectionEnd);//选择的结束位置user.value=user.value.slice(0,user.selectionStart)+user.value.slice(user.selectionEnd);}

MouseEvent事件
mousedown先，mouseup后，click最后

mousedown鼠标按下
左中右键
button: 0 1 2;
buttons:1 4 2;
which: 1 2 3;

mouseup鼠标释放

click点击
e.altkey:false是否按住alt点击
e.ctrlkey:false是否按住ctrl点击
e.shiftkey:false是否按住shift点击
e.metakey:false是否按住meta点击

dblmouse双击

mouseover鼠标滑入，冒泡，会触发子元素的鼠标滑入，考虑子元素
mouseout鼠标滑出，冒泡，会触发子元素的鼠标滑入，考虑子元素

mouseenter鼠标进入，没有冒泡，只针对侦听事件对象的进入，不考虑子元素
mouseleave鼠标离开，没有冒泡，只针对侦听事件对象的进入，不考虑子元素

mousemove鼠标移动

contextmenu鼠标右键菜单激活阻止默认事件可以取消弹出右键菜单，e.preventfalute();

所有X、Y都是鼠标的坐标，元素是top、left
clientX:167 针对视口坐标X
clientY:173 针对视口坐标Y

layerx:24 如果有定位与offsetX相同
layerY:28 如果当前元素没有定位，相对于e.currentTarget(侦听事件对象)的左上角
offsetX:24
offsetY:28 相对于e.target目标元素的左上角

movementX:0 针对鼠标移动事件mousemove，相对上次鼠标移动的坐标偏移，按下鼠标时开始侦听鼠标移动事件
movementY:0

pageX:182 鼠标相对于页面左上角距离，相对于body
pageY:186

screenX:182 鼠标相对屏幕的坐标
screenY:256

x:184 针对视口坐标X，早期IE不支持
y:186针对视口坐标Y，早期IE不支持

inputEvent和focusEvent
focusEvent
focus blur 所有表单元素和超链接可以通过tab键切换聚焦
focus聚焦，不可以事件委托
e.relatedTarget 之前聚焦的元素，上一个聚焦的元素
blur失焦，不可以事件委托
focusin聚焦（新添加）与focus一样，但可以事件委托，委托给form
focusout失焦（新添加）与blur一样，但可以事件委托，委托给form
作用：利用聚焦写placeholder（因为早期没有这个属性），失焦用来判断正则表达式

input输入框事件
e.inputType事件类型
e.isComPOSing是否开启输入法
e.date本次输入内容文本
作用：让当前输入内容不出现数字，或只能是数字（每次输入时检测是否有数字，正则表达式将非数字替换为空字符串），限制文本内容

删除input文本框中空格：
input.value=input.value.replace(/\D/g,"");
input.value=input.value.trim();删除文本内容前后空格，可以在文本中间添加空格

节流：减少重复进入次数

function inputHandler(e){if(ids) return;ids=setTimeout(function(){console.log(input.value);clearTimeout(ids);ids=0;},500)}

防抖：进入10次才执行一次

function heroStateChange(){  time--;if(time>0)return;time=10;n++;if(n>3)n=0;hero.style.backgroundPositionX=-n*32+"px";}

keyBorderEvent按键事件
侦听对象可以是对象和window侦听
keydown可以连续触发
keypress与keydown相同
keyup松开才执行，按一次执行一次
e.chartCode:0;当前按键定位
e.location:0
e.code: "KeyA"字母键名只有大写，shift可以获取左右
e.key: “a” 字母区分大小写，shift不能获取左右
e.keyCode:65;键码参照于阿斯克码37←/38↑/39→/40↓
e.which:65

WheelEvent 滚轮事件
火狐DOMMouseScroll
谷歌IEmouseWheel 默认行为：滚动滚轮时滚动条滚动，不能用e.preventDefault();取消默认行为
谷歌（html，body，document都不能取消默认行为）
IE对body，document可以取消滚动条的滚动

    谷歌e.deltaMode:0;e.deltaX:-0;e.deltaY:125;鼠标向下滚一下e.deltaZ:0;e.deltail:0;wheelDelta:-150wheelDeltaX:0;wheelDeltaY:-150;向下触摸板上比滚轮小双指下滑3IE：不支持触摸板双指滑动e.deltail:0;wheelDelta:-120;向下火狐e.deltail:3;向下触摸板向下双指滑动-1

兼容谷歌、IE、火狐浏览器鼠标滚轮：

function wheelHandler(e){var detail;if(e.type==="mousewheel"){detail=e.wheelDelta<0 ? -1  : e.wheelDelta>0 ? 1 : 0;}else if(e.type==="DOMMouseScroll"){detail=e.detail>0 ?  -1  : 1;}console.log(detail);}

Event对象、MouseEvent对象、inputEvent对象和focusEvent对象相关推荐

返回查找对象所在列标_返回基础-这不是您要查找的对象...等等，哦，它是对象...
返回查找对象所在列标 Downcasting is kind of something you usually want to avoid, but sometimes it's not easily ...
php 字符串数组转数组对象_php怎么将数组转成对象？
php将数组转成对象的方法:1.使用数据类型转换,在数组变量前添加"(Object)"来将数组转成对象.2.先使用json_encode()函数将数组转换为json字符串:然后使用 ...
java对象的访问定位_2、JVM-Java对象的创建、对象结构、对象访问定位-Go语言中文社区...
目录记录下来方便个人学习复习注:根据new的参数在常量池中定位一个类的符号引用 --这句话的意思是:常量池相当于c语言中的指针地址集合,所以就是在常量池中保存new对象的地址,通过地址定位对象在堆 ...
python类、对象、方法、属性之类与对象笔记
为什么80%的码农都做不了架构师?>>> python中一切皆为对象,所谓对象:我自己就是一个对象,我玩的电脑就是对象,坐着的椅子就是对象,家里养的小狗也是一个对象...... ...
python一切皆对象的理解_Python中万物皆对象？的理解
在很多地方都看到有过这样一句话,但是对象这个词的理解依然停留在谈朋友那个对象上-- python中一切皆为对象,一个对象的特征也称为属性(attribute).它所具有的行为也称为方法(method) ...
php对象持久化,在 Oracle 中完成 PHP5 对象的持久
在 Oracle 中完成 PHP5 对象的持久作者:Barry McKay 在数据库驱动的 Web 应用程序中实现 PHP5 对象的持久,朝着完全面向对象的 Web 应用程序开发迈进重要的一步. 2 ...
Python中str()与repr()函数的区别——repr() 的输出追求明确性，除了对象内容，还需要展示出对象的数据类型信息，适合开发和调试阶段使用...
Python中str()与repr()函数的区别 from:https://www.jianshu.com/p/2a41315ca47e 在 Python 中要将某一类型的变量或者常量转换为字符串对象 ...
定义一个dto对象_正确理解DTO、值对象和POCO
(此文章同时发表在本人微信公众号"dotNET每日精华文章") 今天推荐的文章比较技术化也比较简单,但是对于一些初学者而言,可能也是容易搞混的概念:就是如何理解DTO.值对象和PO ...
【设计模式】代理模式 ( 动态代理使用流程 | 创建目标对象 | 创建被代理对象 | 创建调用处理程序 | 动态创建代理对象 | 动态代理调用 )
文章目录前言一.静态代理的弊端二.动态代理的优势三.动态代理使用流程 1.目标对象接口 2.被代理对象 3.调用处理程序 4.客户端四.动态生成代理对象类的字节码文件数据前言代 ...

Event对象、MouseEvent对象、inputEvent对象和focusEvent对象

Event对象、MouseEvent对象、inputEvent对象和focusEvent对象

Event对象、MouseEvent对象、inputEvent对象和focusEvent对象相关推荐

最新文章

热门文章