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

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);}