事件流 当代码在一个元素和其祖先元素或后代元素上都有事件处理程序 时,事件流才会变得非常重要。 对于DOM事件处理程序,所有现代浏览器默认都会使用事件冒泡 模型而不是事件捕获模型。 addEventListener(方法的最后一个 参数允许选择事件触发的方向: true表示捕获方式 false表示冒泡方式
事件流 当代码在一个元素和其祖先元素或后代元素上都有事件处理程序 时，事件流才会变得非常重要。 对于DOM事件处理程序，所有现代浏览器默认都会使用事件冒泡 模型而不是事件捕获模型。addEventListener()方法的最后一个 参数允许选择事件触发的方向： true表示捕获方式 false表示冒泡方式
事件流 <script> function showElemento t alert(this innerHTML) 案例5:<body) <div id="page"> <hI>List King/h1> el document. getElementByld( list) <h2>Bubble</h2> el addEventListener('click, showElement, false) <ul id=list> <li id"item"><a id=link">fresh figs</a</li> el document getElementByld(item") /u1 el addEventListener('click, showElement, false) <div> el document getElementByld(link") <div id=page"> el addEventListener('click, showElement, false) <hI>List King</h1> <h2>Capture</h2> el= document. getElementByld"list2 ") <ulid="1ist2→> el addEventListener('click, showElement, true) <li id=item2"><a id="link2>fresh figs</a></1i> u1> el document getElementByld(item2") <div> el addEventListener('click, showElement, true) el document getElementByld( link2") el addEventListener('click, showElement, true) script
事件流 案例5：<body> <div id="page"> <h1>List King</h1> <h2>Bubble</h2> <ul id="list"> <li id="item"><a id="link">fresh figs</a></li> </ul> </div> <div id="page"> <h1>List King</h1> <h2>Capture</h2> <ul id="list2"> <li id="item2"><a id="link2">fresh figs</a></li> </ul> </div> <script> function showElement() { alert(this.innerHTML); } el = document.getElementById("list"); el.addEventListener('click', showElement, false); el = document.getElementById("item"); el.addEventListener('click', showElement, false); el = document.getElementById("link"); el.addEventListener('click', showElement, false); el = document.getElementById("list2"); el.addEventListener('click', showElement, true); el = document.getElementById("item2"); el.addEventListener('click', showElement, true); el = document.getElementById("link2"); el.addEventListener('click', showElement, true); </script>
事件对象 在触发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含 所有与特定事件相关的信息。包括导致事件的元素,事件的类型以及其 他与特定事件相关的信息。 例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操 作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支 持 event对象,但支持方式不同 如果需要传递一个参数给命名函数,事件对象作为匿名封装函数的第 个参数传递进去,然后需要为命名函数指定相应的参数。 ■当事件对象被传递给函数时,它的参数名称通常都是e( event的缩写)。 不过需要注意的是,有些程序员使用参数e来表示错误对象,所以在某 些脚本中e来表示错误对象,也可能表示错误
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含 所有与特定事件相关的信息。包括导致事件的元素，事件的类型以及其 他与特定事件相关的信息。 例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操 作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支 持event对象，但支持方式不同。 如果需要传递一个参数给命名函数，事件对象作为匿名封装函数的第一 个参数传递进去，然后需要为命名函数指定相应的参数。 当事件对象被传递给函数时,它的参数名称通常都是e(event的缩写)。 不过需要注意的是，有些程序员使用参数e来表示错误对象，所以在某 些脚本中e来表示错误对象，也可能表示错误