当前位置：首页 > news >正文

javaScript——DOM（四）

news 来源：原创 2025/5/1 8:25:46

DOM[文档对象模型]

节点[Node]

构成HTML文档最基本的单元

通过js修改元素的样式

元素.style.样式名 = 样式值

如果css的样式名中含有“-”，将“-”去掉，然后将“-”后的字母大写。
通过style属性设置和读取的都是内联样式

box1.style.marginLeft = 10+"px";

在IE中可以使用currentStyle 获取元素当前的样式。
在其他浏览器中可以使用，getComputedStyle()方法

getComputedStyle(element,pesudoElt)

element :元素
pesudoElt: 指定一个要匹配的伪元素的字符串，必须对普遍元素省略（或null）

事件

就是文档或浏览器窗口中发生的一些特定的交互瞬间

getElementById
getElementsByName
getElementsByTagName

事件对象

在事件对象中，当事件的响应函数被触发是，浏览器每次都会将一个事件对象作为实参传递进响应函数

clientX: 鼠标指针的水平坐标
clientY: 鼠标指针的垂直坐标
在IE8中，响应函数被触发时，浏览器不会传递事件对象，要使用window.event【在火狐不兼容】

事件冒泡

指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。

可以通过事件对象的cancelBubble 设置为true,取消冒泡

事件委派

只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，可以尝试将其绑定给元素的共同的祖先元素。
如果要明确触发事件的对象，可利用target

<ul id="list"><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>document.getElementById('list').addEventListener('click', function(event) {console.log('你点击的是：', event.target.innerText);
});

输出示例：
• 点击“苹果”：输出 “你点击的是：苹果”
• 点击“香蕉”：输出 “你点击的是：香蕉”

解释：
• #list 是绑定事件的元素（事件监听器绑定的对象） → 事件监听器挂在父级上
• event.target 是实际点击的

→ 实际触发事件的对象
⸻

✅ 和 currentTarget 的区别：
• event.target → 实际触发事件的元素
• event.currentTarget → 绑定事件监听器的元素（通常是你调用 addEventListener 的那个）

对比如下：
```
element.addEventListener('click', function(event) {console.log('target:', event.target);console.log('currentTarget:', event.currentTarget);
});
```
⸻

📌 用途：
• 事件委托（事件代理）：监听父元素的事件，通过 event.target 判断点击了哪个子元素。
• 精确控制交互行为：比如只允许点击某个 class 的按钮触发操作。

⸻

🧪 小测试题：
```
<div id="box"><button class="btn">点击我</button>
</div>document.getElementById('box').addEventListener('click', function(event) {if (event.target.classList.contains('btn')) {alert('按钮被点击了');}
});
```
事件绑定
```
addEventListener()
```
通过这个方法可以为元素绑定响应函数，可以同时为一个元素的相同事件同时绑定多个
参数：
- 事件的字符串，不要on
- 回调函数，当事件触发时该函数会被调用
- 是否在捕获阶段触发事件，需要一个布尔值，一般false
该方法在IE8及以下不支持addEventListener，可以使用attachEvent()
参数：
- 事件字符串，要on
- 回调函数
  element.attachEvent('on事件名', 回调函数);
事件传播

微软公司任务事件应该是有内像外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播。
网景公司任务事件应该是由外向内传播，即事件捕获

w3c综合之后，将事件传播分成了三个阶段
- 捕获阶段
  从最外层的祖先元素，向目标元素进行事件的捕获，但不会触发事件
- 目标阶段
  事件捕获到目标元素，捕获结束开始在目标上触发事件
- 冒泡阶段
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true;
IE8没有捕获阶段