理解交互,事件触发。

      浏览器完成页面载入时触发 onload事件,调用javascript的内置函数alert(),给用户呈现alert框的信息,然后用户在图片上点击鼠标,触发onclick事件,这个事件应有一段JS代码响应它。这段响应代码用一个命名为touchRock的自定义函数,当用户输入文本后,弹出alert框显示欢迎信息框,同时把rock.png改成rock_happy.png

<html>
<head>
<title> irock- the virtual oet rock</title>
<style>
div.rock {margin-top:200px; text-align:center;}
#rockImg{cursor:pointer;}
</style>
<script type="text/javascript">
	function touchRock(){
		var userName=prompt("what is your name?", "Enter your name here.");
		if(userName){
			alert("It is good to meet you,"+userName+".");
			document.getElementById("rockImg").src="rock_happy.png";
		}
	}
</script>
</head>
<body onload="alert('hello, i am your pet rock.');">
	<div class="rock">
		<img id="rockImg" src="rock.png" alt="irock" onclick="touchRock()">
	</div>
</body>
</html>


你可能感兴趣的:(理解交互,事件触发。)