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

本文详细介绍了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>
<think>好的,我现在需要帮助用户了解如何在DOM元素绑定事件。用户明确提到JavaScript DOM事件绑定方法,所以我要先回忆相关知识,并结合提供的引用内容来组织回答。 首先,根据系统级指令,回答必须结构清晰,分步骤说明,同时引用相关文献。我需要确保所有数学公式用正确的LaTeX格式,但这个问题主要涉及JavaScript,可能不需要数学公式,不过要检查是否有必要的地方。 用户提供的引用有5个,其中引用[1]到[5]都涉及DOM事件绑定的不同方法,包括原生JavaScript和jQuery,还有关于事件处理程序和绑定方式的说明。需要将这些内容整合到回答中,同时注意用户提到的绑定方法可能有多种,需要详细说明每种方法及其特点。 接下来,我需要确定DOM事件绑定的主要方法。根据引用内容,常见的方法有三种:HTML内联事件处理、DOM属性绑定、addEventListener方法。引用[4]提到HTML内联方式只能使用第一个onclick,而DOM属性绑定(如onclick)同样无法绑定多个事件,而addEventListener可以。引用[3]指出前两种方式不能绑定多个事件处理器,属于不同DOM标准级别。 因此,回答的结构可以分为这三个主要方法,分别说明它们的用法、优缺点,并给出示例代码。同时需要提到jQuery的方式,引用[2]和[3]可能相关,但用户的问题是关于JavaScript的,所以可能作为扩展或补充说明。 需要注意用户的问题是如何在DOM元素绑定事件,因此要确保每个步骤都清晰,代码示例正确。例如,HTML内联方式直接在元素标签中使用onclick属性,DOM属性绑定是通过JavaScript获取元素后设置onclick属性,而addEventListener则是更现代的方法,支持多个事件。 此外,引用[4]和[5]提供了代码示例,比如使用domNode.onclick的方式,这些可以作为示例代码的参考。同时要指出不同方法的限制,比如前两种方法只能绑定一个处理函数,而addEventListener可以绑定多个,避免覆盖。 可能还需要提到事件处理的执行顺序、事件冒泡等概念,但用户的问题主要集中在绑定方法上,所以可能不需要深入,但如果有相关引用内容可以适当提及。 最后,生成相关问题,需要根据回答内容提出,比如不同方法的区别、处理多个事件的方法、移除事件的方法等,确保问题与主题相关,并引导用户进一步学习。 总结步骤: 1. 分点介绍三种主要绑定方法:HTML内联、DOM属性、addEventListener。 2. 每种方法给出示例代码,说明优缺点。 3. 引用相关文献,如引用[3]说明不同DOM标准,引用[4]说明HTML内联的限制。 4. 扩展说明jQuery方法(根据引用[2])。 5. 总结不同方法的适用场景。 6. 生成相关问题。</think>### 如何在DOM元素绑定事件 JavaScript提供了多种DOM事件绑定方式,主要分为以下三类: --- #### 1. **HTML内联事件处理** 直接在HTML标签中通过`on[事件名]`属性绑定事件处理函数。 ```html <button onclick="alert('点击事件触发')">按钮</button> ``` **特点**: - 简单但耦合性高,难以维护 - 同一事件只能绑定一个处理函数(后续定义会覆盖前者)[^4] --- #### 2. **DOM属性绑定** 通过JavaScript获取元素后,直接为其事件属性赋值。 ```javascript const btn = document.getElementById('btn'); btn.onclick = function() { console.log('通过DOM属性绑定事件'); }; ``` **特点**: - 代码与HTML分离,易于维护 - 同样只能绑定单个事件处理器(覆盖问题存在)[^3][^5] --- #### 3. **addEventListener方法** 使用标准API绑定事件,支持多个事件处理器。 ```javascript btn.addEventListener('click', function() { console.log('第一个事件处理器'); }); btn.addEventListener('click', function() { console.log('第二个事件处理器'); }); ``` **特点**: - 支持同一事件绑定多个函数 - 可控制事件流阶段(捕获/冒泡) - 需显式移除事件(`removeEventListener`)[^5] --- #### 扩展:**jQuery事件绑定** 通过库简化操作(需引入jQuery): ```javascript $('#btn').on('click', function() { alert('jQuery绑定事件'); }); ``` **特点**: - 跨浏览器兼容 - 链式调用支持[^2] --- ### 总结 | 方法 | 多事件支持 | 代码分离 | 推荐场景 | |--------------------|------------|----------|------------------| | HTML内联 | ❌ | ❌ | 简单原型 | | DOM属性绑定 | ❌ | ✔️ | 快速单个事件 | | addEventListener | ✔️ | ✔️ | 生产环境复杂逻辑 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值