JavaScript中的事件

事件分类

事件分为三大类:鼠标事件、按键事件、HTML事件

鼠标事件:

click:鼠标单击时触发

box.onclick=function(){

console.log('我被单击了')}

dblclick:双击时触发

box.onclick=function(){console.log('我被双击了')}

mousedown:鼠标按下时触发

onmousedown = function() { console.log('按下鼠标'); };

mousemove:鼠标移动时触发

onmousemove = function() { console.log('移动鼠标'); };

mouseup:鼠标弹起时触发

onmouseup = function() { console.log('松开鼠标'); };

mouseover:当鼠标移入某个元素的那一刻触发。

onmouseover = function() { console.log('我移入了鼠标'); };

mouseout:当鼠标移出某个元素的那一刻触发

onmouseover = function() { console.log('我移出了鼠标'); };

mouseenter:当鼠标移入某个元素的那一刻触发。

onmouseenter = function() { console.log('鼠标移入了'); };

mouseleave:当鼠标移出某个元素的那一刻触发。

onmouseleave = function() { console.log('鼠标移出了'); };

//注意:mouseenter和mouseleave不会触发冒泡事件!!!

键盘事件

keydown:当用户按下键盘上某个键触发,如果按住不放,会重复触发。

onkeydown=function(){

console.log('我被按下了')}

keyup:当用户按下键盘上某个键触发,如果按住不放,会重复触发。

onkeydown=function(){

console.log('我被松开了')}

keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发

onkeypress=function(){

console.log('按下了键盘上的字符键')}

HTML事件

load:当页面完全加载后执行

document.onload=function(){

console.log('页面加载完毕')}

unload:当页面完全卸载后执行

document.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.onfocus=function(){

console.log('文本框被选中')}

submit:当用户点击提交按钮在<form>元素节点上触发

form.onsubmit=function(){console.log('提交表单')}

reset:当用户点击重置按钮在<form>元素节点上触发

form.onreset=function(){console.log('重置表单')}

scroll:当用户滚动带滚动条的元素时触发

form.onscroll=function(){console.log('滚动')}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容