JS DOM 事件

飘荡的云~

已于 2023-11-16 22:07:32 修改

阅读量147

点赞数

文章标签： javascript 前端 html

于 2023-11-13 19:18:32 首次发布

本文链接：https://blog.csdn.net/qq_43547725/article/details/134383666

版权

一、什么是DOM事件

用户对dom元素(比如按钮、div、span...)进行某种操作行为(单击、双击、鼠标移入 ...键盘按下),页面会做出相应的响应。事件通常与函数结合使用，在事件发生之前函数不会被执行。

二、事件三要素：

1、事件源(谁身上发生了某种行为)

2、事件名称(具体行为)

3、事件处理逻辑(当事件行为发生后,导致什么结果)

三、DOM事件实现方案

操作步骤：

创建要触发的事件实例
获取要触发事件的元素对象
调用元素对象的dispatchEvent方法，参数是目标事件实例
特殊事件要分析一下模拟方式，巧妙的实现

案例：点击按钮，顺序输出1~10 并实现轮播；

点击按钮+，数字+1；点击按钮-，数字-1

<body>
    <button class="button-01">按钮+</button>
    <button class="button-02">按钮-</button>
    <p>1</p>

    <script>
        // 1 获取事件源
        const btn01=document.querySelector('.button-01')
        const btn02=document.querySelector('.button-02')
        const content=document.querySelector('p')

        const arr=[1,2,3,4,5,6,7,8,9,10]
        
        let index=0
        // 绑定事件（注册事件）
        btn01.onclick=function(){
            index++
            if(index===arr.length){
                index=0
            }
            content.innerHTML=arr[index]
        }
        btn02.onclick=function(){
            index--
            if(index===-1){
                index=arr.length-1
            }
            content.innerHTML=arr[index]
        }
    </script>
</body>

四、事件绑定（0级DOM、2级DOM）

1、0级DOM

分为2个：一是在标签内写onclick事件

　　　　二是在JS写onlicke=function（）{}函数

1）

<input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >

2）

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

2、2级DOM

只有一个：监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()

它们都有三个参数：第一个参数是事件名（如click）；

　　　　　　　　　第二个参数是事件处理程序函数；

　　　　　　　　第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用

addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用

document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false)

3、DOM0 与 DOM2 的区别

如果定义了两个dom0级事件，dom0级事件会覆盖

dom2不会覆盖，会依次执行

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

五、解绑事件（删除事件）

1. 传统方式删除事件

<body>
    <button>dom0级事件</button>
    <button>dom2级事件</button>
    <script>
      const btn = document.querySelectorAll('button')
      btn[0].onclick = function () {
        alert('dom0')
        btn.onclick = null
      }

    </script>
</body>

2. removeEventListener 删除事件

<body>
    <button>dom0级事件</button>
    <button>dom2级事件</button>
    <script>
      const btn = document.querySelectorAll('button')
      
      function f() {
        alert('dom2')
        // 解除事件绑定
        btn[1].removeEventListener('click', f)
      }
      btn[1].addEventListener('click', f)
    </script>
  </body>

六、常用鼠标事件

1、点击：onclick

// 1、获取事件源
const btn = document.querySelector('button')
// 2、绑定事件 （2级DOM）
btn.addEventListener('click', function () {
    alert('秋香')
})

2、鼠标移入：onmouseenter

// 1、获取事件源
const btn = document.querySelector('button')
// 2、绑定事件 （2级DOM）
btn.addEventListener('mouseenter', function () {
    alert('鼠标移入')
})

3、鼠标移出:onmouseleave

// 1 获取事件源
const btn = document.querySelector('button')
// 2 绑定事件
btn.addEventListener('mouseenter', function () {
     alert('鼠标移入')
})

btn.addEventListener('mouseleave', function () {
     alert('鼠标移出')
})

4、双击:ondblclick

const btn = document.querySelector('button')
btn.addEventListener('dblclick', function () {
     console.log('双击')
})

七、常用键盘事件

1、input

输入内容就触发

<body>
    <textarea rows="10" cols="30" placeholder="请输入评论"> </textarea>
    <script>
      const tarea = document.querySelector('textarea')
      // input事件 输入内容就触发
      tarea.addEventListener('input', function () {
        console.log('正在输入')
        console.log(tarea.value)
      })
    </script>
  </body>

