JavaScript事件类型和事件处理程序

● 之前我们用过了很多此的点击事件,这次让我们来学习另一种事件类型

mouseenter

"mouseenter" 是一个鼠标事件类型,它在鼠标指针进入指定元素时触发。

javascript 复制代码
const h1 = document.querySelector('h1');
h1.addEventListener('mouseenter', function (e) {
  alert('你正在查看H1标题的内容');
});

当鼠标放上去的时候就会触发弹窗;

● 除了上面的写法,我们还有另一种写法

javascript 复制代码
const h1 = document.querySelector('h1');
h1.onmouseenter = function (e) {
  alert('你正在查看H1标题的内容');
};

● 这个和上面实现效果一样,这个会反复的出发,你每次鼠标移动至H1就会触发,我们也可以只让它使用一次;

javascript 复制代码
const h1 = document.querySelector('h1');
const alertH1 = function (e) {
  alert('你正在查看H1标题的内容');
  h1.removeEventListener('mouseenter', alertH1);
};
h1.addEventListener('mouseenter', alertH1);

● 当然,我们也可以添加一个定时器来操作删除事件

javascript 复制代码
const h1 = document.querySelector('h1');
const alertH1 = function (e) {
  alert('你正在查看H1标题的内容');
};
h1.addEventListener('mouseenter', alertH1);

setTimeout(() => h1.removeEventListener('mouseenter', alertH1), 3000);

● 我们还可以直接再HTML元素中添加事件,当然这再实际的生产中并不常见

javascript 复制代码
<div class="header__title">
            <h1 onmouseenter="alert('我是H1标题')">
          When
          <!-- Green highlight effect -->
          <span class="highlight">banking</span>
          meets<br />
          <span class="highlight">minimalist</span>
        </h1>
            </div>
相关推荐
拾忆,想起5 小时前
Redis复制延迟全解析:从毫秒到秒级的优化实战指南
java·开发语言·数据库·redis·后端·缓存·性能优化
前端开发爱好者5 小时前
下一代全栈框架:Deno + Vite 的结合体!
前端·javascript·后端
CUGGZ5 小时前
前端部署,又有新花样?
前端·javascript
Zz_waiting.5 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
点云侠6 小时前
解决Visual Studio 2022编译工程速度慢的问题
开发语言·c++·ide·算法·计算机视觉·visual studio
前端开发爱好者6 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者6 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
脚踏实地的大梦想家6 小时前
【Go】P2 Golang 常量与变量
开发语言·后端·golang
张璐月6 小时前
go docker-compose启动前后端分离项目 踩坑之旅
开发语言·docker·golang
BillKu6 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js