JavaScript常用事件

最新推荐文章于 2024-01-06 00:20:24 发布

禾子逸

最新推荐文章于 2024-01-06 00:20:24 发布

阅读量97

点赞数

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

本文链接：https://blog.csdn.net/qq_43093129/article/details/115872895

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

常用事件

任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on

1. 光标【焦点事件】

选中（获取焦点）和切换一个选中（失去焦点）

<body>
测试失去焦点事件<input type="text" onblur="console.log('失去焦点')" >
测试获取焦点事件<input type="text" onfocus="console.log('获取焦点')" >
</body>

2. 点击事件

onclick：单击触发事件
ondblclick：双击触发事件

<body>
<input type="button" value="单击" onclick="console.log('触发单击事件')">
<br>
<input type="button" value="双击" ondblclick="console.log('触发双击事件')">
</body>

3. 键盘事件

onkeydown：键盘按下事件。点击键盘时触发，一直不松手一直触发
onkeyup：键盘弹起事件。按下键盘，离开时触发

<body>
<input type="text" value="点击键盘事件" onkeydown="console.log('键盘点击输入，不松手一直触发')" )">
<br>
<input type="text" value="离开键盘事件" onkeyup="console.log('键盘按下离开后触发事件')">
</body>

4. 鼠标事件

onmouseover：鼠标经过事件
onmousedown：鼠标按下事件
onmouseout：鼠标离开事件
onmouseup：鼠标弹起事件
onmousemove：鼠标移动事件

<body>
    <div id="mousediv" onmouseover="console.log('鼠标经过')"
                         onmouseout="console.log('鼠标离开')"
                         onmousedown="console.log('鼠标按下')"
                         onmouseup="console.log('鼠标弹起')"
                         onmousemove="console.log('鼠标移动')">
    </div>
</body>

5. 表单事件

onsubmit：提交事件
onreset：重置事件

<body>
<form onsubmit="console.log('提交')" onreset="console.log('重置')">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
</body>

6. 其他事件

onselect：文本选定事件
onchange：下拉列表选中项改变，或者文本框内容改变
onload：页面加载完毕。写在body标签的属性里面，load并不是在页面加载中触发的，而是在页面所有东西都加载完毕后触发

<body onload="console.log('页面加载完毕')">
<textarea name="" id="" cols="30" rows="10" onselect="console.log('文本被选中')"></textarea>
<select onchange="console.log('下拉列表改变')">
    <option value="">请选择所处位置</option>
    <option value="school">学校</option>
    <option value="factory">工厂</option>
    <option value="home">家</option>
</select>
</body>