dom元素绑定事件的三种方式

最新推荐文章于 2024-06-22 01:24:00 发布

七日谭

最新推荐文章于 2024-06-22 01:24:00 发布

阅读量8.9k

点赞数 12

CC 4.0 BY-SA版权

文章标签： js javascript dom css

本文链接：https://blog.youkuaiyun.com/Adollar/article/details/106207838

本文详细介绍了JavaScript中DOM元素绑定事件的三种方式：普通方式（在标签内直接写事件+方法调用）、动态事件绑定（先获取DOM元素再绑定事件，需注意内存泄露）以及事件监听（使用addEventListener方法，支持冒泡和捕获）。同时，解释了事件冒泡和捕获的概念，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM元素绑定事件的三种方式：

JavaScript与HTML之间的江湖是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间（例如：鼠标点击页面、复制文本等）。

事件属于对象的被动行为。
方法属于主动行为。

事件的绑定方式：普通方式、动态绑定方式、监听方式

常见的事件：

鼠标事件：mouseover（鼠标悬停）、mouseup(鼠标抬起）、 mousedown(按下) 、click(单击) 、dbclick双击事件、mouseleave（鼠标离开）、 mouseout（鼠标离开）、 mousemove（鼠标移动）、 mouseenter（鼠标进入）、 mousewheel（滚轮）
键盘事件：keypress keydown keyup
表单事件：focus（获焦）、 blur（失焦）、 submit（提交）、 change（文本发生变化）、 input(获取用户输入事件)
浏览器事件：scroll（滚动条）、load（加载完成）、error（加载失败）、 resize（窗口大小变化）、contentmenu(右键打开浏览器菜单)
剪贴版事件：cut（剪贴）、copy（复制）、 paster(粘贴)、selectstart （选择）

普通方式：

在元素标签内直接写事件+相应事件触发后的方法调用
需要注意，这里的事件前面需要加上“on”。

<button onclick="btnhandle()" onmouseenter="enterbtn()" onmouseleave = "leavebtn()">按钮</button>
<script>
 function btnhandle(){
            console.log(1);
        }
  function enterbtn(){
        console.log("鼠标进入");
         }
  function leavebtn(){
           console.log("鼠标离开");
        }
</script>

动态事件绑定：

动态事件绑定，需要先获取dom元素再绑定事件，获取dom元素可以参看原生js获取dom对象
动态事件绑定存在内存泄露，所以务必要注意回收。

 		var btn=document.getElementById("btn");//获取dom元素
 		//事件动态绑定
        btn.onmousemove=function(){
            console.log("鼠标移动");
        }
        //移除动态绑定事件
        btn.onmousemove = null;

多元素动态直接绑定：

	<ul>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
        <li>第四节</li>
        <li>第五节</li>
    </ul>
  <script>
    var liele = document.getElementsByTagName("li");
    //在网页中点击当前li，输出当前的li对应获取dom元素集合中的下标。
        for (var i = 0;i<liele.length;i++)
        {
            //事件闭包
            //这里如果不写成闭包形式，点击当前li,输出的会是最后一个
            //li对应dom元素集合中的下标
            (function(n){
                liele[i].onclick=function(){
                    console.log(n);
                }
         	 })(i);
    	}
    </script>

事件的监听：

使用addEventListener方法，该方法有三个参数：事件的类型、监听的函数、事件的冒泡和捕获控制（true/false）
注：addEventListener方法的第三个参数默认值为false。

//监听btn的click事件
//事件监听时，事件类型参数中不带“on”
//将监听的函数写在内部
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
            console.log("执行单击事件");
        });

		//将监听的方法写到外面
		btn.addEventListener("click",eventhandle);
       	function eventhandle(){
            console.log("登录按钮被点击");
            //事件监听移除
            this.removeEventListener("click",eventhandle);
        }

事件的冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。简而言之，就是由里向外进行冒泡。
事件的捕获：是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。

对于冒泡和捕获的解释：

<!DOCTYPE html>
<html>
<head>
	<title>EXAMPLE !!</title>
</head>
<body>
	<div id="myDiv">Click me</div>
</body>
</html>

冒泡：如果点击了页面中的div元素，click事件会按照如下顺序传播：
div–>body–>html–>document
捕获：如果点击了页面中的div元素，click事件会按照如下顺序传播：
docum–>html–>body–>div

代码举例：

<style>
        #block {
            width: 200px;
            height: 250px;
            background: deeppink;
        }

        #box {
            width: 100px;
            height: 150px;
            background: green;
        }
</style>
</head>
<body>
    <div id="block">
        <div id="box">
            <button id="btn">按钮</button>
        </div>
    </div>  
<script>
	var btn = document.getElementById("btn");
	var block=document.getElementById("block");
    var box=document.getElementById("box");
    var count=0;
    //冒泡
      btn.addEventListener("click",function(){
                count++;
                console.log("btn",count);
       },true);
       box.addEventListener("click",function(){
                count++;
                console.log("box",count);
       },true)
       block.addEventListener("click",function(){
                count++;
                console.log("block",count);
        },true)
//addEventListener的第三个参数为false，第一次点击按钮输出的结果为btn 1；box 2；block 3
//addEventListener的第三个参数为true，第一次点击按钮输出的结果为block 1；box 2；btn 3

</script>
</body>