// 键盘按下时
document.addEventListener(“keydown”,function(e){
console.log(“按下键盘”,e.key,e.keyCode);
})
// keypress只识别字符键(数字,字母,标点符号,回车)
document.addEventListener(“keypress”,function(e){
console.log(“按键盘”);
})
// 键盘抬起时
document.addEventListener(“keyup”,function(e){
console.log(“抬起键盘”);
})
/*
事件委托
适用场景:
1.多个子元素,绑定相同事件类型、执行同一个事件函数
2.子元素是动态
*/
// 获取元素
let olEle = document.querySelector("ol");
olEle.addEventListener("click",function(e){
if(e.target.localName == "li"){//只能识别小写的字母
e.target.classList.toggle("box");
}
if(e.target.nodeName == "P"){//只能识别大写的字母
e.target.classList.toggle("box1");
}
})
let inpEle = document.querySelector(“input”);
// 焦点事件
inpEle.addEventListener(“focus”,function(e){
e.target.style.outline = “2px solid red”;
});
// 失去焦点 focusout也可以
inpEle.addEventListener(“blur”,function(e){
e.target.style.outline = “”;
});
// 输入事件(只要输入就触发)
inpEle.addEventListener(“input”,function(e){
let str = e.target.value;
console.log(“a”);
let re = /5/;
if(re.test(str)){
window.alert(“输入的字符不合法!!”);
}
});
// 内容发生变化时(失去焦点后,判断内容是否发生变化)
inpEle.addEventListener(“change”,function(){
console.log(“f70”);
})