js-事件学习

// 键盘按下时 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”); })