如何修改此 HTML 文档以使用 DOM 2 事件模型答案

【问题标题】：How do I revise this HTML document to use the DOM 2 Event Model如何修改此 HTML 文档以使用 DOM 2 事件模型
【发布时间】：2018-10-05 16:36:43
【问题描述】：

我很困惑，我能够使用 DOM 0 Evemt 模型成功完成文档。我只是不确定如何修改它以满足 DOM 2 事件模型标准。我问过 Chegg 的差异导师，他们也想不通。当然这里有人可以帮助我！:)

附：我已经阅读了几篇不同的文章，例如http://cs.loc.edu/~chu/ITEC315/ch5/DOM2.html，它讨论了 DOM2，甚至给出了 DOM2 事件模型文档的示例。我认为它看起来与 DOM 0 非常相似，但对我来说仍然没有意义。我只需要有人查看我的文档并真正指导我完成它并指出一些内容。就像“这就是你在 DOM2 事件模型中所做的事情。

谢谢德雷克！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Tue, 02 Oct 2018 05:15:54 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Assignment1 M5A1</title>
  </head>
  <body>
<h4>Pick your favorite color!</h4>
<form id="myform" action="">
<p>
<label>
<input type="radio" name= "ColorButton" value="1" onclick = "Colorchoice(1)"/>
Red

</label>
<br />


<label>
<input type="radio" name= "ColorButton" value="2" onclick = "Colorchoice(2)"/>
Blue

</label>
<br />



<label>
<input type="radio" name= "ColorButton" value="3" onclick = "Colorchoice(3)"/>
Green

</label>
<br />


<label>
<input type="radio" name= "ColorButton" value="4" onclick = "Colorchoice(4)"/>
Yellow

</label>
<br />



<label>
<input type="radio" name= "ColorButton" value="5" onclick = "Colorchoice(5)"/>
Orange

</label>
<br />

</p>


</form>

<script>
function Colorchoice(Color) {

switch(Color){
case 1:
alert("Your favorite color is Red");
break;


case 2:
alert("Your favorite color is Blue");
break;



case 3:
alert("Your favorite color is Green");
break;




case 4:
alert("Your favorite color is Yellow");
break;



case 5:
alert("Your favorite color is Orange");
break;

default:
alert("Error in JavaScript function Colorchoice");
break;
}
}

</script>

  </body>
</html>

【问题讨论】：

标签： javascript html events dom model

【解决方案1】：

看起来它正在工作...... https://jsfiddle.net/audshwr0/

<h4>Pick your favorite color!</h4>
<form id="myform" action="">
<p>
<label>
<input type="radio" name= "ColorButton" value="1" onclick = "Colorchoice(event)"/>
Red

</label>
<br />


<label>
<input type="radio" name= "ColorButton" value="2" onclick = "Colorchoice(event)"/>
Blue

</label>
<br />



<label>
<input type="radio" name= "ColorButton" value="3" onclick = "Colorchoice(event)"/>
Green

</label>

<script>
function Colorchoice(event) {
console.log(event.target.value);
}
</script>

【讨论】：

还有一个小问题，我看到你修改了我的代码，现在它不起作用。我需要重新添加case语句吗？再次抱歉，我对 DOM 2 元素模型感到很困惑。哈哈