4.dom元素——dom元素事件处理机制（事件流）

本文链接：https://blog.csdn.net/ling_xy/article/details/110508980

本文详细探讨了DOM元素的事件处理，包括获取/设置元素属性、添加事件、事件监听、事件冒泡与捕获机制、事件委托，以及鼠标和键盘事件对象。通过示例解释了如何使用addEventListener进行事件绑定，并讨论了如何阻止事件冒泡。

摘要由CSDN通过智能技术生成

文章目录

原生js事件全部带on

dom元素事件：

1.window事件：onload onresize onreload onerror oncontentmenu onscroll
2.鼠标事件： onmouseenter onmouseleave(水平离开)
onmouseout(垂直+水平离开)
onmouseup onmousdown onclick
ondbclick onmousewheel onmouseover onmousemove
3.键盘事件：onkeydown onkeyup onkeypress
4.表单事件：onfocus（获焦） onblur（失焦） onsubmit onreset

1.获取/设置元素属性

获取元素属性

<button id="but" onclick="fun1()" onmouseover="fun2()">按钮</button>

	 console.log(but.attributes);
     but.attributes.removeNamedItem("onmouseover");
     console.log(but.attributes.getNamedItem("onmouseover"));

设置属性

	/*  第一种
	var args=document.createAttribute("onmousemove");
    args.nodeValue="fun2()";
    but.attributes.setNamedItem(args);
    */

	//第二种
    but.setAttribute("onmousemove",'fun2()');

2.dom元素添加事件

函数不传递this 函数内部的this 指window
如果传递this 函数内部的参数指当前的对象

   <button id="but" onclick="fun1()">按钮</button>
   function fun1() {
   
       console.log("你点我", this);
   }

在这里插入图片描述

   <button id="but" onclick="fun1(this)">按钮</button>
   function fun1(args) {
   
       console.log("你点我", this);
   }

在这里插入图片描述

直接在元素上直接绑定事件

<button id="but" onclick="fun1()" onmouseover="fun2()">按钮</button>

   function fun1() {
   
       console.log("你点我", this);
   }

   function fun2() {
   
       console.log("你悬停我");
   }