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

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

mouseenter

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

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

在这里插入图片描述

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

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

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

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

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

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

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

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

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

<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>

在这里插入图片描述

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript事件是指在Web页面中,通过JavaScript代码来侦测和响应用户的操作或系统的事件事件可以是用户的鼠标点击、键盘按键、页面加载完成等等。事件驱动式是指JavaScript代码通过侦测到这些事件,并执行相应的事件处理程序来响应用户的操作或系统的事件。 在JavaScript中,我们可以通过为需要事件处理的DOM元素对象添加事件事件处理程序来实现事件的绑定。具体的实现方式是,使用DOM元素对象的属性来指定事件,并将对应的事件处理程序赋值给该属性。例如,DOM元素对象.事件 = 事件处理程序; 在事件绑定过程中,需要注意不同浏览器的兼容性。W3C事件处理函数是符合W3C标准的事件处理方式,适用于大多数现代浏览器。而IE事件处理函数是针对早期版本的IE浏览器的特定事件处理方式。在编写事件处理代码时,根据需求选择合适的事件处理函数进行绑定。此外,还可以通过事件对象来获取事件相关的信息,如事件类型、触发事件的DOM元素等等。 综上所述,JavaScript事件是通过JavaScript代码来侦测和响应用户的操作或系统的事件。我们可以通过为DOM元素对象添加事件事件处理程序来实现事件的绑定。在实现事件绑定时,需要考虑不同浏览器的兼容性,并选择合适的事件处理函数进行绑定。事件对象可以提供事件相关的信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值