關於一些事件的程式碼片段：

var button = document.getElementById('button')
button.addEventListener('click', buttonClick);

function buttonClick(e) {
	console.log("Button Clicked");
	document.getElementById('header-title').textContent = "Changed";
	document.querySelector('#main').style.backgroundColor = '#f4f4f4'
 
;
	console.log(e)
	console.log(e.target) // 拿到的是button物件
	console.log(e.target.id)
	console.log(e.target.className)

	console.log(e.type) // click事件
	console.log(e.clientX) //點選時X座標
	console.log(e.clientY)

	console.log(e.altKey);
	console.log(e.ctrlKey);
	console.log(e.shiftKey);

}

var button = document.
 
getElementById('button')
var box = document.getElementById('box')
var output = document.getElementById('output')

var itemInput = document.querySelector('input[type="text"]');
var form = document.querySelector('form');

var select = document.querySelector('select');


itemInput.addEventListener('keydown'
 
, runEvent) // 輸入框的響應事件：按鍵
itemInput.addEventListener('keyup', runEvent) // 鍵向上反彈事件
itemInput.addEventListener('keypress', runEvent) // 按鍵事件

itemInput.addEventListener('focus', runEvent) // 輸入框被點亮
itemInput.addEventListener('blur', runEvent) // 輸入框失焦

itemInput.addEventListener('cut', runEvent) // 從輸入框剪下事件
itemInput.addEventListener('paste', runEvent) // 向輸入框貼上事件

itemInput.addEventListener('input', runEvent) // 任何與輸入相關的都是在這個事件類別內

button.addEventListener('click', runEvent) // 點選事件
button.addEventListener('dblclick', runEvent) // 雙擊事件
button.addEventListener('mousedown', runEvent) // 滑鼠按下事件
button.addEventListener('mouseup',runEvent) // 滑鼠彈起事件
box.addEventListener('mouseenter',runEvent) // 滑鼠進入區域
box.addEventListener('mouseleave',runEvent) // 滑鼠離開區域
box.addEventListener('mouseover', runEvent) // 滑鼠光臨元素
box.addEventListener('mouseout', runEvent) // 滑鼠離開元素
box.addEventListener('mousemove',runEvent) // 滑鼠運動事件

select.addEventListener('change', runEvent) // 選擇新的選項會出發改變事件
select.addEventListener('input', runEvent) // 和change事件幾乎一致

form.addEventListener('submit', runEvent) // 表單的提交事件

function runEvent(e) {
	e.preventDefault();// 禁止閃現特徵
	console.log('EVENT TYPE: ', e.type);
	console.log(e.target.value)

	output.innerHTML = '<h3>MouseX: ' + e.offsetX + ' </h3><h3>MouseY: ' + e.offsetY + '</h3>'
	document.body.style.backgroundColor = "rgb("+e.offsetX+","+e.offsetY+",40)";
}

涉及到的事件幾乎都是常用事件，用法也放在註釋裡了。

END.