JS DOM 事件类型

最新推荐文章于 2023-11-20 16:42:15 发布
最新推荐文章于 2023-11-20 16:42:15 发布
阅读量117 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35112578/article/details/126121974
版权

JS DOM 事件类型

1. 鼠标事件

  1. 鼠标点击：click
  2. 鼠标经过：mouseenter
  3. 鼠标离开：mouseleave

案例1 全选 反选

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全选文本框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            text-align: center;
        }

        th {
            background-color: #09c;
            border: 1px solid #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        /* .allCheck {
        width: 80px;
      } */
    </style>
</head>

<body>
    <table border="solid">
        <tr>
            <th><input type="checkbox" id="allCheck" /> <span>全选</span></th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>

        <tr>
            <td><input type="checkbox" class="ck" /></td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck" /></td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck" /></td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>

        <script>
            // 获取元素
            let all = document.querySelector("#allCheck");
            let cks = document.querySelectorAll(".ck");
            let span = document.querySelector("span");
            console.log(all);
            console.log(cks);
            all.addEventListener("click", function () {
                for (let i = 0; i < cks.length; i++) {
                    cks[i].checked = all.checked;
                }
                all.checked === true
                    ? (span.innerHTML = "取消")
                    : (span.innerHTML = "全选");
            });

            // 小按钮的做法
            for (let i = 0; i < cks.length; i++) {
                cks[i].addEventListener("click", function () {
                    for (let j = 0; j <cks.length; j++) {
                        if (cks[j].checked === false) {
                            // 赋值号是=，不是===
                            all.checked = false;
                            span.innerHTML = "全选"
                            return;
                        }
                        
                    }
                    console.log(all.checked);
                    all.checked = true; 
                    console.log(all.checked);
                    span.innerHTML = "取消"
                }
                );
            }
        </script>
    </table>
</body>

</html>

案例2 购物车数量加减操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车数量加减操作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            display: block;
        }

        .box {
            display: flex;
            justify-content: space-between;
            width: 150px;
            height: 100px;
            border: 1px solid #c0c0c0;
        }

        .num {
            flex: 1;
            text-align: center;
            line-height: 100px;
        }

        .right {
            width: 50px;
        }

        button {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input class="num" value=0 readonly></input>
        <div class="right">
            <button class="plus">+</button>
            <button class="minus">-</button>
        </div>

    </div>
    <script>
        // 获取元素
        let num = document.querySelector('.num')
        let plus = document.querySelector('.plus')
        let minus = document.querySelector('.minus')

        plus.addEventListener('click', function () {
            num.value++
            if (num.value <= 1) {
                minus.disabled = true
            } else { 
                minus.disabled = false 
            }

        })
        minus.addEventListener('click', function () {

            num.value--
            if (num.value <= 1) {
                minus.disabled = true
            }
        })

    </script>
</body>

</html>

2. 表单焦点

1.获得焦点 ：focus
2. 失去焦点：blur
案例：搜索框，获得焦点，显示下拉菜单；失去焦点，隐藏下拉菜单。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>搜索框</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
      }

      .mi input {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
        transition: all .5s;
      }

      .mi .search {
        border: 1px solid #ff6700;
      }

      .result-list {
        display: none;
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
      }

      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }

      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" />
      <ul class="result-list">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
      </ul>
    </div>

    <script>
      // 获取对象
      let search = document.querySelector("input");
      let list = document.querySelector(".result-list");
      // 获得焦点
      search.addEventListener("focus", function () {
        search.classList.add("search");
        list.style.display = "block";
      });
      // 失去焦点
      search.addEventListener("blur", function () {
        search.classList.remove("search");
        list.style.display = "none";
      });
      // 鼠标经过
       search.addEventListener("mouseenter", function () {
        search.classList.add("search");
        list.style.display = "block";
      });
      // 鼠标离开
      search.addEventListener("mouseleave", function () {
        search.classList.remove("search");
        list.style.display = "none";
      });
    </script>
  </body>
</html>

