mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)相关的知识，希望对你有一定的参考价值。
这里写目录标题
mouseEvent事件
| mouseEvent | 事件 |
|---|---|
| click | 点击 //PointerEvent 继承MouseEvent |
| dblclick | 双击 |
| mousedown | 鼠标按下键 |
| mouseup | 鼠标释放键 |
| mouseover | 鼠标滑过 子元素会收到事件并且向上冒泡 |
| mouseout | 鼠标滑出 子元素会收到事件并且向上冒泡 |
| mouseenter | 鼠标进入 子元素不会收到事件也不会冒泡 |
| mouseleave | 鼠标离开 子元素不会收到事件也不会冒泡 |
| mousemove | 鼠标移动 |
| contextmenu | 右键菜单 |
.div1
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 3000px;
.div2
width: 50px;
height: 50px;
background-color: yellow;
margin: 50px;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* left: 25px;
top: 25px; */
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<script>
var div1=document.querySelector(".div1");
div1.addEventListener("click",clickHandler);
function clickHandler(e)
// e.type
console.log(e.type);//事件类型
console.log(e)
</script>
知识卡片
cancelBubble: false取消冒泡，设置为true取消冒泡 兼容写法currentTarget事件监听的对象 等同于thistarget srcElement事件触发的目标对象
关于mouse位置的几个坐标描述
| 方法 | 描述 |
|---|---|
| clientX: 63clientY: 60： | 相对视口距离 视口就是当前可视窗口左上角 |
| x: 63 y: 60 | 相对视口距离 视口就是当前可视窗口左上角 |
| layerX: 30 | 如果目标元素没有定位时，这个是相对父级的定位元素的左上角距离 |
| layerY: 27 | 如果目标元素定位时，相对目标元素的左上角距离 |
| offsetX: 30offsetY: 28 | 相对e.target 目标元素的左上角距离 |
| movementX，movementY | 鼠标相对上次移动的距离 向上和左都是负数，右和下都是正数 |
| pageX，pageY | 鼠标相对页面的左上角距离 |
| screenX，screenY | 鼠标相对屏幕左上角距离 |
focus聚焦事件
表单元素和超链接 可以接受聚焦事件
form不接受input的focus冒泡事件,也就是说点击哪个就是那个
<form action="#">
<input type="text">
<input type="password">
</form>
<script>
var input=document.querySelector("input");
var pass=document.querySelector("[type=password]");
var form=document.querySelector("form");
input.addEventListener("focus",focusHandler);
pass.addEventListener("focus",focusHandler);
function focusHandler(e)
console.log(e)
// e.relatedTarget 上一次聚焦的对象
</script>
blur 失焦事件,也没有冒泡发生
<form action="#">
<input type="text">
<input type="password">
</form>
<script>
var input=document.querySelector("input");
var pass=document.querySelector("[type=password]");
var form=document.querySelector("form");
pass.addEventListener("blur",focusHandler)
input.addEventListener("blur",focusHandler)
function focusHandler(e)
console.log(e)
// e.relatedTarget 上一次聚焦的对象
</script>
focusin focusout 表单的聚焦事件，一般支持冒泡
<form action="#">
<input type="text">
<input type="password">
</form>
<script>
var input=document.querySelector("input");
var pass=document.querySelector("[type=password]");
var form=document.querySelector("form");
form.addEventListener("focusin",focusHandler);
form.addEventListener("focusout",focusHandler);
function focusHandler(e)
console.log(e)
// e.relatedTarget 上一次聚焦的对象
</script>
input事件
| 方法 | 描述 |
|---|---|
| e.data: “s” | 当前输入的内容 |
| e.inputType:“insertCompositionText” | 输入类型 |
| e.isComposing:true | 是否开启了输入法 |
节流(thorttle):
高频事件触发
每次触发事件时设置一个延迟调用方法
并且取消之前的延时调用方法。
概述:每次触发事件时都会判断是否等待执行的延时函数。
<form action="#">
<input type="text">
<input type="password">
</form>
<script>
var ids; //开关
var input=document.querySelector("input");
input.addEventListener("input",inputHandler);
// 节流
// 每次高频触发事件时，设置一个延迟执行，在这段时间内部继续触发，
// 直到上次的延迟执行完成后，再次触发
function inputHandler(e)
// ids默认是undefined，进入后转换为布尔值不为真，所以不跳出
if(ids) return;
// setTimeout会返回一个非0的数值，这个数值是针对这次setTimeout的堆中的回调函数索引
// 通过clearTimeout删除这个索引所对应的函数
ids=setTimeout(function()
// 根据索引删除setTimeout对应的回调函数
clearTimeout(ids);
// 将ids变量重新设置为undefined，这样就可以再次进入这个input事件了
ids=undefined;
// 打印input的结果
console.log(input.value);
,500)
</script>
mouseWheel(滚轮事件)
<script>
document.addEventListener("DOMMouseScroll",mousewheelHandler);//火狐浏览器
document.addEventListener("mousewheel",mousewheelHandler);//谷歌浏览器
function mousewheelHandler(e)
// console.log(e)
/*统一向上是1，向下是-1*/
var detail;
if(e.deltaY)
detail=e.deltaY/Math.abs(e.deltaY);
else
detail=e.detail/Math.abs(e.detail);
console.log(detail)
/*
mousewheel
向上
deltaX: -0
deltaY: 2
deltaZ: 0
detail: 0
wheelDelta: -6
wheelDeltaX: 0
wheelDeltaY: -6
DOMMouseScroll
向上
detail: 1
*/
</script>
以上是关于mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)的主要内容，如果未能解决你的问题，请参考以下文章
AS3 MouseEvent.RIGHT_MOUSE_UP 不起作用
如何仅执行 qgraphicsitem 的 mouseevent ？ （忽略 qgraphicsview 的其余 mouseevent）