WebAPI-day02笔记

NIEandyou
138 阅读3分钟

DOM-事件基础

  • 事件
  • 高阶函数
  • 环境对象
  • 编程思想
  • 综合案例

事件

目标：能够给 DOM元素添加事件监听

什么是事件？ 事件是在编程时系统内发生的动作或者发生的事情 通俗来说 鼠标点一下 就发了鼠标点击事件 、键盘按一下 就叫键盘按下事件 比如用户在网页上单击一个按钮 什么是事件监听？ **、、 通俗来说就是鼠标点击了 你要干什么事情 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件 语法：

1649445439508 此元素指的就是dom元素

事件监听三要素：

事件源： 那个dom元素被事件触发了，要获取dom元素

事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

事件调用的函数： 要做什么事

*事件监听

1649446077456

事件初体验代码：

<body>
    <button>抽奖</button>
    <button class="but">退出抽奖</button> 
    <div></div>
    <script>
        //先获取dom元素
        let button=document.querySelector('button:nth-child(1)')
        //给button绑定点击事件
        button.addEventListener('click',function(){
            console.log('大哥你终于点我了');
        })
        let but=document.querySelector('.but')
        
        but.addEventListener('click',function(){
            console.log('你也来点我了呀');
         })

         //获取div的dom元素
        let div=document.querySelector('div')
        //通过js来设置div的样式属性
        div.style.width='50px';
         div.style.height='50px';
         div.style.backgroundColor='red';
        
        //给div设置鼠标移入事件
        div.addEventListener('click',function(){
            console.log('小哥哥快进来');
            
        })
    </script>
</body>

1649448378276

小案例：

<body>
    <button>1000</button>
    <script>
        //获取button标签的dom元素
        let button=document.querySelector('button')
        //给button设置点击事件
        button.addEventListener('click',function(){
        //   button.innerText= button.innerText-1
        // button.innerText-=1
        --button.innerText
        })
    </script>
</body>

1649449589684

案例1649448472787

<body>
    <div>
        <button>X</button>
        <img src="../images/第二遍/Sn1.png" alt="">
    </div>
    <script>
        //获取div大盒子标签dom元素
        let div=document.querySelector('div')
        //获取按钮button标签的dom元素
        let button=document.querySelector('button')
        button.addEventListener('click',function(){
            // 修改div的样式属性 让其小时
            div.style.display='none'
        })
    </script>
</body>

1649496614138

1649496643987

<boy>
    <div></div>
    <button>点击即可随机点名</button>
    <button class="bnt">停止点名</button>
    <script>
        let aarr=['迅捷斥候-提莫','德玛西亚之力-盖伦','放逐之刃-锐雯','虚空之女-卡莎','雪原双子-努努','曙光女神-蕾欧娜','星籁歌姬-萨勒芬妮','唤潮鲛姬-娜美','无双剑姬-菲奥娜']
        let timeId;//定义一个全局变量
        //获取div标签的dom元素 并设置里其属性
        let div=document.querySelector('div')
        div.style.border='2px solid #ccc'
        div.style.width='200px'
        div.style.padding='20px'
        div.style.color='red'
        div.style.fontWeight=700
        //获取button标签的dom元素
        let button=document.querySelector('button')
        let bnt=document.querySelector('.bnt')
        //给button元素绑定点击事件
        button.addEventListener('click',function(){
            //1 button.disabled=true
            clearInterval(timeId);
           //设置随机数 加上定时器 可以重复让随机数这个动作重复
            timeId=setInterval(function(){
                let index=Math.round(Math.random()*(aarr.length-1))
                
                    div.innerText=aarr[index];
                    
                
            },10)
        })
        //注册清除定时器 点击事件
        bnt.addEventListener('click',function(){
            //1 button.disabled=false
            clearInterval(timeId);
        })

        //优化 
        //多从点击开始按钮只会 创建开启多个定时器
        //如何解决 点击多次按钮 后面停止定时器
        //1.在开启定时器的时候 就禁用按钮   button.disabled=true 在停止按钮添加button.disabled=false
        //2. clearInterval(timeId); 在没每次开始定时器时就清除上次的定时器
    </script>
</boy>

soogif

事件监听版本

  1. DOM L0 事件源.on事件 = function() { }
  2. DOM L2
    事件源.addEventListener(事件， 事件处理函数)
  3. 发展史： DOM L0 ：是 DOM 的发展的第一个版本； L：level DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准 DOM L2：使用addEventListener注册事件 DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

事件类型

1649505366123

1649505451336

1649505462290

1649505470965

1649505486240

1649505497436

  <style>
       div{
           text-align: center;
           line-height: 30px;
       }
   </style>
</head>
<body>
    <div></div>
    <button class="add">+</button>
    <button class="minus">-</button>
    <script>
        let div=document.querySelector('div')
        div.style.width='52px'
        div.style.height='30px'
        div.style.border='solid #cccc '
        
        let add=document.querySelector('.add')
        let minus=document.querySelector('.minus')
        add.addEventListener('click',function(){
            div.innerText++
            minus.disabled=false
            //1.当商品数量一旦做加之后  就会马上解除禁用减号按钮
        })
        minus.addEventListener('click',function(){
            div.innerText--
            if(div.innerText==1){     //1.这里做一个判断 当商品数量为1时 就禁用减号按钮
                minus.disabled=true 
            }
        })
       

    </script>
</body>

1649507682800

高阶函数

目标：掌握高阶函数用法，实现函数更多使用形式

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。 【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

函数表达式:

函数表达式和普通函数并无本质上的区别：

1649507869421

普通函数的声明与调用无顺序限制，推荐做法先声明再调用 函数表达式必须要先声明再调用

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。 【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数 简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数 常见的使用场景：1649507982725

  1. 函数表达式
    • 函数也是【数据】
    • 把函数赋值给变量
  2. 回调函数
    • 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
    • 回调函数本质还是函数，只不过把它当成参数使用
    • 使用匿名函数做为回调函数比较常见

环境对象

目标：能够分析判断函数运行在不同环境中 this 所指代的对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更简洁

  • ​ 函数的调用方式不同，this 指代的对象也不同
  • 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
  • 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

编程思想

排他思想

当前元素为A状态,其他元素为B状态 使用：

  1. 干掉所有人 使用for循环
  2. 复活他自己 通过this或者下标找到自己或者对应的元素

案例1：

需求：点击那个分类，那个分类就变成红色同时其他分类正常

最适合使用排他他思想

  <style>
        li{
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            list-style: none;
            float: left;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <ul>
        <li>动画片</li>
        <li>恐怖片</li>
        <li>科幻片</li>
        <li>纪录片</li>
    </ul>
    <script>
        //1.获取li标签的元素
        let lis=document.querySelectorAll('li')
        //2.遍历数组 为其中的每个元素绑定单击事件
        for (let i= 0; i< lis.length; i++) {
           lis[i].addEventListener('click',function(){
            //给被点击的里标签设置颜色
            // lis[i].style.backgroundColor='red'
            
            //这里出现的问题 就是你点击其他li 也会变红色 且不会消失 
            //故每次点击之前来个循环 先刷一遍白色
            for (let j = 0; j < lis.length; j++) {
               lis[j].style.backgroundColor='#fff'
                
            }
            // lis[i].style.backgroundColor='red'
            this.style.backgroundColor='red'
           })
            
        }
    </script>
</body>

效果如下：SDGIF_Rusult_1

1649508570453

1649508581593

avatar
文章
阅读
粉丝