HTML DOM允许您在事件发生时执行代码。
The HTML DOM allows you to execute code when an event occurs. Events are generated by the browser when “things happen” to HTML elements:
- An element is clicked on - The page has loaded - Input fields are changed
事件发生时，例如用户单击HTML元素时，可以执行JavaScript。 要在用户单击元素时执行代码，请将JavaScript代码添加到HTML事件属性中：
onclick=JavaScriptHTML事件的示例：
用户单击鼠标时网页加载后加载图像后当鼠标移到元素上时输入栏变更时提交HTML表单时当用户敲击按键时示例：
<h1 onclick="myFunction()">Fuck you</h1> <p onclick="changeText(this)">Click on this text!</p> <!--Script to uses innerHTML --> <script> function myFunction(){ var e=document.getElementsByTagName("h1")[0]; if(e.innerHTML=="Fuck you"){ e.innerHTML="Love you"; }else if(e.innerHTML=="Love you") { e.innerHTML="Fuck you"; } } function changeText(element){ element.innerHTML="Ooops"; } </script> </script>将JavaScript事件处理代码嵌套在html代码中
<p onclick="this.innerHTML='what the hell'">click me.</p>要将事件分配给HTML元素，可以使用事件属性。 如：将onclick事件分配给按钮元素： 在此示例中，单击按钮时将执行名为displayDate的函数。
<p>Click the button to display the date.</p> <button onclick="displayDate()" >The time is?</button> <!--Script to uses innerHTML --> <script> //document.getElementsByTagName("button")[0].οnclick=displayDate; function displayDate(){ document.getElementsByTagName("button")[0].innerHTML=Date(); }HTML DOM允许您使用JavaScript将事件分配给HTML元素：
例如：将onclick事件分配给按钮元素
<p>Click the button to display the date.</p> <button >The time is?</button> <!--Script to uses innerHTML --> <script> document.getElementsByTagName("button")[0].onclick=displayDate; function displayDate(){ document.getElementsByTagName("button")[0].innerHTML=Date(); } </script>综合演示案例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body onload="checkCookies()"> <p id="demo"></p> <hr> <p onclick="this.innerHTML='what the hell'">click me.</p> <hr> <input type="text" onchange="toUpperCase()"></input> <hr> <div style="width:200px;height:50px;background-color:red;text-align:center;line-height:50px" onmouseover="mover(this)" onmouseout="mout(this)"> Fuck you </div> <hr> <div style="width:200px;height:50px;background-color:red;text-align:center;line-height:50px" onmousedown="mdown(this)" onmouseup="mup(this)"> Welcome to China </div> <hr> <button onclick="sayHi()">click me to say hi!</button> <!--Script to uses innerHTML --> <script> function toUpperCase(){ var element=document.getElementsByTagName("input")[0]; element.value=element.value.toUpperCase(); } function mover(element){ element.innerHTML="Love you"; } function mout(element){ element.innerHTML="Fuck you"; } function mdown(element){ element.style.color="yellow"; element.innerHTML="mousedown"; } function mup(element){ element.innerHTML="mouseup"; } function checkCookies(){ if(navigator.cookieEnabled==true) { text="Cookies are enabled."; }else { text="Cookies are not enabled."; } document.getElementById("demo").innerHTML=text; } function sayHi(){ alert("hi!"); } </script> </body> </html>The addEventListener() method example: Add an event listener that fires when a user clicks a button
<button id="demo">click me</button> <!--Script to uses innerHTML --> <script> document.getElementById("demo").addEventListener("click",displayDate); function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script>- 第一个参数是事件类型，如：click - 第二个参数是事件发生时我们要调用的函数。 - 第三个参数是一个布尔值，指定是使用事件冒泡还是使用事件捕获。 此参数是可选的。
意，在事件监听器中，不要为事件使用“ on”前缀。 使用“click”代替“ onclick”。
将多个相同类型事件处理程序添加到同一元素
addEventListener（）方法允许您将许多事件添加到同一元素，而不会覆盖现有事件：
<button id="demo">click me</button> <!--Script to uses innerHTML --> <script> document.getElementById("demo").addEventListener("click",displayDate); document.getElementById("demo").addEventListener("click",myFunction); function displayDate(){ alert("Hello World"); } function myFunction(){ alert("fuck you"); } </script>您可以将不同类型的事件添加到同一元素：
<button id="myBtn">click me</button> <p id="demo"></p> <!--Script to uses innerHTML --> <script> document.getElementById("myBtn").addEventListener("mouseover",displayDate); document.getElementById("myBtn").addEventListener("mouseout",myFunction); document.getElementById("myBtn").addEventListener("click",clickFunction); function displayDate(){ document.getElementById("demo").innerHTML+="Moused over!<br>"; } function myFunction(){ document.getElementById("demo").innerHTML+="Moused out!<br>"; } function clickFunction(){ document.getElementById("demo").innerHTML+="clicked!<br>"; } </script>添加一个事件侦听器，该侦听器在用户调整窗口大小时触发：
<p id="demo"></p> <!--javascript--> <script> window.addEventListener("resize",function(){document.getElementById("demo").innerHTML=Math.random();});HTML DOM中有两种事件传播方式：冒泡和捕获
事件传播是定义当事件发生时，元素触发事件的顺序
比如：一个p标签在div标签中，你点击了p标签，那么这时触发的事件是p标签的还是div标签的呢？
在冒泡时 首先处理最里面的元素的事件，然后处理最外面的元素：首先处理p元素的click事件，然后处理div元素的click事件。
在捕获中 首先处理最外部元素的事件，然后处理内部：首先处理div元素的click事件，然后处理p元素的click事件。
使用addEventListener（）方法，可以使用“ useCapture”参数指定传播类型： 缺省值为false，它将使用冒泡传播；将值设置为true时，事件将使用捕获传播。
示例：
<html> <head> <style> #myDiv1,#myDiv2{ background-color:red; padding:50px; border:1px solid; margin:10px; } #myP1,#myP2{ background-color:yellow; font-size:20px; border:1px solid; padding:20px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <h1>Javascript addEventListener()</h1> <div id="myDiv1"> <h2>冒泡</h2> <p id="myP1">Click me</p> </div> <div id="myDiv2"> <h2>捕获</h2> <p id="myP2">Click me</p> </div> <!--javascript--> <script> document.getElementById("myP1").addEventListener("click",function(){alert("You clicked the yellow element")},false); document.getElementById("myDiv1").addEventListener("click",function(){alert("You clicked the red element")},false); document.getElementById("myP2").addEventListener("click",function(){alert("You clicked the yellow element")},true); document.getElementById("myDiv2").addEventListener("click",function(){alert("You clicked the red element")},true); </script> </body> </html>