当前位置:   article > 正文

Event对象、MouseEvent对象、inputEvent对象和focusEvent对象_js inputevent转mouseeven

js inputevent转mouseeven

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);//打印选中的选项是什么内容
  • 1
  • 2

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);
  //   当预加载时图片的宽度会重设,所以需要重新计算fontsize
    function loadhandler(){
      resizeHandler();
    }
    function resizeHandler(e){
//给HTML设置fontsize,rem大小与html的字体大小有关
      document.documentElement.style.fontSize =
        (document.documentElement.clientWidth / screen.width) * 100 +
        "px";
//用当前页面的宽度除以屏幕宽度乘以100就是1rem的大小
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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);
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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)
            }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

function heroStateChange(){  
         time--;
          if(time>0)return;
          time=10;
          n++;
          if(n>3)n=0;
         hero.style.backgroundPositionX=-n*32+"px";
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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:-150
    wheelDeltaX:0;
    wheelDeltaY:-150;向下
    触摸板上比滚轮小双指下滑3

    IE:
    不支持触摸板双指滑动
    e.deltail:0;
    wheelDelta:-120;向下

    火狐
    e.deltail:3;向下
    触摸板向下双指滑动-1
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

兼容谷歌、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);
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/771478
推荐阅读
相关标签
  

闽ICP备14008679号