优化大师win7/武汉seo主管

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";
}