week3.1Event事件——每天一个小总结

 

week3.1Event事件

什么是事件

程序各个组成部分之间相互通信的一种方式，也是异步编程的一种实现。 在一个事件发生之后，会产生一个Event事件对象，保存了这一次事件中所包含的所有的信息

在事件回调函数中参数的位置写入形参。JS会自动把事件对象的值传入

$('#btn').onclick = function(event){

console.log(event);

};

事件对象能做什么？ 保存事件的信息 细化事件：让事件具体细化 一个完整的事件由哪些部分组成？ 谁触发？ 如何触发？ 触发之后发生了什么？

event对象

定义

事件发生以后，会产生一个事件对象，作为参数传给监听函数。

具体的表现就是我们在回调函数中传入一个event形参，这个形参的值是JS自动传入的。

在这个事件对象中会包含这次事件的所有相关信息，包括是什么事件(鼠标/键盘)，事件的触发者，事件的目标等等。

btn.onclick = function(event){//这里面写什么都是事件对象，只是一个形参

console.log(event);// 将事件对象打印到控制台

}

基本语法

在事件回调函数中参数的位置写入形参。JS会自动把事件对象的值传入 $('#btn').onclick = function(event){ console.log(event); };

   <div>
        <input type="button" id="btn" value="按 钮">
    </div>

var btn = document.querySelector('#btn')//先获取元素
btn.onclick = function(){//事件
    alert("弹窗")
}

两个方法

preventDefault()：取消浏览器对当前事件的默认行为。

stopPropagation()：阻止事件在DOM中继续传播。

//点击按钮，弹两次
var btn = document.querySelector('#btn')//先获取元素
var div = document.querySelector('div')//先获取元素
​
btn.onclick = function(e){//事件
    alert("input")
}
div.onclick = function(e){
    alert('div')
}
​
//点击按钮，只弹按钮框，那么就要阻止传播
btn.onclick = function(e){//事件
    alert("input")
    e.stopPropagation()
}
//浏览器对当前事件的默认行为
div.oncontextmenu =function(e){//取消左击
    e.preventDefault()
}

 

eventarget接口

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口。

对于该接口的学习我们只需要了解两个方法：

addEventListener(event,callback,flag):绑定事件监听函数

removeEventListener(event,callback,flag):移除事件监听函数

到目前为止我们学习多少种为元素绑定事件的方式？.onclick .addEventListener

事件的传播

三个阶段

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。

第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。

第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

第二阶段目标阶段，在目标节点触发事件没什么太多的讲究。

这里我们容易看不懂的是捕获阶段与冒泡阶段。这两个阶段我们通常叫做事件捕获/事件冒泡。

//点击btn，先弹出div，在弹出input，true为捕获阶段
btn.addEventListener('click',function(e){
    alert('input')
},true)
div.addEventListener('click',function(e){
    alert('div')
},true)
//点击btn，先弹出input，再弹出div，false为冒泡
btn.addEventListener('click',function(e){
    alert('input')
},false)
div.addEventListener('click',function(e){
    alert('div')
},false)

阻止冒泡

如果我们需要的不是点击子级元素触发两次事件的话(通常也是不需要的)，那么我们可以阻止冒泡事件。

具体实现方法就是往回调函数中传入一个event对象的形参，这个形参对应的实参不需要我们手动添加，所以我们只管在函数内部调用就可以了。在event对象下有一个方法：stopPropagation()，这个方法就是专门用来阻止事件冒泡的。

btn.addEventListener('click',function(e){
    alert('input')
    e.stopPropagation()
},false)
div.addEventListener('click',function(e){
    alert('div')
    e.stopPropagation()
},false)

 

事件代理

原因

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

事件种类

鼠标事件

键盘事件

表单事件

触摸事件

进度事件

拖拽事件

其他事件

https://wangdoc.com/javascript/events/index.html

鼠标事件

• click：按下鼠标（通常是按下主按钮）时触发。

• dblclick：在同一个元素上双击鼠标时触发。

• mousedown：按下鼠标键时触发。

• mouseup：释放按下的鼠标键时触发。

• mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。

• mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。

• mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。

• mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。

• mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。

• contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。

• wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。

键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。

• keydown：按下键盘时触发。

• keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。

• keyup：松开键盘时触发该事件。

  <input type="text" id="txt">  

  // 键盘事件
  $('#txt').onkeyup = function(e){
      console.log(e);
  };

   

进度事件

进度事件用来描述资源加载的进度，主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。

• abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。

• error：由于错误导致外部资源无法加载时触发。

• load：外部资源加载成功时触发。

• loadstart：外部资源开始加载时触发。

• loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。

• progress：外部资源加载过程中不断触发。

• timeout：加载超时时触发。

表单事件

change:当<input>、<select>、<textarea>的值发生变化时触发。失去焦点，适用于注册用户名

input:当<input>、<select>、<textarea>的值发生变化时触发。

select:当在<input>、<textarea>里面选中文本时触发。

invalid:用户提交表单时，如果表单元素的值不满足校验条件，就会触发invalid事件。reset/submit:这两个事件发生在表单对象 上，而不是发生在表单的成员上。--form

拖拽(drag)

被拖拽元素

dragstart：当拖拽开始。

drag：拖拽中。

dragend：拖拽完成。

拖放区域

dragenter：当被拖拽元素进入时触发。

dragover：当被拖拽元素在拖放区域移动时触发。

dragleave：当被拖拽元素离开拖放区域时触发。

drop：当被拖拽元素投放到拖拽区域时触发。