【前端】關於事件的程式碼片段
阿新 • • 發佈:2018-11-17
關於一些事件的程式碼片段:
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.