JavaScript 自定义属性、间歇函数、事件监听。以及综合运用案例

自定义属性

自定义属性：给元素增加一些说明或者标识之类的东西，它并不会影响到元素本身。但是我们可以通过这个自定义属性来操作元素

设置自定义属性

自定义属性都是以：data- 开头，后面可以跟自己起的名字，例如data-id=123，这就是设置了一个自定义属性id，值为123，也可以是"123"

获取自定义属性

既然元素有了自定义属性，那就会有使用元素属性的地方。

获取自定义属性，我们首先要获取到一个元素对象。然后通过：对象.dataset.自定义属性来获取

例如，有一个div <div data-name="hello"></div>获取到它的对象a，我们想获取自定义属性就需要a.dataset.name来获取。

间歇函数

间歇函数：函数每隔n时间执行一次，直到被停止

开启间歇函数

语法格式：setInterval(函数，间隔时间) //间隔时间设置为1000为一秒

解释：每隔n个时间执行一次函数，这里的函数一般使用匿名函数，也可以使用有名函数。都一样

javascript 复制代码

setTimeout(function () {
  num++
},1000)

这段代码就是每隔一秒num自增一次

间歇函数是有返回值的，并且返回值决定着我们是否能关闭间歇函数。返回值的类型是number

关闭间歇函数

javascript 复制代码

let a = setTimeout(function () {
  num++
},1000)

语法格式：clearInterval(a) //a是我们开启间歇函数时候的返回值

事件监听

如果想实现点击按钮，提示某些信息的效果就需要使用事件监听

第一步我们需要先获取监听对象，然后进行监听。

javascript 复制代码

<body>
<button id = "1">按钮</button>
<script>
const but = document.getElementById('1')
but.addEventListener('click',function(){
  alert("你好")
})
</script>
</body>

我们使用：对象.addEventListener(事件，执行函数)来监听对象，每当事件被触发的时候就会自动执行函数。

事件的类型有

常用的用红色标注

1. 鼠标事件

click：当鼠标单击元素时触发。
dblclick：当鼠标双击元素时触发。
mousedown：当鼠标按钮按下时触发。
mouseup：当鼠标按钮释放时触发。
mousemove：当鼠标在元素上移动时触发。
mouseenter：当鼠标指针进入元素时触发（不会冒泡）。
mouseleave：当鼠标指针离开元素时触发（不会冒泡）。
mouseover：当鼠标指针进入元素或其子元素时触发。
mouseout：当鼠标指针离开元素或其子元素时触发。

2. 键盘事件

keydown：当键盘上的某个键被按下时触发。
keypress ：当键盘上的某个键被按下并保持时触发（已经不推荐使用，通常用keydown代替）。
keyup：当键盘上的某个键被释放时触发。

3. 表单事件

submit：当表单提交时触发。
change：当输入字段的内容发生变化时触发。
input：当用户在输入框中输入内容时触发。
focus：当元素获得焦点时触发。
blur：当元素失去焦点时触发。
focusin ：当元素获得焦点时触发（与focus相似，但支持事件冒泡）。
focusout ：当元素失去焦点时触发（与blur相似，但支持事件冒泡）。

4. 触摸事件（针对触摸屏设备）

touchstart：当触摸屏被触摸时触发。
touchmove：当触摸点在屏幕上滑动时触发。
touchend：当触摸点从屏幕上移开时触发。
touchcancel：当触摸事件被系统中断时触发。

5. 窗口/页面事件

load：当页面或图像完全加载完成时触发。
unload：当页面即将卸载时触发（例如关闭窗口、刷新页面）。
resize：当窗口大小变化时触发。
scroll：当页面或元素发生滚动时触发。
beforeunload：当用户尝试离开页面时触发（通常用于警告用户丢失未保存的数据）。
visibilitychange：当页面的可见性状态改变时触发（例如，页面切换到后台或重新激活）。

6. 媒体事件

play：当媒体（音频或视频）开始播放时触发。
pause：当媒体暂停时触发。
ended：当媒体播放完毕时触发。
volumechange：当媒体的音量发生变化时触发。
timeupdate：当媒体的播放时间发生更新时触发。

7. 拖放事件

dragstart：当拖动操作开始时触发。
drag：当元素被拖动时触发。
dragend：当拖动操作结束时触发。
dragenter：当拖动元素进入目标区域时触发。
dragover：当拖动元素在目标区域上方时触发。
dragleave：当拖动元素离开目标区域时触发。
drop：当拖动元素被放置到目标区域时触发。

8. 其他常见事件

error：当页面、图片或资源加载失败时触发。
contextmenu：当右键点击元素时触发（弹出上下文菜单）。

案例

javascript 复制代码

<body>
<form>
  <input type="submit" value="submit">
</form>
<script>
const but = document.querySelector('form')
but.addEventListener('submit',function() {
  alert("确认提交?")
})
</script>
</body>

当我们按下submit按钮的时候就会触发alert提示我们是否确认提交

综合案例---随机点名

思路：一个存储name的容器，每次随机抽取，然后从容器中删除掉抽取的数。

实现代码👇

javascript 复制代码

<body>
<div class="a">
  问题是:<p></p>
  <p><button id="1" data-one="这是一个随机点名程序。每次抽取到之后就会删掉被抽取的人">开始</button></p>
</div>

<script>
  let a = ["小炮", "塔姆", "腕豪", "小丑", "蜘蛛", "杰斯", "金克斯", "蔚", "范德尔", "老丈人"]
  let b = 0
  let c
  const p = document.querySelector("p")
  const button = document.getElementById('1')
  console.log(button.dataset.one)
  button.addEventListener('click', function() {
    if (button.innerText === "开始") {
      button.innerText = "停止"
      c = setInterval(() => {
        b = Math.floor(Math.random()*a.length)
        p.innerHTML = a[b]
      }, 50)
    } else {
      button.innerText = "开始"
      clearInterval(c)
      console.log(a.splice(b, 1))
      if(a.length === 0 ){
        p.innerHTML = "没有了"
      }

    }
  })

</script>
</body>

首先我们获取到对应元素的对象，这方便我们后续进行渲染。

然后来看js代码部分，我们首先声明了容器--数组a用来存储我们的名字。然后生成变量b和c，它们的作用分别是存储随机数和存储间歇函数的返回值。

然后我们获取到了两个对象，一个是段落对象p，另一个是按钮对象button。我们使用p来渲染我们获取到的name，使用button进行开始抽取和停止抽取的行为。

我们首先给按钮添加了一个事件监听。如果单击了按钮就会触发后面的匿名函数

匿名函数的作用是判断了button里面的文本内容是否是开始，如果是开始就先把内容替换成停止，然后启动间歇函数，并且把间歇函数的返回值传递给c。每隔50ms执行一次，每次随机生成一个随机数（范围是0-a.length-1，左闭右开区间）。这个随机数就是数组的下标，然后根据下标渲染对应的name到p标签里面。

当我们再次按下按钮的时候（这时候按钮的值应该是停止了），会再次触发事件监听，然后判断button的文本是不是开始，不是开始就去执行else的代码，然后再把文本改为开始。然后停止间歇函数并且使用splice函数删除对应下标的名字。判断数组是否为空，为空则提示没有了。