[js] 事件对象 e.target offsetX clientX pageX

鼠标相关事件

e.target 触发事件的标签对象

  - e.target.innerText：点击标签的本文内容- e.target.tagName ：点击标签的标签名称，标签名称是大写字符- e.target.id  ：id属性值- e.target.className：class属性值         - e.target.getAttribute('name')

<div class="box" id="box1">我是div标签</div>

// 点击整个页面都可以触发事件
document.addEventListener('click', function (event) {console.log(event.target.innerText)console.log(event.target.id)console.log(event.target.className)console.log(event.target.tagName )
});

鼠标位置坐标数据

     - e.offsetX     e.offsetY    触发事件标签对象 左上角为原点的坐标 （鼠标坐标到元素的左侧的距离）- e.clientX     e.clientY     相对 视窗窗口 左上角为原点的坐标  (使用固定定位)（鼠标的坐标到页面左侧的距离）- e.pageX      e.pageY     相对 页面 左上角为原点的坐标  (跟着页面一起动)（页面X坐标位置）

键盘事件

     e.key   按键名称,有可能冲突重复e.keyCode按键编号,唯一的,不重复的e.ctrlKeyctrl 按下 是 truectrl 没按 是 falsee.altKeyalt 按下 是 truealt 没按 是 falsee.shiftKeyshift 按下 是 trueshift 没按 是 false

参考：
https://www.pianshen.com/article/68721770711/
https://www.jianshu.com/p/c0eae5eed0e9

[js] 事件对象 e.target offsetX clientX pageX相关推荐

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,可立马删除) ...
event对象的offsetX, clientX, pageX, screenX
现在需要对event对象的几大与坐标有关的属性做一个总结,以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内,不包括bor ...
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
1.offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border. 2.clientX 事件对象相对于浏览器窗口可视区域的X ...
JS事件对象 (event)
#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||wind ...
Js事件对象EventUtil
1 var EventUtil = { 2 getEvent: function(event){ //获取事件对象 3 return event ? event : window.event; 4 } ...
JS事件对象5--阻止默认事件(鼠标事件)
阻止默认事件的两种方式和兼容方式: <script type="text/javascript">//阻止系统默认事件的两种方式://1.IE:return false ...
JS 事件对象 offsetX/Y clientX Y PageX Y
offsetX Y clientX Y PageX Y offsetX/Y,内部不要包含子标签 br换行
一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况更多专业前端知识,请上 [猿2048]www.mk2048.com

[js] 事件对象 e.target offsetX clientX pageX

鼠标相关事件

e.target 触发事件的标签对象

鼠标位置坐标数据

键盘事件

[js] 事件对象 e.target offsetX clientX pageX相关推荐

最新文章

热门文章