當(dāng)前位置:首頁 > IT技術(shù) > 編程語言 > 正文

JavaScript - DOM事件的優(yōu)化
2022-05-31 17:22:20

JavaScript - DOM事件的優(yōu)化

因?yàn)槿绻跇?biāo)簽里面寫時(shí)間的話 耦合度非常低...

所以呢 我們有?

addEventListener()? 和?removeEventListener()? 方法可以捆綁和解綁事件:1.addEventListener()?

定義和用法

addEventListener() 方法用于向指定元素添加事件句柄。
注意:?Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,對于這些不支持該函數(shù)的瀏覽器,你可以使用?attachEvent()?方法來添加事件句柄?

語法 注意 !參1 不帶 on 比如 onclck事件 就寫? clck?。?/h2>

element.addEventListener(event,?function,?useCapture)

?

參數(shù)

描述

event

必須。字符串,指定事件名。


注意:?不要使用 "on" 前綴。 例如,使用 "click" ,而不是使用 "onclick"。


提示:?所有 HTML DOM 事件,可以查看我們完整的?HTML DOM Event 對象參考手冊。

function

必須。指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)。


當(dāng)事件對象會作為第一個(gè)參數(shù)傳入函數(shù)。 事件對象的類型取決于特定的事件。例如, "click" 事件屬于 MouseEvent(鼠標(biāo)事件) 對象。

useCapture

可選。布爾值,指定事件是否在捕獲或冒泡階段執(zhí)行。


可能值:

  • true - 事件句柄在捕獲階段執(zhí)行
  • false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行

?

?

?

2.addEventListener()?

定義和用法

removeEventListener() 方法用于移除由?addEventListener()?方法添加的事件句柄。

注意:?如果要移除事件句柄,addEventListener() 的執(zhí)行函數(shù)必須使用外部函數(shù),

匿名函數(shù),是無法移除的。

語法

?

element.removeEventListener(event,?function,?useCapture)


?

參數(shù)值

?

?

Parameter

Description

event

必須。要移除的事件名稱。.


注意:不要使用 "on" 前綴。 例如,使用 "click" ,而不是使用 "onclick"。


提示:?所有 HTML DOM 事件,可以查看我們完整的?HTML DOM Event 對象參考手冊。

function

必須。指定要移除的函數(shù)。

useCapture

可選。布爾值,指定移除事件句柄的階段。


可能值:

  • true - 在捕獲階段移除事件句柄
  • false- 默認(rèn)。在冒泡階段移除事件句柄

注意:?如果添加兩次事件句柄,一次在捕獲階段,一次在冒泡階段,你必須單獨(dú)移除該事件

?

?注意他們的調(diào)用者是他們的元素節(jié)點(diǎn)啊!

還是上個(gè)例子吧:

<!doctype?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"
??????????content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>javascript?study</title>
</head>
<body>
<p>點(diǎn)我</p>

<script?type="text/javascript">
????let?ele?=?document.getElementsByTagName('p')[0];
????ele.addEventListener("click"?,fun,false);

????function?fun(){
????????document.write("ok!");
????}
</script>
</body>
</html>

?

?



作者:??咸瑜???


本文摘自 :https://blog.51cto.com/u

開通會員,享受整站包年服務(wù)立即開通 >