Vinson

Vinson

JavaScript 事件

发表于 2023-08-06
Vinson
阅读量 41

JavaScript 鼠标事件、键盘事件、表单事件、window事件

鼠标事件

  • click:单击
  • dblclick:双击
  • mouseover:移入(子节点会触发)
  • mouseout:移出(子节点会触发)
  • mousemove:移动(会不停的触发)
  • mouseenter:移入(子节点不会触发)IE8+
  • mouseleave:移出(子节点不会触发)IE8+
  • mousedown:按下(左右键)
  • mouseup:抬起(左右键)
  • contextmenu:右键单击(上下文环境菜单)
  • onmousewheel:chrome ie 滚轮滚动
    • e.wheelDalta:向下 -120 向上 120
  • DOMMouseScroll:firefox 只能事件绑定 滚轮滚动
    • e.detail:向下 3 向上 -3

键盘事件

  • keydown:键盘按下(按下不动会一直触发)
  • keyup:键盘抬起
  • keypress:键盘按下(只支持字符键)

window事件

  • load:当页面加载完成以后会触发
  • unload:当页面解构的时候触发(刷新页面,关闭当前页面)IE浏览器兼容
  • scroll:页面滚动 不停的触发
  • resize:窗口大小发生变化 不停的触发
  • visibilitychange:标签显示或隐藏时触发
  • blur:获取焦点时触发
  • focus:失去焦点时触发

表单事件

  • input:value 值发生改变
  • blur:失去焦点
  • focus:获取焦点
  • select:输入框中文本被选中触发
  • change:当输入框被修改且失去焦点 必须添加到form表单元素上
  • submit:点击 submit 按钮才触发
  • reset:点击 reset 按钮才触发

JavaScript event 事件对象

早期火狐不兼容 event 需要传参 ev

var ev = ev || event;
js
  • 鼠标按下/单击:mousedown,支持
    • e.button:0 左键 1 滚轮 2 右键
  • 鼠标位置:鼠标事件支持
    • e.offsetX/Y:距离当前触发元素的 left/top 值
    • e.clientX/Y:可视区 left/top 值
    • e.pageX/Y:页面文档的 top/left 值
    • e.screenX/Y:屏幕左上角 left/top 值
  • 热键:keydown 支持,按下为 true
    • e.shiftkey:Boolean
    • e.altKey:Boolean
    • e.ctrlKey:Boolean
    • e.metakey:windows —> windows键,macos —> command键
  • 键盘按下:keydown/keyup 支持
    • e.which/e.keycode:返回按下的ascll码值,不区分大小写
    • enter:13
    • shift:16
    • ctrl:17
    • alt:18
    • a:65
    • 上下左右:37 38 39 40
  • 键盘按下:keypress 仅支持字符键(DOM3 被弃用)
    • e.which/e.charCode:返回按下的 ascll 码值,区分大小写
  • 滚动
    • e.wheelDelta:chrome IE 向下 -120 向上 120
    • e.datail:firefox 向下 3 向上 -3

兼容:

e.wheelDalta ? e.wheelDalta < 0 : e.datail > 0 ;
// chrome是否存在 ? chrome < 0 是否向下为true : firefox < 0 是否向下
js

JavaScript 事件委托

  • e.target:chrome
  • e.srcElement:IE8-

兼容:

e.target || e.srcElement
js

利用 e.target.nodeName 或当前节点的 id 来委托事件

JavaScript 阻止冒泡及默认行为

阻止冒泡

  • e.cancalBubble = true:IE8- chrome
  • e.stopPropagation():firefox chrome

兼容:

e.stopPropagation ? e.stopPropagation() : e.cancalBubble = true;
js

阻止默认行为

  • 普通函数: return false
  • addEventListener:e.preventDefault() // chrome
  • attachEvent:e.returnValue = false // IE

兼容:

e.preventDefault ? e.preventDefault() : e.returnValue = false;
js

阻止IE选择事件

  • onmousedown:setCapture() 设置捕获
  • onkeydown:releaseCapture() 释放捕获

JavaScript IE、chrome 事件监听

绑定事件

chrome

addEventListener('click',fn,false)
js
  • 事件(不带on),函数
  • 默认 false 冒泡触发,true 捕捉阶段触发

IE

attachEvent("onclick",fn)
js
  • 事件(带on),函数

解绑事件

removeEventListener(oEvent,fn);// chrome
detachEvent(oEvent,fn);// IE
js

区别:

  • 事件:chrome 不带on IE 带 on
  • 函数执行顺序:chrome 顺序执行 IE 逆序执行
  • 是否支持捕捉触发:chrome 支持 IE 只支持冒泡
  • this 指向:chrome 调用对象 IE window 对象

兼容

 el.addEventListener ? el.addEventListener(event,fn,false) : el.attachEvent('on' + event,fn);
 el.removeEventListener ? el.removeEventListener(event,fn) : el.detachEvent('on' + event,fn);
js

JavaScript UI 事件

属性/方法 类型 说明
bubbles Boolean 事件是否冒泡
stopPropagation() Function Firefox chrome 取消捕捉/冒泡,bubbles为true
cancelable Boolean IE8 chrome 取消默认行为
preventDefault() Function Firefox chrome 取消默认行为。cancelable 为 true,
currentTarget Element 全等 === this
defaultPrevented Boolean 是否调用 preventDefalt()
detail integer Firefox 滚动滚轮相关信息
eventPhase integer 调用事件处理程序阶段:1 表示捕捉阶段 2 表示处于目标 3 表示冒泡阶段
stopImmediatePropagation() Function 取消捕捉/冒泡,同时阻止任何事件处理程序被调用
target Element 当前触发的元素
trusted Boolean 为 true 表示事件是浏览器生成的,false 表示 js 生成写的
type String 被触发事件的类型
view AbstractView 与事件关联的抽象视图。等同于发生事件的 window 对象
评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • 测试文章

    20点赞10评论

  • webpack5(一)

    20点赞10评论