DOM注册事件以及删除事件

简介: 注册事件以及删除事件注册事件(绑定事件)注册事件也就是给元素添加事件,成为注册事件或者绑定事件。

注册事件以及删除事件

注册事件(绑定事件)

注册事件也就是给元素添加事件,成为注册事件或者绑定事件。

注册事件的方法有两种:

  1. 传统方法注册事件
  2. 方法监听注册事件

那么这两种方法有什么区别呢?

传统方法注册事件

传统方法注册事件,就是直接在元素上添加事件属性,然后给事件属性赋值,这个值就是事件处理函数。

我们事件经常利用on开头,比如onclickonmouseoveronmouseout等等。

这种方法注册事件有一个特性:唯一性

也就是说,如果一个元素上有多个事件,那么这个元素上只能有一个事件处理函数。如果有多个事件注册,那么最后一个注册事件会覆盖前面的事件。

方法监听注册事件

这是w3c的标准,也是我们推荐使用的方法。

方法监听注册事件,就是利用addEventListener方法来注册事件。

Element[i].addEventListener(event, function, useCapture);
复制代码

这个方法有三个参数:

  1. event:事件类型,比如clickmouseovermouseout等等。
  2. function:事件处理函数。
  3. useCapture:是否在捕获阶段执行事件处理函数。默认值为false,表示在冒泡阶段执行事件处理函数。

注意:

ie8及以下版本不支持这个方法。  看来好东西都是有兼容性的问题。

这个方法的特点呢,就是不会出现唯一性问题,也就是说,如果一个元素上有多个事件,那么这个元素上可以有多个事件处理函数。它会按照我们注册事件的顺序依次执行。

删除事件(解绑事件)

在实际开发中,我们可能会遇到这样一个问题,在用户点击某一个按钮之后,我们希望那个按钮所绑定的事件是一次性的,这个时候就需要在事件处理函数执行完毕之后将这个事件给删除掉。

这个时候就需要用到删除事件的方法了。

方法监听注册方式

1. removeEventListener

eventTarget.removeEventListener(type, listener[, useCapture]);
复制代码

参数

  • type:事件类型,比如click,mouseover等等
  • listener:事件处理函数
  • userCapture:是否捕获阶段执行

2. detachEvent

eventTarget.detachEvent(type, listener);
复制代码

参数

  • type:事件类型,比如click,mouseover等等
  • listener:事件处理函数

传统注册方式

eventTarget.onxxx = null

eventTarget.onxxx = null;
复制代码

参数

  • eventTarget:事件目标
  • onxxx:事件类型,比如onclick,onmouseover等等


相关文章
|
5月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
1月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
20 5
|
6天前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
8 0
|
1月前
|
前端开发 JavaScript
CSS中禁用DOM事件
CSS中禁用DOM事件
|
3月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
37 0
|
5月前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
38 0
|
XML JavaScript 前端开发
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
183 0
|
5月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
53 0
|
10月前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
50 2