当前位置: 代码迷 >> 综合 >> js 注册事件的两种方式详解,传统注册事件与方法监听注册事件(addEventListener)
  详细解决方案

js 注册事件的两种方式详解,传统注册事件与方法监听注册事件(addEventListener)

热度:27   发布时间:2024-03-07 04:27:11.0

在这里,我对js注册事件的两种方式做一个详解,他们分别是传统的注册事件和方法监听注册事件,下面来做一个详细的比较

 

传统注册事件:

利用on开头的事件 如onclick

特点:注册事件的唯一性,同一个元素只能设置一个处理函数最后注册的处理函数将会覆盖前面注册的所有处理函数

 

方法监听事件注册方式 :

addEventListener() 是一个方法

特点:同一个元素,同一个事件可以注册多个监听器 ,多个事件处理程序

用法 addEventListener(type,listener[useCapture])
???????参数

type:需要监听的事件类型,如click, mouseover, 注意这里是不需要加 on

listener:事件处理函数,事件发生时,会调用的函数

useCapture:可选参数,布尔值,默认为false

 

下面我们来体验一下吧

先做两个按钮


<button>传统注册事件</button>
<button>方法监听注册事件</button>

js代码

   const btn = document.querySelectorAll('button')//传统注册事件btn[0].onclick = function () {alert('这是传统的注册事件方法')}//方法监听注册方法btn[1].addEventListener('click',function () {alert('这是方法监听注册事件方法')})btn[1].addEventListener('click',function () {alert('这是方法监听注册事件方法,第二个事件监听')})