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