常用的事件
1, 鼠标事件
鼠标事件,页面所有元素都可触发鼠标事件;
click:当单击鼠标按钮并在松开时触发
onclick
= function() {
console.log('单击了鼠标');
};
dblclick: 当双击鼠标按钮时触发。
ondblclick
= function() {
console.log('双击了鼠标');
};
mousedown:当按下了鼠标还未松开时触发。
onmousedown
= function() {
console.log('按下鼠标');
};
mouseup: 释放鼠标按钮时触发。
onmouseup
= function() {
console.log('松开了鼠标');
};
mouseover:当鼠标移入某个元素的那一刻触发。(只要鼠标在元素内移动就会重复触发)
onmouseover
= function() {
console.log('鼠标移入了');
};
mouseout:当鼠标刚移出某个元素的那一刻触发。
onmouseout
= function() {
console.log('鼠标移出了');
};
mousemove:当鼠标指针在某个元素上移动时触发。
onmousemove
= function() {
console.log('鼠标移动了');
};
mouseenter:当鼠标移入某个元素的那一刻触发。(只要鼠标还在元素内就不会重复触发)
onmouseenter
= function() {
console.log('鼠标移入了');
};
mouseleave:当鼠标刚移出某个元素的那一刻触发。
onmouseleave
= function() {
console.log('鼠标移出了');
};
contextmenu: 鼠标右键菜单
selectstart: 开始选中
可以用preventDefault()禁用上述事件
2. 键盘事件
键盘事件,在键盘上按下键时触发的事件;(一般由window对象或者document对象调用)
keydown:当用户按下键盘上某个键触发,如果按住不放,会重复触发。
keyCode值不区分大小写,统一为大写的值
window.onkeydown
= function() {
console.log(按下了键盘上的某个键);
};
keypress:当用户按下键盘上的字符键(不包括功能键如方向键、ctrl\shift等)触发,如果按住不放,会重复触发
keypress的keyCode值区分大小写 A65 a97
window.onkeypress
= function() {
console.log('按下了键盘上的字符键');
};
keyup:当用户释放键盘上的某个键触发。
window.onkeyup
= function() {
console.log(松开键盘上的某个键);
};
3. HTML事件
HTML事件,跟HTML页面相关的事件;
load:当页面完全加载后触发
window.onload
= function() {
console.log('页面已经加载完毕');
};
unload:当页面完全卸载后触发
window.onunload = function() {
console.log('页面已经卸载完毕');
};
select:当用户选择文本框(input或 textarea)中的内容触发。
input.onselect = function() {
console.log('选择了文本框中的内容');
};
change:当文本框(input或 textarea)内容改变且失去焦点后触发。
input.onchange = function() {
console.log('文本框中内容改变了');
};
focus:当页面或者元素获得焦点时触发。
input.onfocus=function() {
console.log('文本框获得焦点');
};
blur:当页面或元素失去焦点时触发。
input.onblur=function() {
console.log('文本框失去焦点');
};
submit:当用户点击提交按钮在<form>元素节点上触发。
form.onsubmit=function() {
console.log(‘提交form表单’);
};
reset:当用户点击重置按钮在<form>元素节点上触发。
form.onreset=function() {
console.log('重置form表单');
};
scroll:当用户滚动带滚动条的元素时触发。
window.onscroll=function() {
console.log('滚动了滚动条了');
};