zoukankan      html  css  js  c++  java
  • JS事件分类

    JS事件分类

    1.鼠标事件:

    click/dbclick/mouseover/mouseout

    2.HTML事件:

     onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

    3.键盘事件:

     keydown:键盘按下时触发
     keypress:键盘按下并抬起的瞬间触发。
     keyup:键盘抬起触发

    [注意事项]

    ①执行顺序:keydown keypress keyup
    ②keypress只能捕获数字,字母,符号键,而不能捕获功能键。
    ③长按时循环执行keydown--keypress
    ④有keydown,并不一定有keyup,当长按时焦点失去,将不再触发keyup
    ⑤keypress区分大小写,keydown,kewup不区分。

    4.事件因子:

    当触发一个事件时,该事件将向事件所调用的函数中,默认传入一个参数,

    这个参数就是一个事件因子,包含了该事件的各种详细信息。

    document.onkeydown=function(e){
     console.log(e);
     }
    document.onkeydown=function(){
    console.log(window.event);
    }
     
    //兼容浏览器的写法:
    document.onkeydown=function(e){
    e==e||Window.event;
    var Code=e.keyCode||e.which||e.charCode;
    if(code==13){
    //回车
    }
    }
     

    5.如何确定键盘按键?

    ①再出发的函数中,接收事件因子e。
    ②可以使用e.key直接去到按下的按键字符(不推荐使用)。
    ③一次可以使用keyCode/which/charCode取到按键的ASCII码值。

    (兼容各种浏览器的写法)

    var Code=e.keyCode||e.which||e.charCode;
     
    //判断组合键
    var isAlt=0,isEnt=0;
    document.onkeyup=function(e){
    if(e.keyCode==18){
    isAlt=1;
    }     
    if(e.keyCode==13){
    isEnt=1;
    }   
    if(isAlt==1&&isEnt==1){
    alert("同时按下Alt和Enter键");
    }
    }
     
    document.onkeyup=function(){
    console.log("keyup");
    }
    document.onkeypress=function(){
    console.log("keypress");
    }
    document.onkeydown=function(){
    console.log("keydown");
    }
    document.onkeypress=function(){
    console.log(window.event);
    }
    //判断是否按下了回车键
    document.onkeydown=function(e){
    var code=e.keyCode;
    if(code==13){
    alert("你输入的是回车键");
    }
    }
  • 相关阅读:
    Git忽略提交规则
    vue-echarts, vue 图表数据处理; axios 跨域代理
    css 画图
    span 空标签 width 设置无效 解决办法
    css 属性备忘录
    js 操作数组的方法 split()
    js 取整,四舍五入 Math.ceil()
    js 强制类型转换 parseInt,parseFloat,number
    dom级别和对应事件级别;事件流
    mac 使用命令行向 github 提交代码
  • 原文地址:https://www.cnblogs.com/login123/p/12130372.html
Copyright © 2011-2022 走看看