一、FocusEvent
不能事件委托,仅用于input,textArea,select,a
focus 聚焦
blur 失焦
属性:relatedTarget--上一次聚焦的位置
<form action="#">
<input type="text" name="user">
<button type="button">提交</button>
</form>
<script>
//通过选择器获取input元素
let input = document.querySelector('input');
//为input添加事件侦听
input.addEventListener('focus',focusHandler);
input.addEventListener('blur',focusHandler);
// relatedTarget--上一次聚焦的位置
//事件回调函数
function focusHandler(e) {
console.log(e);
}
</script>
可以事件委托,可以用表单和表单元素
focusin 聚焦
focusout 失焦
<form action="#">
<input type="text" name="user">
<button type="button">提交</button>
</form>
<script>
let form = document.querySelector('form');
form.addEventListener('focusin',focusHandler);
form.addEventListener('focusout',focusHandler);
function focusHandler(e){
console.log(e);
}
</script>
二、InputEvent
input 输入时触发事件,可以委托给父元素
InputEvent的一些重要属性
- data:"a" 每次输入的内容
- isComposing: true 是否输入法输入
- inputType: "insertCompositionText" 输入的类型
- 以下为输入的类型inputType
- insertCompositionText 输入插入
- historyUndo 历史返回
- insertText 插入文本
- deleteContentBackward 退格删除(删除前一个)
- deleteContentForward delete删除(删除后一个)
- deleteByCut 剪切删除
- insertFromPaste 粘贴插入
<form action="#">
<input type="text" name="user">
<button type="button">提交</button>
</form>
<script>
let input = document.querySelector('input');
input.addEventListener('input', inputHandler);
function inputHandler(e){
console.log(e);//每输入一个,都会打印这个事件
}
</script>
三、节流和防抖
文本框在输入的时候,如果每输入一次就判断一次,会造成效率太低,我们让它每间隔一段时间,再去验证。如上面输入框里输入时,每输入一次,都会很快打印侦听的事件,我们可以通过定时器节流和时间戳节流
节流:第一次进入执行程序,在一定时间内不能再次进入,等待时间过后再次进入,然后又不能进入
1、定时器setTimeout节流
<form action="#">
<input type="text" name="user">
<button type="button">提交</button>
</form>
<script>
let input = document.querySelector('input');
input.addEventListener('input', inputHandler);
let id;
function inputHandler(e){
if(id) return;
id = setTimeout(()=>{
clearTimeout(id);
id = undefined;
console.log(input.value);
},500)
}
</script>
2、时间戳节流
<form action="#">
<input type="text" name="user">
<button type="button">提交</button>
</form>
<script>
let input = document.querySelector('input');
input.addEventListener('input', inputHandler);
var lastTime = 0;
function inputHandler(e){
let nowTime = new Date().getTime();
if(nowTime-lastTime>500){
lastTime = nowTime;
console.log(this.value);
}
}
</script>