3. 键盘事件

  1. 键盘按下：keydown
  2. 键盘抬起：keyup

4. 文本事件

  1. 用户输入：input
    案例 ：自动计算用户输入的文本字数
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算用户输入的数字</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div .bottom {
        position: relative;
        width: 200px;
      }
      textarea {
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 5px;
        text-align: left;
      }
      button {
        position: absolute;
        width: 50px;
        right: 0;
        margin: 10px 0;
        background-color: skyblue;
      }
      span {
        position: absolute;
        right: 60px;
        margin: 10px 0;
      }
       .count{
        position:absolute;
        right: 100px;
        color: red;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div>
    <!-- 使用textarea 而不是input -->
     <textarea wrap="hard" maxlength="200"></textarea>
      <div class="bottom">
        <i class="count">0</i>
        <span>/200</span>
        <button>发布</button>
      </div>
    </div>
    <script>
        let input=document.querySelector('textarea')
        let i=document.querySelector('.count')
        input.addEventListener('input',function(){
            // 获得文本域里的用户输入字符长度
          i.innerHTML=input.value.length
         
        })
    </script>
  </body>
</html>
前端新手2022
关注
专栏目录
js之DOM事件
m0_61547956的博客
04-22 3378
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
JavaScript DOM事件(笔记)
10-24
### JavaScript DOM事件流 JavaScript中的DOM事件流主要有两种模式，分别是事件冒泡和事件捕获。 #### 事件冒泡 事件冒泡是指事件从最具体的元素开始触发，然后向上传播至最不具体的节点。例如，在一个包含嵌套...
JS事件类型
A__loser的博客
05-04 386
web浏览器中可能发生的时间有很多类型。如前所述，不同的事件类型具有不同的信息，而“DOM3级事件”规定了以下几类事件 UI（User interface，用户界面）事件，当用户与页面上的元素交互时触发； 焦点事件，当元素获得或失去焦点时触发； 鼠标事件，当用户通过鼠标在页面上执行操作是触发； 滚轮事件，当用户使用鼠标滚轮（或者类似设备）时触发； 文本事件，当在文档中输入文本时触发； 键
JS中事件类型
Listner的博客
02-01 737
在页面运行中，通过触发特定元素的事件类型，可以触发该事件的绑定函数 通用的事件类型有： onload 当页面加载完成时触发 window.onload = function(){} 当页面加载完成后用此方法包裹所有的内联js代码，可以解决js获取html标签时还未加载的情况，同时提高用户体验 onblur 失去焦点时触发 标签名.onblur = function( ){ } onfoc...
JavaScript 事件类型
侯春强的博客
10-11 535
JavaScript 事件类型 ​ JavaScript 可以处理的事件类型有很多，常见的有UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件。还有专门为触摸设备和移动设备准备的触摸事件、手势事件、屏幕方向改变等。 注：冒泡事件即：事件会从层级高的传递给层级低的。
JavaScript：事件类型
山水子农
06-04 1094
我们把事件分为了三大类，分别是一般事件、表单事件和页面事件。当前我们可以再做细分： 1、UI事件：如load、unload、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。 （1）、load事件 事件类型 var image=document.getElementById("myImage"); EventUti
js中DOM事件绑定分析
11-27
JavaScript中的DOM事件绑定是网页交互的核心机制之一，它允许开发者响应用户的操作，如点击、滚动、输入等。本文主要分析JavaScript中的三种事件模型：内联模型、脚本模型以及DOM2级事件模型。 1. **内联模型**： ...
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
10-21
### JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题 #### 问题概述 在JavaScript中，为DOM元素添加事件处理程序是常用的操作之一。由于不同浏览器对事件处理的支持有所不同，因此在封装事件处理...
谈谈我对JavaScript DOM事件的理解
01-19
什么是事件？ 事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的...DOM与事件是JavaScript最核心的组成部分之一，他们赋予了页面无限的想象空间，你根本无法离开他们，否则js将寸步难行。在我们平时
原生js--事件类型
weixin_34153893的博客
02-17 142
1、表单事件： submit事件 reset事件 click事件 change事件 focus事件（不冒泡） （IE和ES5支持冒泡的focusin） blur事件（不冒泡） （IE和ES5支持冒泡的focusout） input事件（ES5 textinput提供更方便的获取输入文字的方案）   2、Window事件 load事件 DOMContentLoaded事件 r...
JS事件的几种类型
weixin_46421045的博客
06-10 273
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px;
JS的事件类型（详解）
weixin_46726346的博客
06-02 2420
摘要 Web浏览器可能发生的事件有很多种类型，而这一篇我们针对于不同的浏览器的事件类型来说明一下，我们从DOM3级事件中总结了一下几种类型的事件： 事件 类型 作用意义 UI事件 当用户在页面上的元素进行交互时触发 焦点事件 当元素获得或失去焦点时触发 鼠标事件 当用户通过鼠标在页面上执行操作时触发 滚轮事件 当使用鼠标滚轮时触发 文本事件 当在文档中输入文本时触发 键盘事件 当用户通过键盘在页面上执行操作时触发 当然除了这些类型我们还有一些其他类型的事件，不过在这里
JavaScript中的事件类型
最新发布
Blueskyzhw的博客
11-20 1277
1. 鼠标事件（Mouse Events）：包括点击、双击、鼠标移入移出、鼠标按下释放等。2. 键盘事件（Keyboard Events）：包括按键按下、按键释放、按键组合等。6. 窗口事件（Window Events）：包括窗口打开、窗口关闭、窗口刷新等。5. 触摸事件（Touch Events）：包括触摸开始、触摸移动、触摸结束等。4. 焦点事件（Focus Events）：包括元素获得焦点、元素失去焦点等。3. 表单事件（Form Events）：包括表单提交、表单重置等。
js事件类型总结
最自由的笑的博客
07-23 532
UI事件 load 当页面完全加载后触发 unload 当页面完全卸载后触发 abort 停止下载时，载入的内容没有加载完触发 error 发生错误时触发 select 当用户选择文本框中的一个或多个字符时触发 resize 当窗口大小发生变化时触发 scroll 当用户滚动带滚动条元素中的内容时，在该元素上面触发 ps：鼠标滚轮可以触发键盘上下键也可以触发 焦点事件 blur 在元素失去焦点时触
js事件类型及处理
aciqe1836的专栏
05-16 428
1.事件类型 onClick单击事件 onMouseOver鼠标经过事件 onMouseOut 鼠标移出事件 onChange文本内容改变事件 onSelect文本框选中事件 onFocus光标聚集事件 onBlur移开光标事件 onLoad网页加载事件 onUnload关闭网页事件 2.事件处理 1.HTML事件处理 直接添加到HTMl结构中 2.DOM0级事件处理
介绍js各种事件
weixin_64965154的博客
06-02 9542
当用户将该元素拖到可放置的元素上并释放鼠标按钮时，将移动该元素到可放置的元素中。在这个例子中，我们获取了ID为“myElement”的元素，并使用addEventListener()方法添加了一个鼠标移动事件监听器。在这个例子中，我们获取了ID为“myButton”的按钮元素，并使用addEventListener()方法添加了一个点击事件监听器。点击事件是指当用户单击页面上的某个元素时触发的事件。鼠标移动事件是指当用户将鼠标移动到页面上的某个元素上时触发的事件。六、窗口大小改变事件。
JS事件类型学习
sinat_29607033的博客
08-07 163
一、 跨浏览器兼容事件(IE8及其以下浏览器)    //addHandler: function (element, type, handler) element:控件， type :事件类型 handler:回调函数 var EventUtil = { addHandler: function (element, type, handler) { if (el...
js基本事件类型
cheng_cuo_tuo的博客
01-29 1853
&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;script&gt; /* 基本事件模型处理方式是被广泛使用到浏览器中的。 基本事件处理模型的形式主要通过事件属性来设计的。 事件属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值