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>
相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端13 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧13 小时前
Promise 的使用
前端·javascript
前端康师傅14 小时前
JavaScript 作用域
前端·javascript
云枫晖14 小时前
JS核心知识-事件循环
前端·javascript
eason_fan15 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript