addeventlistener和onclick的区别(setonclicklistener的作用)

on 和 addEventListener 的区别

第一种：

第二种：

第三种：当函数fn有参数的情况下使用匿名函数来传参：

形式 ：addEventListener(event,funtionName,useCapture)

参数：

? ?? event: 事件的类型如 “click”

? ?? funtionName： 方法名

? ?? useCapture(可选)： 布尔值，指定事件是否在捕获或冒泡阶段执行。

????????????true - 事件句柄在捕获阶段执行

????????????false- false- 默认。事件句柄在冒泡阶段执行

写法：

第一种：

第二种，没参数可以直接写函数名

第三种：函数有参数时需要使用匿名函数来传递参数

1.on事件会被后面的on的事件覆盖

以onclick为例：

最终会只有弹框输出：

啦啦

这样会连续输出：

啦啦

啾啾

1.特别说明addEventListener不被 IE9 以下兼容，IE9以下用使用 addEvent()

obj.addEvent( event , funtionName );

参数：

event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）

funtionName:方法名（要参数是也是需要使用匿名函数来传参）

javascript中涉及到事件，为什么有时候有on，有时候有没有？

onclick是js里面给标签绑定点击事件的方法，通常写在html的元素上，而click方法在addEventListener()中使用，此方式可以给一个元素添加多个事件句柄，只在js中使用，可读性更强，更灵活。但前者的优先级高于后者。

addEventListener和普通.onclick的区别

addEventListener是在FireFox上的用法。

addEventListener的参数一共有三个，语法为：

element.addEventListener(type,listener,useCapture)

详解：

其中element是要绑定函数的对象。

type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。

listener当然就是绑定的函数了，记住不要跟括号

最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。

userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false

区别见下：

addEventListener添加事件与普通添加事件有区别吗？拜托了各位 谢谢

在标签中直接用onclick绑定事件，相当于对象的引用，也就如果有多个标签绑定此事件函数，其实公用同一个函数对象，在此函数中用this关键字，总是指向的是此函数定义时所属的对象，而不是此标签对象，而在js中写代码绑定事件，相当于复制一份此事件函数当做此标签对象的属性，所以在函数中用this关键字，指向的是此标签对象本身。