事件监听、定时器介绍及使用

不悲不康
88 阅读4分钟

定时-间歇函数

定时器函数能够重复执行代码

定时器函数可以开启和关闭定时器

1.开始定时器

setInterval(函数,间隔时间)
​
setInterval(function time() {
      console.log(123);
    }, 1000)

关闭定时器

let 变量名 = setInterval(函数，间隔时间)
clearIntterval(变量名)

事件

给 DOM元素添加事件监听

什么是事件？

事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮

什么是事件监听？

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

添加单击事件监听，并且传入一个处理函数：当用户真的执行了单击操作，就使用传入的函数进行处理

事件类型： js内部内置的，我们不能写，如单击--click

处理函数： 一个函数，这个事件触发之后的响应处理方式，这个函数不是我们自己调用的，而是事件处理机制调用的

语法：

元素.addEventListener('事件',要执行的函数)

  • 事件监听三要素：

    • 事件源： 那个dom元素被事件触发了，要获取dom元素
    • 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
    • 事件调用的函数： 要做什么事
//获取元素
let btn=document.querySelector('button')
//事件监听（注册事件）
btn.addEventListener('click',function(){
   alert('被点击了')
})

注意：

  1. 事件类型要加引号
  2. 函数是点击之后再去执行，每次点击都会执行一次

事件监听版本

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

事件类型

Snipaste_2022-03-25_19-02-28.png

  • 鼠标点击 click
  • 鼠标经过 mouseenter
  • 鼠标离开 mouseleave
  • 获得焦点 focus
  • 失去焦点 blur
  • 键盘按下触发 Keydown
  • 键盘抬起触发 Keyup
  • 用户输入事件 input

总结

  1. 定时器函数有什么作用？

    可以根据时间自动重复执行某些代码

  2. 定时器函数如何开启？

    setInterval(函数名, 时间)

  3. 什么是事件？

    事件是在编程时系统内发生的动作或者发生的事情 比如点击按钮 click

  4. 什么是事件监听？

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

  5. 事件监听三要素是什么？

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

回顾：

一：如何获取元素

1.querySelector():获取满足条件的第一个元素，获取到的元素是dom元素，意味着可以直接操作

2.querySelectorAll():获取满足条件的所有元素，获取到的是伪数组，伪数组不能直接操作，需要遍历伪数组，获取里面的每一个值进行操作

3.参数：传入选择器

二：设置标签之间的文本内容

1.innerText:设置标签的文本内容，不会解析标签，如果没有赋值就是取值，取值会忽略标签

2.innerHTML:设置标签的文本内容，会解析标签，如果没有赋值就是取值，取值会返回标签内容的完整的html结构

三：设置元素的属性

\1. dom元素.内置属性：如果没有赋值就是取值

2.操作样式

》 style:样式属性对象。它是一个对象，包含着当前元素所有可设置的样式属性，使用时通过 dom元素.style.样式 = 值。它的作用是设置行内样式

》 设置元素的类名： className可以设置元素的类名，它会覆盖元素之前的类名样式

》 操作classList:当前元素的类样式列表

1.add:添加新样式，不会修改元素之前的类样式

2.remove:移除样式

3.toggle:切换样式

4.contains:判断元素是否包含某个样式

四：表单元素的属性

1.input: value属性可以设置和获取文本框的内容

2.checked,disabled,readonly类似的属性，也可以通过点语法可设置和获取

如果没有赋值就是取值，它的值是bool值，特别对于checked属性，选中就是true,否则就是false

3.button 标签的文本内容需要使用innerText/innerHTML, input/type=button需要使用value来设置

3.textarea:它的内容设置需要使用value/innerHTML

\

avatar
文章
阅读
粉丝