JavaScript中事件相关属性，onclick、onmouseover、onmouseout、onload等等

最新推荐文章于 2021-12-15 11:35:03 发布

方形裤子的黄方块

最新推荐文章于 2021-12-15 11:35:03 发布

阅读量917

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46449470/article/details/105767306

版权

JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、事件的概念：

1、事件：

事件就是事情，发生在DOM对象或者BOM对象上的事情。是名词

如：点击事件（onclick）；鼠标移入事件（onmouseover），鼠标离开事件（onmouseout），窗口缩小（onresize），滚动窗口（onscroll）。

二、鼠标相关的事件

click：当用户单击鼠标按钮或按下回车键时触发

选中id名为"box"的元素。添加鼠标点击事件
document.getElementById("box").onclick= function(event){
    console.log("当前box被点击了")
}

dblclick：当用户双击主鼠标按钮时触发。

选中id名为"box"的元素。添加鼠标点击事件
document.getElementById("box").ondblclick= function(event){
    console.log("当前box被点击了")
}

mousedown：当用户按下了鼠标还未弹起时触发。

选中id名为"box"的元素。添加鼠标点击事件
document.getElementById("box").onmousedown= function(event){
    console.log("当前box被点击了")
}

下面都是如此使用
mouseup：当用户释放鼠标按钮时触发。

mouseover：当鼠标移到某个元素上方时触发，

mouseout：当鼠标移出某个元素上方时触发，

mouseenter：当鼠标移到某个元素上方时触发，

mouseleave：当鼠标移出某个元素上方时触发，

mousemove：当鼠标指针在元素上移动时触发。

三、键盘相关的事件

keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发（不停地触发）。

<body>
    <input type="text" id="box">
        
    </input>
</body>
选中id名为"box"的元素。添加键盘按下事件。当文本框按下键盘时，会在控制台输入内容
document.getElementById("box").onkeydown= function(event){
    console.log("当前用户按下了键盘")
}

keyup：当用户抬起了（松开了）键盘上的键，触发

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

四、window对象的相关事件：

load：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。

window.onload = function(){
    这里写要执行的代码,加载完毕后，会自动运行
}

unload：当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架集上触发。（用的非常非常少）
scroll：当用户滚动带滚动条的元素时触发。
resize：当窗口或框架的大小变化时在 window 或框架上触发。

五、表单相关的事件

blur：当页面或元素失去焦点时在 window 及相关元素上触发。

focus：当页面或者元素获得焦点时在 window 及相关元素上面触发。

select：当用户选择文本框(input 或 textarea)中的一个或多个字符触发。

change：当下拉框的选项发生改变，或者当文本框(input 或 textarea)内容改变且失去焦点后（并且内容有改变）触发。

submit：当用户点击提交按钮在元素上触发。

reset：当用户点击重置按钮在元素上触发。

方形裤子的黄方块

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中事件相关属性，onclick、onmouseover、onmouseout、onload等等

1、鼠标相关的事件 click：当用户单击鼠标按钮或按下回车键时触发 dblclick：当用户双击主鼠标按钮时触发。 mousedown：当用户按下了鼠标还未弹起时触发。 mouseup：当用户释放鼠标按钮时触发。 mouseover：当鼠标移到某...
复制链接

扫一扫

专栏目录