JS-DOM-12(常见的鼠标、键盘、表单事件)

这篇具有很好参考价值的文章主要介绍了JS-DOM-12(常见的鼠标、键盘、表单事件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

常见的鼠标事件

  • 接下来我们来看一下常见的鼠标事件(不仅仅是鼠标设备,也包括模拟鼠标的设备,比如手机、平板电脑)
  • 常见的鼠标事件:

JS-DOM-12(常见的鼠标、键盘、表单事件),JavaScript基础内容,javascript,计算机外设,microsoft

mouseover和mouseenter的区别

mouseovermouseenter 都是 JavaScript 事件,用于检测鼠标指针进入一个元素的边界。然而,它们之间有一些关键区别:

  1. 事件冒泡(Event Bubbling):

mouseover 事件支持事件冒泡,这意味着当鼠标指针移动到一个元素上时,mouseover 事件会从该元素一直向上触发,直到到达 DOM 树的根节点。在这个过程中,所有的父元素都会收到这个事件。

相反,mouseenter 事件不支持事件冒泡。当鼠标指针进入一个元素时,只有该元素会触发 mouseenter 事件,而它的父元素不会收到此事件。

  1. 频率:

由于 mouseover 事件在整个 DOM 树中冒泡,因此它可能会比 mouseenter 事件触发得更频繁。当鼠标在子元素与父元素之间移动时,mouseover 事件可能在父元素和子元素之间来回触发,而 mouseenter 仅在进入每个元素时触发一次。

简而言之,mouseovermouseenter 的主要区别在于事件冒泡。在选择使用它们时,我们需要考虑实际需求。如果希望在整个 DOM 树中监听鼠标进入事件,那么 mouseover 可能更适合。然而,如果只关心特定元素的鼠标进入事件,那么 mouseenter 可能是更好的选择,因为它不会触发额外的事件冒泡。

常见的键盘事件

在JavaScript中,有许多与键盘事件相关的事件。这些事件能够帮助我们检测用户与键盘的交互,并根据需要执行特定的操作。以下是一些常见的键盘事件:

  1. keydown:当用户按下一个键时,触发此事件。keydown事件在按键被按下时立即触发,无论是否释放按键。如果按住按键不放,keydown事件将重复触发
  2. keyup:当用户释放一个按下的键时,触发此事件。keyup事件在按键被释放后触发。
  3. keypress:当用户按下一个字符键时,触发此事件。keypress事件在按键被按下并产生字符时触发,这意味着仅当按下的键实际上可以产生字符时(例如字母、数字、标点符号等)才会触发。特殊键(如功能键、方向键、Shift、Ctrl、Alt等)不会触发keypress事件。需要注意的是,keypress事件在现代浏览器中已被废弃,推荐使用keydown代替。

在处理这些事件时,事件对象会包含一些有用的属性,例如:

  • key:表示按下的键的值。对于字符键,key的值将是按键对应的字符;对于特殊键,将是一个代表按键的字符串,例如"Shift"、“Control”、"ArrowUp"等。
  • code:表示按下的键的物理键码。这个值在任何键盘布局下都是相同的。
  • altKeyctrlKeyshiftKeymetaKey:布尔值,表示按下时是否同时按下了Alt、Ctrl、Shift或Meta(例如,在Mac上的Command键)键。
  • 常见的键盘事件:
    JS-DOM-12(常见的鼠标、键盘、表单事件),JavaScript基础内容,javascript,计算机外设,microsoft
  • 事件的执行顺序是 onkeydown、onkeypress、onkeyup
    • down事件先发生
    • press发生在文本被输入
    • up发生在文本输入完成
  • 我们可以通过key和code来区分按下的键:
    • code:“按键代码”(“KeyA”,“ArrowLeft” 等),特定于键盘上按键的物理位置
    • key:字符(“A”,“a” 等),对于非字符(non-character)的按键,通常具有与 code 相同的值。)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keyboard Events</title>
</head>
<body>
  <input type="text" id="input-field">
  <script>
    const inputField = document.querySelector('#input-field');

    inputField.addEventListener('keydown', (event) => {
      console.log('keydown:', event.key);
    });

    inputField.addEventListener('keyup', (event) => {
      console.log('keyup:', event.key);
    });

    // 不推荐使用,仅作为示例
    inputField.addEventListener('keypress', (event) => {
      console.log('keypress:', event.key);
    });
  </script>
</body>
</html>

常见的表单事件

在HTML中,表单事件通常与表单元素(如<input><select><textarea>)一起使用。这些事件用于处理用户与表单交互,例如输入数据、选择选项或提交表单。

  • 针对表单也有常见的事件:

JS-DOM-12(常见的鼠标、键盘、表单事件),JavaScript基础内容,javascript,计算机外设,microsoft

  1. change:当表单元素的值发生改变并失去焦点时,触发change事件。这个事件在<input><select><textarea>元素上都适用。

    示例:

    codeconst inputElement = document.querySelector('input');
    inputElement.addEventListener('change', (event) => {
      console.log('Input value changed to:', event.target.value);
    });
    
  2. input:当表单元素的值发生改变时,触发input事件。与change事件不同,input事件在元素值改变时立即触发,而不是在失去焦点时。这个事件在<input><select><textarea>元素上都适用。

    示例:

    codeconst inputElement = document.querySelector('input');
    inputElement.addEventListener('input', (event) => {
      console.log('Input value changed to:', event.target.value);
    });
    
  3. focus:当表单元素获得焦点时,触发focus事件。这个事件在<input><select><textarea>元素上都适用。

    示例:

    codeconst inputElement = document.querySelector('input');
    inputElement.addEventListener('focus', () => {
      console.log('Input element is focused');
    });
    
  4. blur:当表单元素失去焦点时,触发blur事件。这个事件在<input><select><textarea>元素上都适用。

    示例:

    codeconst inputElement = document.querySelector('input');
    inputElement.addEventListener('blur', () => {
      console.log('Input element lost focus');
    });
    
  5. submit:当表单被提交时,触发submit事件。这个事件仅适用于<form>元素。通常,我们使用这个事件来验证表单数据并阻止默认的提交行为,这样我们就可以使用JavaScript来处理表单数据,例如发送Ajax请求。

    示例:

    codeconst formElement = document.querySelector('form');
    formElement.addEventListener('submit', (event) => {
      event.preventDefault(); // 阻止表单的默认提交行为
      console.log('Form submitted');
      // 在此处处理表单数据
    });
    

这些表单事件使得我们可以轻松地响应用户在表单中的交互,例如实时验证用户输入、显示自定义错误消息或处理表单数据。文章来源地址https://www.toymoban.com/news/detail-858375.html

到了这里,关于JS-DOM-12(常见的鼠标、键盘、表单事件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JSP事件——键盘、鼠标、表单

    JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作,是用户与浏览器交互最为常见的方式。 1、onclick onclick是最常见的鼠标事件,由用户使用鼠标左键点击后触发相应的函数方法。 document 指的是当前网页 (文档)对象,f

    2024年02月09日
    浏览(40)
  • 【JavaScript-13】阻止事件的默认行为+键盘表单事件

    一、阻止默认行为 1.阻止事件冒泡 event.stopPropagation(); a标签不跳转:href=“javascript:;” 2.阻止默认行为 event.preventDefault();通常写在第一行 例子: 例1)如a标签不需要写onclick直接点击便可以跳转,此处写阻止默认行为,就是阻止a的点击行为 例2)阻止默认行为,阻止右击页面自

    2024年02月09日
    浏览(49)
  • JS 鼠标事件与键盘事件

    一、鼠标事件         onclick        鼠标点击左键触发         onmouseover    鼠标经过触发         onmouseout     鼠标离开触发         onfocus        获得鼠标焦点触发         onblur         失去鼠标焦点触发         onmousemove    鼠标移动出发    

    2024年02月09日
    浏览(44)
  • JavaScript 常见鼠标事件

    常见鼠标事件类型1     1、click鼠标左键点击     2、mousedown 鼠标按下时触发     3、mouseup 鼠标弹起时触发     4、mousemove (move移动)鼠标在固定的位置一移动就触发移动,就触发     5、mouseenter 鼠标移入触发     6、mouseleave 鼠标移出触发 代码段:

    2024年02月06日
    浏览(30)
  • js常用点击、鼠标、键盘事件--详解

    JavaScript 提供了多种事件类型,包括点击事件、鼠标事件和键盘事件。您可以通过监听这些事件来响应用户的交互动作。以下是一些常见事件及其相应的 JavaScript 代码示例: 1. 点击事件: 2. 鼠标事件(例如鼠标移入、移出、移动等): 3. 键盘事件(例如按下按键、释放按键

    2024年02月12日
    浏览(58)
  • js的鼠标事件(JavaScript的鼠标事件,vue的鼠标事件)

    js鼠标事件,相关属性: vue鼠标事件,相关属性 (js鼠标事件和vue中的鼠标事件区别是省略了on字符):

    2024年02月12日
    浏览(46)
  • js之 事件监听(鼠标、焦点、键盘、文本)

    目标 :能够给DOM元素添加事件监听 什么是事件 :事件是在编程时系统内发生的动作或者发生的事情,比如用户在网页上单击一个按钮 什么是事件监听 :        就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事

    2024年02月14日
    浏览(35)
  • JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath

    js代码,鼠标在页面点击时,记录元素的Xpath 代码:  

    2024年02月15日
    浏览(49)
  • 【JavaScript】1.4 事件和DOM操作

    在这一节中,我们将讨论JavaScript的两个重要概念:事件和DOM操作。我们将通过实例和代码示例来详细解释这些概念。 JavaScript中的事件和DOM操作是前端开发中不可或缺的重要组成部分,它们为网页提供了丰富的交互性和动态性。事件驱动是JavaScript编程的核心思想之一,通过事

    2024年02月04日
    浏览(38)
  • 探索JavaScript事件流:DOM中的神奇旅程

     🎬 江城开朗的豌豆 :个人主页  🔥 个人专栏  :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 引言 1. 事件流的发展流程 1.1 传统的DOM0级事件 1.2 DOM2级事件和addEventListener方法 1.3 W3C DOM3级事件 1.4 React与Virtual DOM 2. 事件流的属性 2.1 事件捕获阶段

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包