事件三要素
1、 事件源:绑定事件的节点
2、事件处理函数:当事件发生时,执行的代码(函数体)
3、事件类型:(单击,hover ,move等等)
书写格式:
元素节点.addEventListener(事件类型,事件处理函数,事件流)
// DOM2删除事件
// 书写格式:事件源.removeaddEventListener(事件类型,事件处理函数的名字 )
// item.removeaddEventListener("click",事件处理函数 )
// item.removeaddEventListener("click",事件处理函数 )
列举常用的几个键盘事件:
// 键盘按下时
document.addEventListener("keydown",function(e){
console.log(`按键盘${e.key}`);
})
// keypress只识别字符键(数字、字母、标点符号、回车)
document.addEventListener("keypress",function(){
console.log("按键盘");
})
// 键盘抬起时
document.addEventListener("keyup",function(){
console.log("抬起键盘");
})
列举几个常用的表单事件
let inputEle=document.querySelector("input");
// 焦点事件
inputEle.addEventListener("focus",function(e){
e.target.style.outline="1px solid red";
});
// 输入事件
inputEle.addEventListener("input",function(e){
let str=e.target.value;
let re=/3/;
if(re.test(str)){
window.alert("buxushuru3");
}
});
// 失去焦点
inputEle.addEventListener("blur",function(e){
e.target.style.outline="";
});
// 内容发生变化时(失去焦点后内容是否发生变化)
inputEle.addEventListener("change",function(e){
console.log("f70");
})