JavaScript - DOM事件的優化

因為如果在標簽里面寫時間的話耦合度非常低...

所以呢我們有?

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

定義和用法

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

語法注意 !參1 不帶 on 比如 onclck事件就寫? clck??！

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

參數	描述
event	必須。字符串，指定事件名。注意:?不要使用 "on" 前綴。例如，使用 "click" ,而不是使用 "onclick"。提示：?所有 HTML DOM 事件，可以查看我們完整的?HTML DOM Event 對象參考手冊。
function	必須。指定要事件觸發時執行的函數。當事件對象會作為第一個參數傳入函數。事件對象的類型取決于特定的事件。例如， "click" 事件屬于 MouseEvent(鼠標事件) 對象。
useCapture	可選。布爾值，指定事件是否在捕獲或冒泡階段執行。可能值: true - 事件句柄在捕獲階段執行 false- false- 默認。事件句柄在冒泡階段執行

2.addEventListener()?

定義和用法

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

注意：?如果要移除事件句柄，addEventListener() 的執行函數必須使用外部函數，

匿名函數，是無法移除的。

語法

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

參數值

Parameter	Description
event	必須。要移除的事件名稱。. 注意:不要使用 "on" 前綴。例如，使用 "click" ,而不是使用 "onclick"。提示:?所有 HTML DOM 事件，可以查看我們完整的?HTML DOM Event 對象參考手冊。
function	必須。指定要移除的函數。
useCapture	可選。布爾值，指定移除事件句柄的階段。可能值： true - 在捕獲階段移除事件句柄 false- 默認。在冒泡階段移除事件句柄注意:?如果添加兩次事件句柄，一次在捕獲階段，一次在冒泡階段，你必須單獨移除該事件

?注意他們的調用者是他們的元素節點??！

還是上個例子吧：

<!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>點我</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

JavaScript - DOM事件的優化2022-05-31 17:22:20

JavaScript - DOM事件的優化

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

定義和用法

語法 注意 !參1 不帶 on 比如 onclck事件 就寫? clck??！

2.addEventListener()?

定義和用法

語法

參數值

?注意他們的調用者是他們的元素節點??！

還是上個例子吧：

?

JavaScript - DOM事件的優化
2022-05-31 17:22:20

語法注意 !參1 不帶 on 比如 onclck事件就寫? clck??！

?注意他們的調用者是他們的元素節點??！