【前端】关于事件的代码片段

关于一些事件的代码片段：
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.
【前端】关于事件的代码片段

猜你喜欢
