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

周粥舟轴

已于 2023-01-11 17:25:46 修改

阅读量1.5k

点赞数

文章标签： javascript 前端 html

于 2021-08-22 15:11:50 首次发布

本文链接：https://blog.csdn.net/qq_48438492/article/details/119852733

版权

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对象
动态事件绑定存在内存泄露，所以务必要注意回收。

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

多元素动态直接绑定:

	<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”
//将监听的函数写在内部
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
            console.log("执行单击事件");
        });
</script>

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