AP102 2016/4/27 e.target.nodeName
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<script src="new.js"></script>
<title>Events</title>
</head>
<body>
<form id="theForm">
<fieldset>
<legend>Events</legend>
<p>Select the events you want to listen for</p>
<hr>
<div>
<input type="checkbox" id="click" name="click" value="click">
<label for="click">Click</label>
</div>
<div>
<input type="checkbox" id="contextmenu" name="contextmenu" value="contextmenu">
<label for="contextmenu">Contextmenu</label>
</div>
<div>
<input type="checkbox" id="select" name="select" value="select">
<label for="select">Select</label>
</div>
<div>
<input type="checkbox" id="resize" name="resize" value="resize">
<label for="resize">Resize</label>
</div>
<div>
<input type="checkbox" id="mouseover" name="mouseover" value="mouseover">
<label for="mouseover">Mouseover</label>
</div>
<hr>
<div>
<input type="submit" value="Submit" id="submit">
</div>
<div>
<label for="output">Output</label>
<textarea id="output" name="output" rows="10" disabled></textarea>
</div>
</fieldset>
</form>
</body>
</html>css
body{
font:normal 120% Tahoma,Verdana,Arial;
background: #ccc;
}
form{
background: #fff;
border: 1px solid #ddd;
padding: 10px;
width:180px;
}
div{
margin: 8px 0px;
/*border: 1px solid red;*/
}
input{
border-radius: 3px;
}JS
function doFirst(){
document.getElementById('theForm').onsubmit = setEvent;//setEvent is defined by yourself
}
function setEvent(){
var events = ['click','contextmenu','select','resize','mouseover']; //events是陣列
for(var i=0; i < events.length; i++){
var checkbox = document.getElementById(events[i]);
if(checkbox.checked){
document.addEventListener(events[i],report,false);//checkbox.checked回傳是否被勾選
}
}
document.getElementById('output').value = '';
return false;
}
function report(e){
var message = e.target.nodeName+':'+ e.type + '\n';
document.getElementById('output').value += message;
}
window.addEventListener('load',doFirst,false);
// DIV:click
// BODY:contextmenu
// FIELDSET:click
Comments
Post a Comment