Single Choice Question

  1. For properties of event object, the one that handled the event is
    1. target 表示触发事件的目标元素，即用户实际与之交互的那个元素
    2. currentTarget 当前正在调用的监听器所在的元素，不一定是实际触发的元素
    3. srcElement
    4. eventTarget 不存在于标准 API中
  2. The event handler when user clicks on an element is
    1. onMouseOver
    2. onClick
    3. onMouseEnter
    4. onKeyDown
  3. When the DOM is ready, so the handler can look up DOM nodes, initialize the interface, the event is
    1. DOMContentLoaded
    2. load
    3. beforeunload
    4. DOMContentReady
  4. Method which is used to set the focus on the element is
    1. focus()
    2. blur()
    3. select()
    4. focusin()
  5. When users need send the info in a form to the web server, which control type should be used for the button they will click?
    1. button
    2. submit
    3. reset
    4. image

True or False Question

  1. The event handler is a function that is called when an event occurs.
    True
  2. Click events can be bound using the onclick attribute.
    True
  3. The onmouseover event is triggered when the mouse pointer enters an element.
    True
  4. The onmouseout event is triggered when the mouse pointer enters an element.
    False onmouseout 是当鼠标指针离开元素及其子元素时触发的事件

Definition of Term

  1. Bubbling capturing capturing：事件从最外层元素（如 document 或 window）自上而下传播到目标元素，浏览器会从根节点 =>事件源（由外到内）进行事件传播。
    bubbling: 从具体元素开始，传给父级，直到window，事件源 =>根节点（由内到外）进行事件传播。
  2. Event handler 指在事件触发时被浏览器调用的函数或代码块，用于响应事件（如点击、键入、加载等）。

Short Answer

  1. What is the difference between event handler and event listener?
    Event Listener：通过 addEventListener() 注册，对特定事件（如 click）“监听”（listen），可以添加多个监听函数。
    Event Handler：是具体的执行函数，也常以 HTML 属性或 element.onclick = ... 的形式定义，通常是一个元素每种事件只能有一个处理函数。
  2. How to add an event handler to an element?
    1. DOM属性：element.onclick = function(event){};
    2. 事件监听器: element.addEventListener('click', function(event) { });
    3. HTML 属性:<button onclick="handleClick()"> button </button>
  3. What is the event bubbling and capturing phases?
    event bubbling: 捕获阶段（Capturing）：事件从根元素（如 document）向下传递，直到到达目标元素; 目标阶段（Target）：事件到达目标元素，此时会触发绑定在此元素上的 handler。
    event bubbling: 事件从目标元素返回向上父节点，执行监听器（默认阶段）。