js 聚焦事件 focus blur input 节流 键盘事件 keydown keyup 防抖 滚轮事件

FocusEvent事件

主要针对所有表单元素和超链接,当 input 聚焦时触发 focus 事件,失去焦点时触发 blur 事件。

  • focus 获得焦距
  • blur 失去焦距
  • 事件对象中 relatedTarget 为上一个失焦对象
<input type="text" name="text" id="user">
<script>
var user=document.getElementById("user");
user.addEventListener("focus",focusHandler);
function focusHandler(e){
    // e.relatedTarget  上一个失焦对象
    console.log(e);
}
script>

InputEvent 输入事件

当 input 在输入内容时,就会触发 input 事件。

事件对象的 inputType 属性的值有:

  • insertCompositionText ,使用输入法的插入文本
  • historyUndo, 历史返回
  • insertText , 不用输入法的插入文本
  • deleteContentBackward, 删除前一个 backspace删除
  • deleteContentForward, 删除后一个 delete删除
  • deleteByCut, 剪切删除
  • insertFromPaste, 粘贴插入
<input type="text" name="text" id="user">
<script>
var user=document.getElementById("user");
user.addEventListener("input",inputHandler);
    function inputHandler(e){
        console.log(e);
        // e.data: "s"  本次输入的内容
        // e.isComposing: false  输入法是否启动
        // e.inputType 输入的类型
        // insertCompositionText 输入插入
        // historyUndo 历史返回
        // insertText  插入文本
        // deleteContentBackward 退格删除(删除前一个)
        // deleteContentForward  delete删除(删除后一个)
        // deleteByCut 剪切删除
        // insertFromPaste 粘贴插入
    }
script>

KeyboardEvent 键盘事件

keydown携带的一个参数是:keyCode,这个参数里的是每个按键的编码,我们可以通过编码来判断用户按的是哪个按键。

  • keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。字母中大小写不影响。
  • keydown,键盘按下时触发,如果键盘一直按下,则会一直触发这个事件
  • keyup,键盘抬起时触发
  • 常用的几个键码:13(回车)、37(左)、38(上)、39(右)、40(下)
document.addEventListener("keydown",keyHandler);
document.addEventListener("keyup",keyHandler);
var type="";
function keyHandler(e){
	e.code: "KeyS" // 按下的键
	e.key: "a"  //按下的键
	e.keyCode:// 16 键码   	
	e.which: //65 等同于keyCode
} 

keydown表示键盘按下时触发,如果键盘一直按下,则会一直触发这个事件。我们希望当键盘按下后,不管按了多久,都只触发一次keydown事件,可以这么来写:

document.addEventListener("keydown",keyHandler);
document.addEventListener("keyup",keyHandler);
var type="";
function keyHandler(e){
	//第一次按下时,type为空,不满足条件,执行下面的代码
	//将当前的e.type赋值给type
	//因为键盘一直是按下状态,所以会一直触发函数,此时type=e.type,所以直接跳出
    if(type===e.type)return;
    type=e.type; 
    console.log(e)
}

节流

文本框在输入的时候,如果每输入一次就判断一次,会造成效率太低,我们让它每间隔一段时间,再去验证。即指连续触发事件但是在 n 秒中只执行一次函数。

实现原理:
给 input 设置一个属性,第一次触发事件时,属性值为 false,则往下执行,500毫秒后获取 input 的值,同时删除 ids 的值;第二次输入时,当500毫秒还没到时,ids 为 true ,则直接跳出,不去获取 value 值 。在500毫秒中,只执行一次函数。

节流的定时器写法:

<input type="text" name="text" id="user">
<script>
	init();
	function init(){
	    var user=document.getElementById("user");
	     user.addEventListener("input",inputHandler);
	}
	function inputHandler(e){
	    //判断,如果input.ids为false,则往下执行
	    if(this.ids) return;
	    //500毫秒后,执行showValue函数,同时删除ids的值
	    this.ids=setTimeout(function(elem){
	    	//因为定时器函数会改变this指向,这里将this以参数的形式传进来
	        clearTimeout(elem.ids);
	        elem.ids=null;
	        showValue(elem.value);
	    },500,this);
	}
	//打印出input的值
	function showValue(txt){
	    console.log(txt);
	}
script>

节流的时间戳写法:

<input type="text" name="text" id="user">
<script>
	init();	
	function init() {
	    var user = document.getElementById("user");
	    user.addEventListener("input", inputHandler);
	}
	var lastTime=0;
	function inputHandler(e) {
	    //每次触发事件获取当前时间
	   let nowTime=new Date().getTime();
	   //若时间间隔大于500毫秒,则执行代码
	   if(nowTime-lastTime>500){
	       //重新计时
	       lastTime=nowTime;
	       showValue(this.value);
	   }
	}
	//打印出input的值
	function showValue(txt) {
	    console.log(txt);
	}
</script>

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
keydown事件,当键盘按下时触发,如果键盘一直按下,则会一直触发这个事件,我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这种情况防抖是比较好的解决方案。

实现原理:
当持续触发keydown事件时,事件处理函数handle只在停止按键500毫秒之后才会调用一次,也就是说在持续触发keydown事件的过程中,事件处理函数handle一直没有执行。

上面的例子改成防抖模式是这样的:

<input type="text" name="text" id="user">
<script>
	init();
	function init() {
	    var user = document.getElementById("user");
	    user.addEventListener("input", inputHandler);
	}
	var ids=null;
	function inputHandler(e) {
		//每次输入,把前面的定时器清除,重新开启定时器
	    if(ids !== null) clearTimeout(ids);
	    ids=setTimeout(function(){
	        showValue(this.value);
	    },500)
	}
	//打印出input的值
	function showValue(txt) {
	    console.log(txt);
	}
</script>

防抖封装:

 function debounce(fn, wait) {
    var timeout = null; //定义一个定时器
    return function () {
        if (timeout !== null)
            clearTimeout(timeout); //清除这个定时器
        timeout = setTimeout(fn, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random());
}
// 侦听事件
document.addEventListener("keydown", debounce(handle, 1000));

防抖和节流的区别

  • 防抖是将多次执行变为最后一次执行
  • 节流是将多次执行变为每隔一段时间执行

WheelEvent 滚轮事件

滚轮滚动时,会触发滚轮事件,这个事件可以在任何元素上触发,如果不阻止冒泡的话,最终都会冒泡到document对象上面。

  • 在使用滚轮事件时,一般只需要知道是向上或者向下滚动就可以。
  • 火狐浏览器使用 DOMMouseScroll
  • 其他浏览器使用 mousewheel

火狐浏览器滚轮向下滚动(页面往上)时,e.detail为3;滚轮向上滚动(页面往下)时,e.detail为-3。
chrome浏览器滚轮向下滚动(页面往上)时,e.deltaY为正数;滚轮向上滚动(页面往下)时,e.deltaY为负数。

可以根据这两个值来判断页面是向上还是向下滚动。

案例:当滚轮滚动时,让div随着滚轮滚动的方向移动:

document.addEventListener("DOMMouseScroll",mouseHandler);   
document.addEventListener("mousewheel",mouseHandler);   
var div=document.querySelector("div");
function mouseHandler(e){
	var detail;
	if(e.detail!==0)detail=e.detail;
	else detail=e.deltaY<0 ? -3 : 3;
	div.style.top=div.offsetTop+detail+"px";
}

你可能感兴趣的:(javascript)