JavaScript从基础到精通（web APIs day02 自定义属性 + 定时器 + 事件监听 + 事件对象）

mc.byte

已于 2022-12-01 22:27:42 修改

阅读量193

点赞数

分类专栏： # 笔记 web前端文章标签：前端 servlet html

于 2022-11-24 16:36:18 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/126651867

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

一.自定义属性

1.解释：

重点为：自定义属性在DOM对象上一律以dataset对象方式获取：xx.dataset.属性名

 <!-- 自定义属性 data-name=" " -->
  <div data-id="1" data-spm="one">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')  //获取到第一个div
    console.log(one.dataset) //dataset  ：
    //  data：自定义属性  set:集合 （可以拿到所有的自定义属性名）
    console.log(one.dataset.id) //1
    console.log(one.dataset.spm) //one
  </script>

1.2 修改自定义属性的值

直接获取赋值

<body>
  <div data-num="100" data-id="1" data-spm="刘亦菲">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>

  <img src="" alt="">
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)  // 1
    console.log(one.dataset.spm)  // 刘亦菲

    // 固有属性： 标签本身就有的属性（id class src alt title disabled selected checked...）
    // 自定义属性： 自己定义的属性
    console.log(one.dataset)  // { num: '100', id: '1', spm: '不知道' }
    console.log(one.dataset.num)  // '100'

    // 修改自定义属性的值
    one.dataset.num = 200
  </script>
</body>

二. 定时器-间歇函数

1.开启

2.关闭

结论：

开启定时器：setInterval(函数，间隔时间) 关闭定时器：clearInterval(定时器名 )

代码例：

1. 开启定时器

//定时器
//是每隔一秒，定时器来帮我们调用这个匿名函数
setInterval(function () { console.log(111) }, 1000)

 function fn() {
   console.log('你好啊')
 }
//fn函数调用
fn()

每隔一秒调用fn函数
setInterval(fn(), 1000)  // error   fn后面不要有() , 否则没有定时效果
setInterval(fn, 1000)

2.关闭定时器

let n1 = setInterval(function () {
      console.log('这是第一个定时器')
}, 1000)

let n2 = setInterval(function () {
      console.log('这是第二个定时器')
}, 2000)

let n3 = setInterval(function () {
       console.log('这是第三个定时器')
}, 3000)
        
console.log(n1, n2, n3)

// 关闭 n2 对应定时器
      clearInterval(n2)

总结：

此节案例：

用户注册协议同意倒计时
轮播图定时器版，每隔一秒钟切换一个图片

三.事件监听（重要！）

注意：

1.事件类型要加引号

2.函数是点击之后再去执行，每次点击都会执行一次

代码例：

 <script>
    // 需求： 点击了按钮，弹出一个对话框
    // 1. 事件源   按钮  
    // 2.事件类型 点击鼠标   click 字符串
    // 3. 事件处理程序 弹出对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('你早呀~')
    })
  </script>

事件监听总结概括：

1）什么是事件监听？

事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

2）事件监听三要素是什么？

事件源 (谁被触发了)
事件类型 (用什么方式触发，点击还是鼠标经过等)
事件处理程序（要做什么事情）

案例：

1.点击关闭按钮，关闭广告；（注意关闭的是父盒子）

2.随机点名案例

1.点击关闭广告
<body>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    // 1. 获取事件源
    const box1 = document.querySelector('.box1')
    //  关闭的是大盒子
    const box = document.querySelector('.box')
    // 2. 事件侦听
    box1.addEventListener('click', function () {
      box.style.display = 'none'
    })
  </script>

2.随机点名案例
<script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        // 定时器的全局变量
        let timerId = 0
        // 随机号要全局变量
        let random = 0
        // 业务1.开始按钮模块
        const qs = document.querySelector('.qs')
        // 1.1 获取开始按钮对象
        const start = document.querySelector('.start')
        // 1.2 添加点击事件
        start.addEventListener('click', function () {
            timerId = setInterval(function () {
                // 随机数
                random = parseInt(Math.random() * arr.length)
                // console.log(arr[random])
                qs.innerHTML = arr[random]
            }, 35)
            // 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以
            if (arr.length === 1) {
                // start.disabled = true
                // end.disabled = true
                start.disabled = end.disabled = true
            }
        })

        // 2. 关闭按钮模块
        const end = document.querySelector('.end')
        end.addEventListener('click', function () {
            clearInterval(timerId)
            // 结束了，可以删除掉当前抽取的那个数组元素
            arr.splice(random, 1)
            console.log(arr)
        })
    </script>

四：事件类型

五：事件对象

1.事件对象是什么

也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

2.使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作

3.语法：如何获取

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

总结：

6.事件对象常用属性（重要）

6.1.获取事件对象

<input type="text"> 
const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
      console.log(11)  
      console.log(e)
 })

if (e.key === 'Enter') {
   console.log('我按下了回车键')
 }

案例：评论回车发布

分析：

①：用到按下键盘事件 keydown 或者 keyup 都可以

②：如果用户按下的是回车键盘，则发布信息

③：让留言信息模块显示，把拿到的数据渲染到对应标签内部

mc.byte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript从基础到精通（web APIs day02 自定义属性 + 定时器 + 事件监听 + 事件对象）

自定义属性在DOM对象上一律以dataset对象方式获取：xx.dataset.属性名
复制链接

扫一扫

专栏目录

JavaScript从基础到精通 （web APIs day02 自定义属性 + 定时器 + 事件监听 + 事件对象）

一.自定义属性

1.2 修改自定义属性的值

二. 定时器-间歇函数

总结：

三.事件监听 （重要！）

事件监听总结概括：

四：事件类型

五：事件对象

6.事件对象常用属性 （重要）

6.1.获取事件对象

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

JavaScript从基础到精通（web APIs day02 自定义属性 + 定时器 + 事件监听 + 事件对象）

三.事件监听（重要！）

6.事件对象常用属性（重要）