避免直接在button上寫onclick="myFunction()

tags: `JavaScript`

很多教學使用button on click點擊啟動行為常常用

<button onclick="myFunction()">Try it</button>

這種寫法,但是onclick="myFunction()寫法有資安上問題,所以六角線上課時老師建議用 document.getElementById方式去啟動Function()

貼上w3cshool範例點進去有效果展示

<html>
<body>

<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>

<p id="demo">Click me.</p>

<script>     
document.getElementById("demo").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

</body>
</html>

使用addEventListener監聽觸發

In JavaScript, using the addEventListener() method:

<html>
<body>

<p>This example uses the addEventListener() method to attach a "click" event to a p element.</p>

<p id="demo">Click me.</p>

<script>
document.getElementById("demo").addEventListener("click", myFunction);

function myFunction() {
 document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

</body>
</html>

避免直接在button上寫onclick="myFunction()

tags: JavaScript

Read more

前端測試大補帖

[7.Caching](https://web.dev/learn/pwa/caching/) 緩存

[Service workers](https://web.dev/learn/pwa/service-workers/) 暫存

[0.Learn PWA](https://web.dev/learn/pwa/#welcome-to-learn-progressive-web-apps)

tags: `JavaScript`