2022-08-09_JS08_JS事件

常用的事件


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('滚动了滚动条了');

};

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容