2、onkeydown

某个键盘按键被按下时触发

<body>
    <textarea rows="10" cols="30" placeholder="请输入评论"> </textarea>
    <script>
      const tarea = document.querySelector('textarea')
      
        tarea.addEventListener('keydown', function () {
          console.log('keydown')
          console.log(tarea.value)
        })

    </script>
</body>

3、onkeyup

某个键盘按键被松开时触发

<body>
    <textarea rows="10" cols="30" placeholder="请输入评论"> </textarea>
    <script>
      const tarea = document.querySelector('textarea')

      tarea.addEventListener('keyup', function () {
        console.log('keyup')
        console.log(tarea.value)
      }),
    </script>
</body>

4.三个事件的执行顺序

onkeydown -> input -> onkeyup

<body>
    <textarea rows="10" cols="30" placeholder="请输入评论"> </textarea>
    <script>
      const tarea = document.querySelector('textarea')
      // input事件 输入内容就触发
      tarea.addEventListener('input', function () {
        console.log('正在输入')
        console.log(tarea.value)
      })
      tarea.addEventListener('keyup', function () {
        console.log('keyup')
        console.log(tarea.value)
      }),
        tarea.addEventListener('keydown', function () {
          console.log('keydown')
          console.log(tarea.value)
        })

      // 顺序 keydown -> input -> keyup
      // 获取用户输入的完整内容 keyup 或input
    </script>
  </body>

八、常用表单事件

1、onfocus

onfocus 元素获得焦点时触发，即在文本框里点击时触发。

2、onblur

onblur 元素失去焦点时触发，即点击文本框以外的内容时触发。

 <body>
    <input type="text" />
    <script>
      // onfocus onblur
      const ipt = document.querySelector('input')
      // 获取焦点
      ipt.addEventListener('focus', function () {
        console.log('获得焦点了！！！')
      })
      // 失去焦点
      ipt.addEventListener('blur', function () {
        console.log('失去焦点了！！！')
      })

    </script>
  </body>

九、JS定时器函数

1、定时器函数的基本使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
		1.如何定时？
		setTimeout(fn,ms)	在指定的毫秒数后调用函数或计算表达式，函数返回一个定时器的timeId。
		fn: 自定义函数
		ms: 函数的间隔调用周期，单位：毫秒
		
        setInterval(fn,ms)	按照指定的周期（以毫秒计）来调用函数或计算表达式，函数返回一个定时器的timeId。
        
        setTimeout调用一次
        setInterval调用多次（以周期为单位重复调用）
        
        2.如何取消定时？
        clearTimeout(timeId)	取消由 setTimeout() 方法设置的 timeId。
        clearInterval(timeId)	取消由 setInterval() 设置的 timeId。
        
        3.定时器函数的应用场景：一般用于制作动画效果，比如：轮播动画，倒计时跳转页面。
        -->
        <script type="text/javascript">
        	//设置定时器
        	var dsj1=setInterval(function() {
        		console.log("开始定时");
        		document.write("开始定时"+"<br/>");
        	},1000);
        	
        	
        	var dsj2=setTimeout(function() {
        		document.write("<b>5秒后显示此信息!</b><br/>");
        	},5000);
        	
        	//清除定时器
          	clearInterval(dsj1);
        	
        	
        	//网页的内容是访问者看的（就不能无限制的死循环），控制的内容是给开发人员看到（看到统计的次数）。
        	function dingshi() {
        		//document.write("开始定时100"+"<br/>");
        		console.log("开始定时100");
        	}
        	
        	//一定不要加（）
        	//dingshi(); //运行一次函数
        	setInterval(dingshi,100);
        </script>
	</body>
</html>

2、定时器函数基础案例——发送验证码

<body>
    <button>发送验证码</button>
    <script>
        const btn=document.querySelector('button')
        let count=5
        btn.addEventListener('click',function(){
            // 禁用按钮
            btn.disabled=true
            // 修改按钮显示文字
            btn.innerHTML=`还剩${count}秒`
            //开启计时器
            const time=setInterval(function(){
                count--
                if(count===0){
                    btn.disabled=false
                    btn.innerHTML='重新发送验证码'
                    count=5
                    clearInterval(time)
                    return
                }
                btn.innerHTML=`还剩${count}秒`
            },1000)

        })
    </script>
</body>