Skip to main content

事件

全局时间​

事件环境​

  • 元素监听事件
    • DOM0
    • DOM1
  • 自定义事件

基础知识点​

事件种类​

点击类
click
dblclick
mouseup
mousedown
拖拽类DOM2 名称DOM0 名称说明
拖动dragondrag当拖动元素或选中的文本时触发。
拖动结束dragendondragend当拖拽操作结束时触发
dragenterondragenter当拖动元素或选中的文本到一个可释放目标时触发（见
dragexitondragexit当元素变得不再是拖动操作的选中目标时触发。
dragleaveondragleave当拖动元素或选中的文本离开一个可释放目标时触发。
dragoverondragover当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。
dragstartondragstart当用户开始拖动一个元素或选中的文本时触发（见开始拖动操作）。
dropondrop当元素或选中的文本在可释放目标上被释放时触发（见执行释放）。

事件冒泡​

documnet.addEventListener('click', callback, 冒泡开关/true/false);

false - 事件冒泡的走向是由 子节点向父节点 触发同名事件
true  - 事件冒泡的走向是由 父节点向子节点 触发同名事件

一、自定义事件​

//创建一个 event_name事件,不传递数据
const tar = new Event('event_name'); 

//创建一个传递数据的事件,必须传入一个option { detail:{../} }作为容器
const tarWithData = new CustomEvent('event_name',{detail:{data:'data'}});

//option
{
    detail:{//此处存放要传输的数据},
    bubbles: true,    //是否冒泡
    cancelable: false //是否取消默认事件
}
//监听一个 event_name 事件
xxxx.addEventListener('event_name',(e)=>{
    e.detail.xxx //读取对应的内容
}));

二、元素事件绑定&移除​

DOM 0级事件绑定​

相当于给一个元素的属性赋值,只能赋一个值,后面如果再赋值就会覆盖前面的值,所以说DOM0级事件只可以绑定一次,如果绑定多次,后面的会把前面的给覆盖了,因为是一个赋值的过程,一个属性只能赋一个值

语法：​

元素.事件行为=函数 document.{标签名} = eventCallback

// 元素.事件行为=函数
document.{标签名} = eventCallback

// 绑定
document.body[`on${event}`] = e => {
    e.stopPropagation();
    e.preventDefault();

    if (callback) callback(e);
};

// 移除
// 元素的事件行为,本身默认值就是null,把null这个值赋值回去就可以了
document.body[`on${event}`] = null

特点：​

  • DOM0级事件都是在冒泡阶段发生的
  • 一个元素只能绑定一个事件函数
  • DOM0级事件兼容任何浏览器
  • 所有事件均以onXxxx命名

DOM 2级事件绑定​

DOM2级事件有兼容性(attachEvent),现在微软已经放弃IE8及以下了,所以一般我们很少对它做处理了,但是个别的要进行处理,所以我们要进行判断一下,window下如果有addEventListener我们就用addEventListener,如果没有我们就不用addEventListener

语法：

eventTarget.addEventListener(
    eventTag:string,          // 事件名称
    eventCallback:Function,   // 回调函数
    capTrue:boolean = false   // 是否冒泡
)

capTrue
    false - 事件冒泡的走向是由 子节点向父节点 触发同名事件
    true  - 事件冒泡的走向是由 父节点向子节点 触发同名事件
// 事件绑定，可以绑定多个事件
const body=document.body
body.addEventListener('click', callback1, true)
body.addEventListener('click', callback2, true)

// 解除绑定
body.removeEventListener('click', callback2) // 仅移除callback2，这里不影响callback1

特点：

  • 级事件同一个事件行为可以绑定多个函数,执行顺序与绑定顺序相同

兼容IE​

// 先触发 后定义 IE7 8弃用
element.attachEvent(type,callback) - 事件监听函数1
(删除监听)detachEvent(event,callback)
if(typeof btn.addEventListener === 'function'){
  btn.addEventListener('click',fn);

}else if(typeof btn.attachEvent === 'function'){
  btn.attachEvent('onclick',fn)
}else{
  btn.onclick=function(){
    // do something
  }
}