JavaScript必学知识点-CSDN博客

本文链接：https://blog.csdn.net/m0_51452686/article/details/137980160

一、定时器

1. 间歇函数

每隔一段时间调用这个函数

    <script>
        function repeat() {
            document.write('出卖你的爱~')
        }
        // 开启定时器(函数，间隔时间)
        let timer = setInterval(repeat, 1000) //Attention：①1000=1s ②函数不需要加括号
        // 关闭定时器
        clearInterval(timer)
    </script>

2. 延时函数

与间歇函数的区别：仅执行一次，等待1000毫秒后执行一次函数

    <script>
        // 开启延时定时器
        let timer2 = setTimeout(repeat, 1000) 
        clearTimeout(timer2)
    </script>

二、事件监听

1. 语法

三要素：

事件源：获取被触发的dom元素；
事件类型：触发方式（比如click点击事件/mouseover鼠标经过事件）
事件函数：触发了做什么事

        // 获取元素
        const a = document.querySelector('a')
        // 添加事件监听：点击a链接后输出文字
        a.addEventListener('click', function(){
            document.write('是郎给的诱惑~')
        })

2. 事件类型

鼠标事件：click、mouseover、mouseleave
焦点事件：focus（点击框框获得焦点）、blur（失去焦点）
键盘事件：Keydown（按下键盘任意键触发）、Keyup（抬起键盘任意键触发）
文本事件：input（用户输入事件）

3. 事件对象e

事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。

3.1 语法

        // 事件对象e
        const input = document.querySelector('input')
        // 点击输入框后按下键盘，打印出用户按下的键盘的值
        input.addEventListener('keyup', function(e){
            console.log(e.key);
        })

3.2 部分常用属性

e.key：用户按下的键盘的值
e.type：获取当前事件类型
e.clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
e.offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

4. 环境对象this

需要弄清楚 this 的指向：谁调用，thisjiushish

<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector(`button`)
        btn.addEventListener('click' , function() {
            console.log(this)  // btn对象
            // 平常写法
            //btn.style.color = 'red'
            //使用 this 的写法
            this.style.color = 'red'
        })
    </script>
</body>

三、事件流

事件流指的是事件完整执行过程中的流动路径。

1. 捕获

从DOM的根元素开始去执行对应的事件（从父到子）

语法：DOM.addEventListener(事件类型，事件处理函数，true)

2. 冒泡

实际工作以此为主，默认也为false

语法：DOM.addEventListener(事件类型，事件处理函数，false)

扩展：阻止行为

阻止冒泡： 元素.stopPropagation()

阻止元素默认行为：e.preventDefault()

3. 事件解绑

3.1 on事件

btn.onclick = null

3.2 addEventListener事件

btn.removeEventListener('click', fn)

4. 事件委托

一种减少注册次数，可以提高程序性能的方法。给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

<body>
  <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <p>不改变</p>
  </ul>
  <script>
    // 点击每个小li 当前li 文字变为红色
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      // console.dir(e.target) // e.target就是我们点击的那个对象
      // e.target.style.color = 'red'   //li和p都变颜色
      // 只要点击li才会变色
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
      }
    })
  </script>
</body>

5. 其他事件

5.1 页面加载事件：load

等待页面所有资源加载完毕再执行其中的代码（写在</head>之前）

    <script>
    // 页面加载事件
    window.addEventListener('load', function(){
        document.write('hello')
    })
    // 等待图片加载完毕再执行里面的代码
    img.addEventListener('load',function(){
        document.write('hello')
    })
    // 等不及了！现在要“无需等待样式表，也不等图片完全加载，先实现HTML的交互效果”
    document.addEventListener('DOMContentLoaded', function(){
        document.write('hello') //需要执行的操作
    })
</script>
</head>

5.2 元素滚动事件：scroll

滚动条在滚动的时候持续触发的事件，比如很多网页需要检测用户把页面滚动到某个区域后做一些处理（固定导航栏、返回顶部）。

    <script>
        // 页面滚动
        window.addEventListener('scroll', function(){
            window.scrollTo(10, 20) // 规定滚动到指定坐标
            console.log(document.documentElement.scrollTop); // 想知道页面到底滚动了多少像素           
        })
        // 元素滚动
        const div = document.querySelector('div')
        div.addEventListener('scroll', function(){
            console.log(this.scrollTop); // 滚动后距离上边的距离
            console.log(this.scrollLeft); // 滚动后距离左边的距离
        })        
    </script>

5.3 页面尺寸事件：resize

会在窗口尺寸改变时触发事件

        // 页面尺寸改变时
        window.addEventListener('resize',function(){
            let w = document.documentElement.clientWidth //检测屏幕宽度
            let h = document.documentElement.clientHeight //检测屏幕高度
            console.log(w);
        })

四、日期对象

1. 实例化及日期对象方法

    <div class="year">年份</div>
    <div class="month">月份</div>
    <script>
        const year1 = document.querySelector('.year')
        const year2 = document.querySelector('.month')
        // 实例化
        const date1 = new Date() //获取当前时间
        const date2 = new Date('2024-05-01') //获取指定时间

        // 日期对象不能直接使用，需要转换格式
        year1.innerHTML = date1.getFullYear() //获取4位年份
        // 获取月份0~11：getMonth()
        // 获取日子（每个月份日子范围不同）：getDate()
        // 获取星期0~6：getDay()
        // 获取小时0~23：getHours()
        // 获取分钟0~59：getMinutes()
        // 获取秒0~59：getSeconds()

        // 把日期转化为字符串
        year2.innerHTML = date2.toLocaleString()
     
    </script>

2. 时间戳

指的是从1970.1.1开始至今的毫秒数，用于计算倒计时，因为时间无法进行加减。

        // 时间戳
        console.log(date1.getTime());  //得到date1的时间戳
        console.log(+new Date()); //简写得到此刻的时间戳
        console.log(Date.now()); //无需实例化，只能得到此刻的时间戳

五、正则表达式

1. 作用

用于匹配字符串中字符组合的模式，例如表单验证中进行匹配、过滤敏感词等

2. 语法

        // 定义规则语法
        const a = /^[a-z]$/
        // 查找是否匹配
        a.test('被检测的字符串')
        // 查找符合规则的字符串
        a.exec(一个数组)
        // 举例
        console.log(/[abc]/.test('andy'));

3. 元字符

边界符：^表示以谁开始，$表示以谁结束，如何两个一起用表示精确匹配
量词：比如*表示重复0次或更多次
字符类：比如\d表示0~9

4. 修饰符

        // i是ignore的缩写，表示正确匹配不区分大小写
        console.log(/a/i.test('A')); //true
        // g是global的缩写，表示全局多次匹配
        const str = '你好cute，你怎么这么cute'
        const a = str.replace(/cute/ig, 'ugly')
        console.log(a);