真的是大事件！一開始看完還不太懂各種操作上的差別
event = 事件：簡單說就是跟網頁互動，如：點擊滑鼠按鈕而去觸發事件而執行某種效果(如之前的 onclick )
MDN：一個事件的發生
例如下面例子，按鈕事件後，觸發在 console 顯示訊息
index.html
(今日的 HTML 都維持不變動)
<body>
<input type="button" value="按我" class="btn">
<script src="JS/test.js"></script>
</body>
test.js
var el = document.querySelector(".btn");
el.onclick = function(){
console.log("被按了");
}
// 點擊按鈕後，console 會出現 被按了
test.js
var el = document.querySelector(".btn");
el.onclick = function(evt){
console.log(evt);
}
// 點擊按鈕後，console 會出現很多訊息，座標資訊等等
<input type="button" value="按我" onclick="functionName();" class="btn">
element.onevent = functionName;
event 前有 on
functionName 沒有 ()
function() 內容可直接寫var el = document.querySelector(".btn");
// function 內容分開寫
function click1(){
console.log("被按了1");
};
el.onclick = click1;
var el = document.querySelector(".btn");
// function 內容寫在裡面
el.onclick = function(){
console.log("被按了1");
};
element.addEventListener('event' , functionName , BooLean);
event 有引號 ' '，前面沒有 on
functionName 沒有 ()
BooLean 可以省略，預設是 false，詳細後續說明function() 內容可直接寫var el = document.querySelector(".btn");
// function 內容分開寫
function click2 (){
console.log("被按了2");
}
el.addEventListener('click' , click2 , false);
var el = document.querySelector(".btn");
// function 內容寫在裡面
el.addEventListener('click' , function(){
console.log("被按了2");
} , false);
functionName 的 () 要不要？
()
() 代表會直接執行這個函數var el = document.querySelector(".btn");
function click(){
console.log("被按了");
};
el.onclick = click();
// 重新整理，觀察有沒有 () 在 console 的差別
事件持續進行中....
iThome鐵人賽
看影片追技術