innerText 和 textContent
innerText | textContent | |
---|---|---|
定义 | 非标准属性 | 标准属性 |
返回内容 | 元素及其后代元素的可见文本内容 | 元素及其后代元素的所有文本内容,包括隐藏元素和脚本生成的内容 |
受 CSS 样式 影响 | 会受 CSS 样式的影响(例如 text-transform ) | 否 |
保留空白字符 和换行符 | 是 | 否 |
htmlcollection
designmode
- The WHATWG Blog — The Road to HTML 5: contentEditable
- https://css-tricks.com/the-browser-can-remember-edited-content/
designMode
和 contenteditable
都是 HTML 属性,用于控制元素的可编辑性,但它们有以下区别:
1. 应用范围:
designMode
是一个 文档级 属性,应用于整个 HTML 文档。它用于启用或禁用整个文档的编辑模式。contenteditable
是一个 元素级 属性,应用于单个 HTML 元素。它用于启用或禁用该元素的可编辑性。
2. 功能:
designMode
提供更高级的编辑功能,允许用户使用浏览器提供的编辑工具(如格式化工具栏)来编辑内容。它通常用于富文本编辑器。contenteditable
提供更基本的编辑功能,允许用户直接在元素中输入和编辑文本。它通常用于简单的文本编辑或用户输入。
3. 使用场景:
designMode
通常用于创建富文本编辑器,例如在线文档编辑器、博客编辑器等。contenteditable
通常用于创建简单的文本输入框、评论区、在线聊天等。
4. 代码示例:
html
<!DOCTYPE html><html><head><title>DesignMode vs ContentEditable</title></head><body><h1>DesignMode Example</h1><div id="designModeDiv" contenteditable="true">This is a div with designMode enabled.</div><script>document.designMode = "on"; // Enable designMode for the entire document</script><h1>ContentEditable Example</h1><div id="contentEditableDiv" contenteditable="true">This is a div with contenteditable enabled.</div></body></html>
总结:
designMode
用于整个文档的编辑模式,提供更高级的编辑功能。contenteditable
用于单个元素的可编辑性,提供更基本的编辑功能。
事件 currentTarget 和 target
在JavaScript的事件处理中,target
和currentTarget
是两个非常重要的属性,它们在事件对象中表示不同的概念:
-
target:这个属性表示事件实际触发的元素,即事件最初被触发的那个元素。无论事件如何传播(捕获或冒泡阶段),
target
总是指向最初的事件源。 -
currentTarget:这个属性表示事件当前正在被处理的元素。在事件冒泡或捕获的过程中,每个元素节点都可能是
currentTarget
。换句话说,currentTarget
是当前正在调用事件处理程序的那个元素。
简单来说,target
是事件开始的地方,而currentTarget
是事件当前所在的地方。
举个例子来说明它们的区别:
假设你有以下HTML结构:
html
<div id="parent"><button id="child">点击我</button></div>
并且你为父元素#parent
注册了一个点击事件监听器:
javascript
document.getElementById('parent').addEventListener('click', function(event) {console.log('currentTarget (当前处理的元素): ', event.currentTarget); // 会输出 div#parentconsole.log('target (事件触发的元素): ', event.target); // 会输出 button#child});
当点击按钮时,控制台会输出:
currentTarget (当前处理的元素): div#parenttarget (事件触发的元素): button#child
在这个例子中,尽管事件监听器是注册在父元素#parent
上,但事件实际上是由子元素#child
(按钮)触发的。因此,event.target
是button
元素,而event.currentTarget
是div
元素,因为事件处理程序是在div
上调用的。
Bubbling and capturing
https://javascript.info/bubbling-and-capturing
When an event happens – the most nested element where it happens gets labeled as the “target element” (event.target
).
- Then the event moves down from the document root to
event.target
, calling handlers assigned withaddEventListener(..., true)
on the way (true
is a shorthand for{capture: true}
). - Then handlers are called on the target element itself.
- Then the event bubbles up from
event.target
to the root, calling handlers assigned usingon<event>
, HTML attributes andaddEventListener
without the 3rd argument or with the 3rd argumentfalse/{capture:false}
.
Each handler can access event
object properties:
event.target
– the deepest element that originated the event.event.currentTarget
(=this
) – the current element that handles the event (the one that has the handler on it)event.eventPhase
– the current phase (capturing=1, target=2, bubbling=3).
Any event handler can stop the event by calling event.stopPropagation()
, but that’s not recommended, because we can’t really be sure we won’t need it above, maybe for completely different things.
The capturing phase is used very rarely, usually we handle events on bubbling. And there’s a logical explanation for that.
In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular <td>
may be suited for that exactly <td>
, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last one.
Bubbling and capturing lay the foundation for “event delegation” – an extremely powerful event handling pattern that we study in the next chapter.