DOM事件基础

事件基础

文章目录

事件概述

JavaScript使我们有能力创建动态页面,而事件是可以被监测到的行为

简单理解:触发——响应机制

网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。

事件三要素

事件是由三部分组成:事件源、事件类型、事件处理程序。称为事件三要素

<button id="btn">点击触发事件</button>
  1. 事件源:事件触发的对象,上述中的按钮就是事件源
let btn=document.querySelector('#btn');
  1. 事件类型:如何触发,什么事件,比如鼠标点击事件(onclick),还是鼠标经过,还是键盘按下
  2. 事件处理程序:通过一个函数赋值的方式完成
        btn.onclick=function(){
            alert('你触发了点击事件')
        }

执行事件的步骤

  1. 获取事件源
  2. 注册事件(绑定事件)
  3. 添加事件处理程序(采用函数赋值的形式)

常见的鼠标事件

鼠标事件 触发条件
onclick 鼠标点击触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开时触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
上一篇:Java实现图片倒影的源码


下一篇:引导页+ipport+登录+注册卡哇伊伊伊的娃