Interactivity with JavaScript · 用 JavaScript 添加交互
| English | 中文 | Pinyin · 拼音 |
|---|---|---|
| DOM/dɒm/ | 文档对象模型 | wén dàng duì xiàng mó xíng |
| event/ɪˈvent/ | 事件 | shì jiàn |
| function/ˈfʌŋkʃn/ | 函数 | hán shù |
A menu opens, but its button still says it is closed
- A visible panel and its accessibility state can disagree. A reliable interaction updates both the content and the control that describes it.
- Browser JavaScript responds to user actions. Do not put private credentials in client code; visitors can inspect and change what runs on their machines.
Find the parsed elements
- The DOM 文档对象模型 represents the document as nodes as HTML is parsed. Code can query an existing node and change its properties.
- A script running before its target is parsed may get
null. A deferred external script runs after parsing; a script at the end of the body can also work for elements already above it.
What does the DOM represent?
Nodes become available as the document is parsed; a query cannot find a target that has not yet been parsed.
Register the response once
- An event 事件 records an action such as a click or form submission.
addEventListenerregisters a function 函数 to run when that event is dispatched. - Find the button and panel, register the listener, then update state on each click. Do not call the function while registering it if you mean to pass it as a handler.
Which method registers an event handler on an element?
addEventListener registers a callback for an event such as click.
Put the steps for setting up this interaction in order.
Registration precedes the event response; the handler runs when the event is dispatched.
Keep a usable fallback
- Save this as an HTML file. The links are initially visible; the toggle button appears only after its handler is ready.
- Click the button twice. Check that the panel and
aria-expandedchange together. The native button also responds to keyboard activation.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Club menu</title></head>
<body>
<button id="menu-button" type="button" hidden
aria-controls="menu-panel" aria-expanded="true">Menu</button>
<nav id="menu-panel" aria-label="Club">
<a href="#meeting">Meeting details</a>
</nav>
<main id="meeting"><h1>Meet Thursday in room 12</h1></main>
<script>
const button = document.querySelector('#menu-button');
const panel = document.querySelector('#menu-panel');
button.addEventListener('click', () => {
panel.hidden = !panel.hidden;
button.setAttribute('aria-expanded', String(!panel.hidden));
});
button.hidden = false;
</script>
</body>
</html>
Initially: links visible, expanded true. First click: links hidden, expanded false. Second click: links visible, expanded true. With JavaScript disabled, the original links remain visible.
In the worked example, JavaScript is disabled. What happens to the original navigation links?
The links start visible. The button starts hidden, so failed enhancement does not remove essential navigation.
Match each panel state to the correct button state.
aria-expanded describes whether the controlled region is currently expanded.
Separate helpful checks from trusted checks
- Browser validation can give quick feedback, but the server must validate submitted values and permissions independently. A caller can bypass or alter browser code.
- Use
textContentto insert plain text rather than interpreting it as HTML. Check missing elements and errors before adding more features.
A click handler alone does not make a custom element keyboard accessible. Use the appropriate native control and verify focus and activation. Also check that your CSS does not override the panel's hidden state.
A server can trust every submitted value because the browser validated it.
Callers can bypass or alter browser code. Validate values and permissions independently on the server.
Trace two actions and a failure
- Record initial state and the state after two activations. Repeat using the keyboard, then check that essential navigation remains available without the script.
- Explain what runs in the browser and what still needs server checks. Test this local example without sending any real form data.
Parsed element → registered event handler → consistent state update. Preserve useful fallback content and keep trusted validation on the server.
The panel starts visible. The toggle runs twice. What is the final state?
The first click hides it; the second restores it. Both states must stay consistent.
Which checks belong in this local interaction review? Select all that apply.
Test operation, state and fallback. Browser code is not a safe place for private credentials.