DOM常见事件的监听

常见事件

一，鼠标事件

mouseenter：鼠标移动到元素上时出发（不支持冒泡），不能使用事件委托；

进入子元素依然属于在该元素内，没有任何反应。

mouseover：鼠标移到某元素之上（支持冒泡），先调用父元素的mouseout，再调用子元素的mouseover，因为支持冒泡，所以会将mouseover传递到父元素中；

二，常见的键盘事件

• onkeydown：某个案件被被按下，事件先发生

• onkeypress：发生在文本被输入

• onkeyup：某个按键被松开，发生在文本输入完成

区分event,key/event.code

key

code

key

定义：按下按键时返回的标识符，按键标识符是表示键盘按钮的字符串(如1，2，a等)。

使用：event.key去获取按下按键的[字符串。

keyCode

定义：按下按键时此按键值所对应的字符代码（如ESC键为27）。

使用：event.keyCode去获取按下按键的字符码。

备注：此功能已废弃，但是仍然可以使用。使用哪个取决于实现什么功能。

搜索功能：

btnEL.onlick = function(){
  console.log("进行搜索功能",inputEl.Value)
}

-- 按Enter键进行搜索
inputEl.onkeyup = function(event){
    if(event.code === "Enter"){
      console.log("进行搜索功能",inputEl.Value)
    }
}

-- 按S自动获取焦点
documnt.onkeyup = function(event){
   if(event.code === "KeyS"){
   inputEl.focus()
}
}

三，常见的表单事件

1.获取焦点和失去焦点

onfocus：元素在获取焦点时触发

onblur：元素在失去焦点时触发

2.内容发生改变/输入内容

inputEl.oninput = function (){
console.log("正在输入内容",inputEl.value)
}

inputlEl.onchange = function(){
console.log("内容发生改变",inputEl.value)
} //确定最终值的时候，内容才会发生。

3.监听重置和提交

<form action="/url">
<button type="reset">重置</button>
</form>

var formEl = document.querySelector ("form"){
    formEl.onreset = function(event){
        console.log("发生了重置事件")
        event.preventDefault() // 阻止了事件重置
    }
    formEl.onsubmit = function(event) {
        console.log("发生了提交事件")
        event.preventDefault() // 阻止了事件提交
    } // axios库提交
}

四，文档加载监听事件

• DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像 和样式表之类的外部资源可能尚未加载完成。
• loaded：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

<script>
//注册事件监听,文档解析完再回调
window.onload = function (){
var boxEl = document.querySelector(".box")
boxEl.style.backgroundColor = "red"
}

或者

widow.addEventListerner("DOMContentLoaded",function(){
}) //等内容加载完毕，img标签输入内容，img图片不属于内容的一部分

</script>
<div class = "box"></div>

6.window定时器方法

scheduling a call：

SetTimeout:

function foo (name,age,heighit) {
    console.log*("foo被调用---")
    return undefined
}
var timeoutID = setTimeout(foo,3000,"why",18,1.88)

var timeoutBtn = document.querySelector(".out")
timeout.onclick = fucntion (){
    clearTimeout(timeoutID) //取消调用
}
    

Setinterval:
clearInterval：