事件随笔

最新推荐文章于 2024-04-27 09:42:47 发布

原创最新推荐文章于 2024-04-27 09:42:47 发布 · 176 阅读

CC 4.0 BY-SA版权

这篇博客介绍了JavaScript中常见的键盘事件，如keydown、keypress和keyup，以及如何监听这些事件。同时，详细阐述了表单事件的使用，如focus、input、blur和change，展示了如何在输入元素上应用这些事件来实现交互效果和数据验证。

事件三要素

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