美文网首页基础JS
JS常用API手册6-事件

JS常用API手册6-事件

作者: 桃花島主 | 来源:发表于2017-11-24 10:56 被阅读2次

mouse

button 左键 滚轮 右键
W3C 0 1 2
IE 1 4 2

参考标准 可视页面
clientX 客户端[参照点page]可视区域的X坐标
clientY 客户端可视区域的Y坐标

pc(全兼容) iphone
screenX 相对于显示器屏幕的X坐标 pageX
screenY 相对于显示器屏幕的Y坐标 pageY

IE jQuery
x 相对于父元素的X坐标 jQuery.position().left
y 相对于父元素的Y坐标 jQuery.position().top

IE W3C jQuery 描述(参照点:绑定事件的对象原点)
offsetX layerX jQuery:offset().left 绑定事件对象的X坐标
offsetY layerY jQuery:offset().top 绑定事件对象的Y坐标

注:offset更好用一些,高级浏览器也支持
layer只有对象有定位信息时才好用,比如:position:absolute


W3C 描述
pageX 鼠标相对于页面的X坐标
pageY 鼠标相对于页面的Y坐标

注:相对于是整个的页面, IE下边需要自己计算


obj.offsetParent.offsetLeft
obj.offsetParent.offsetTop

属性 描述
IE srcElement 引起事件的元素
W3C target

属性 事件 描述
IE fromElement mouseover 鼠标所离开的元素
IE toElement mouseout 鼠标所进入的元素
W3C relatedTarget mouseover/mouseout

属性 事件 取值 描述
IE repeat keydown 布尔值 不断触发keydown事件

属性-方法 描述
IE returnValue 设为false表示取消事件的默认动作
W3C preventDefault

type:事件名称,不带on前缀

属性 描述 取消方法
W3C cancelable true表示默认动作可取消 preventDefault

key

属性 取值1 取值2
altKey true false
ctrlKey true false
shiftKey true false

keyCode 描述
kepress事件 按钮的unicode编码,不是字符键,属性值为0
keydown事件 按键的数
keyup事件 ----

W3C 描述
charCode 按钮的unicode编码,不是字符键,属性值为0,区分大小写

可能不兼容用keyCode内容代替
String.fromCharCode();将其转换成实际的字符串

其他属性


冒泡

  • cancelBubble(IE):设置为true取消冒泡事件
  • stopPropagation(W3C):取消事件冒泡
  • bubbles(W3C):返回true表示事件是冒泡类型

eventPhase(W3C):

  • Event.CAPTURING_PHASE(捕获阶段) 值为1
  • Event.AT_TARGET(在目标对象上) 值为2
  • Event.BUBBLING_PHASE(冒泡阶段) 值为3

  • timeStamp(W3C):返回一个时间戳

绑定事件

//W3C
addEventListener(evtType, fn, isCapture);
removeEventListener(evtType, fn, isCapture);

//IE
attachEvent("on" + evtType, fn);
detachEvent("on" + evtType, fn);

注:

  • IE中fn的this默认指向的是window[this对象冒充]
  • IE中同一个函数注册到同一个对象上可以多次[自己编写处理]
  • IE中存在内存泄露问题

浏览器原生的事件对象

evt.originalEvent

this指针的传递

fn.call(this, evt, nodes);

句柄

事件名称 描述
onblur 元素失去焦点
onchange 域的内容被改变
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onerror 在加载文档或图像时发生错误
onfocus 元素获得焦点
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onload 一张页面或一幅图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onmouseup 鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被重新调整大小
onselect 文本被选中
onsubmit 确认按钮被点击
onunload 用户退出页面

相关文章

  • JS常用API手册6-事件

    mouse 注:offset更好用一些,高级浏览器也支持layer只有对象有定位信息时才好用,比如:positio...

  • JS常用API手册1

    删除[数组,对象]的属性-变量 i的y次方 去掉数组的第一个元素 dom对象 每个标签都是一个对象 todo un...

  • JavaScript网页特效(一)

    介绍常用js的字符串操作api ❤❤❤ 介绍常用js的保留小数操作api ❤❤ 介绍常用js的大小写转换操作a...

  • JS常用API合集-事件篇

    事件Events

  • iOS ReactiveCocoa 最全常用API整理(可做为手

    iOS ReactiveCocoa 最全常用API整理(可做为手册查询) GitHub

  • JavaScript02

    今日主要内容 常用API JSON字符串 JS自定义对象三种方式 DOM事件操作类型,JS对html和css的操作...

  • vue axios cdn 封装

    1.config.js 常用域名封装: 2.utils.js 常用的方法封装: 3.api.js axios接口...

  • JS常用API手册3-Snippets

    判断数据类型 百度自动选择效果 清除文本选中状态 IE当鼠标移除窗口之后仍能捕获事件 IE释放捕获 浏览器检测 加...

  • JS常用API手册7-定位

    oDiv.clientWidth, oDiv.clientHeight 兼容性:全兼容内容区域的宽度、高度,不包括...

  • JS常用API手册7-样式

    oDiv.style //返回的是一个对象返回的是设置的style样式作用:用来设置值 实际的样式 docume...

网友评论

    本文标题:JS常用API手册6-事件

    本文链接:https://www.haomeiwen.com/subject/yqjxbxtx.html