web前端学习笔记--事件（Dom）_web onclick dom-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46493903/article/details/119809158

本文介绍了JavaScript中的事件处理，包括事件的触发-响应机制、事件绑定的三要素（事件源、事件类型、事件函数）以及事件监听。通过示例展示了如何通过HTML属性和DOM对象属性来绑定事件。还列举了常用的鼠标事件类型，如onclick、ondbclick等，并解释了这些事件在用户交互中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件（什么时机做相应的操作）

事件：在什么时候做什么事

 执行机制：触发–响应机制

 绑定事件(注册事件)三要素：

		1、事件源：给谁绑定事件 

		2、事件类型：绑定什么类型的事件 click 单击 

		3、事件函数：事件发生后执行什么内容，写在函数内部

 事件监听：JavaScript 解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立刻执行事件函数。

绑定方法（监听）：

方法一：绑定HTML元素属性

 <input type="button" value="点击有惊喜" onclick="alert('点击我做什么？')">

方法二：绑定DOM对象属性

1.获取元素

2.绑定事件

<input type="button" value="点击有惊喜" id="btn">
<script>
        var btn = document.getElementById("btn");	//获取元素
        btn.onclick = function() {					//绑定
            alert("点击我做什么");
        };
</script>

常用鼠标事件类型

• onclick 鼠标左键单击触发

• ondbclick 鼠标左键双击触发

• onmousedown 鼠标按键按下触发

• onmouseup 鼠标按键放开时触发

• onmousemove 鼠标在元素上移动触发

• onmouseover 鼠标移动到元素上触发

• onmouseout 鼠标移出元素边界触发