Back to feed
Renewal·서른의 생활코딩

Sample source 4) JavaScript basic document structure: window object 3) events / event handlers

NS
normalstory
cover image


Sample source 4) JavaScript basic document structure: window object 3) events / event handlers



The basics of programming that responds to the user's requests or movements~ 
An example where you can change the background color
by moving the mouse or using the Tab key.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">




<head>


<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />


<title>window object events / event handlers</title>




<meta name="Keywords" content="" />


<meta name="Description" content="" />




<script type="text/javascript">


//<![CDATA[




// the user's action itself (moving the mouse, pressing a key, etc.) = event


// the moment the user's action is conveyed (prefix the event with "on") = event handler




//]]]]]]>


</script>




</head>




<body onfocus="document.bgColor='orange'" onblur="document.bgColor='gray'">


<!-- You can move focus using the Tab key. -->


</body>




</html>

This English version was translated by Claude.

친절한 찰쓰씨
Written by
친절한 찰쓰씨

Pleasant Charles — UI/UX researcher at AIT. Keeping notes on design, planning, and slow days here since 2010.

More on the author's page

Keep reading

Renewal

Why You Should Use .html Instead of .md Seeing Is Believing

Jul 25, 2026·1 min
Renewal

The Most Important Thing About AX

Jul 17, 2026·2 min
Renewal

디지털 기술과 혁신에 대한 논고(지탱하는 힘)

Jul 17, 2026·5 min