HackMD
避免直接在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>
