当前位置：网站首页>mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)

mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)

2022-07-25 21:42:00 【勇敢*牛牛】

这里写目录标题

mouseEvent事件
节流(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 事件监听的对象等同于this
target 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>