JS--addEventListener()

超、凢脫俗 2022-06-16 23:44 190阅读 0赞

刚刚在做百度笔试题的时候发现有关于addEventListener这个方法，所以现在想了解多一点~~

去菜鸟驿站和其他的网站下学习了一下关于：addEventListener()方法--用于向指定的元素添加事件句柄。

它是为元素添加点击事件的，当用户点击元素的时候，会触发事件的发生。

例如，我们在这里给出一段代码：

docuemnt.getElementById("myBtn').addEventListener("click",function()\{

document.getElementById("demo").innerHTML="Hello World";

\});

\*\*关于浏览器的支持，IE8以及更早的IE版本是不支持addEventListener()方法的，Opera 7.0及Opera等更早的版本也是不支持的。

\*\*语法

element.addEventListener(event,function,useCapture)  、

event ：指的是事件名，必须的，而且是字符串。

function： 也是必须的，指定事件出发时执行的函数。当事件对象会作为第一个参数传入函数，事件对象的类型取决于特定的事件。例如"click"是属于MouseEvent（鼠标事件）对象。

useCapture：可选的值，布尔值，指定事件是否在捕获或者冒泡阶段执行。true-事件句柄在捕获阶段执行。false-默认值，事件句柄在冒泡阶段执行。

【1】我们可以通过函数名来引用外部的函数。

document.getElementById("myBtn").addEventListener("click",myFunction);

【2】我们可以在文档中添加很多事件，添加的事件是不会覆盖已存在的事件的。

document.getElementById("myBtn").addEventListener("click",myFunction);

document.getElementById("myBtn").addEventListener("click",someOtherFunction);

【3】还可以在同一个元素添加不同的类型的事件

document.getElementById("myBtn").addEventListener("mouseover',myFunction);

docuement.getElementById("myBtn").addEventListener("click",someOtherFunction);

【4】当传递参数值时，使用匿名函数调用带参数的函数

document.getElementById("myBtn").addEventListener("click',function()\{

myFunction(p1,p2);

\});

【5】使用可选参数useCapture来演示冒泡和捕获阶段的不同：

document.getElementById("myDiv").addEventListener("click',myFunction,true);//这个是从捕获的阶段来执行

\*\*我们这里先谈谈捕获阶段和冒泡阶段的区别：

捕获阶段这要是从最不精确的对象开始触发，直到最精确的对象。

冒泡阶段是从最精确的对象开始触发，直到最不精确的。

我们形象地说出其实就是：捕捉就是从window-document-html-body-div-ul-li-a; 而冒泡的顺序正好和捕捉相反： a-li-ul-div-body-html-document-window。

之前提到过IE8以及更早的版本是不支持addEventListener()事件的，所以我们这里有另一个方法来适应跨浏览器

attachEvent()方法来替代。

var x=document.getElementById("myBtn");

if(x.addEventListener)\{

x.addEventListener("click",myFunction);

\}

else if(x.attachEvent)\{

x.attachEvent("onclick","myFunction");

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读