0
jQueryレッスンのサンプルコードをコピーし、イベントオブジェクトから要素を抽出するセクションを見つけました。イベントオブジェクトから要素を抽出する方法
evtは、クリックされた要素を指しています。私の本によれば、evt.targetは、その要素がどの要素に呼び出されたのかを知ることができます。コンソールにevt.targetと入力すると、ReferenceError: evt is not definedと表示されます。ユーザーがクリックした要素をどうやって見つけましたか？
のjQueryコード：
$('#btnAddTask').click(function(evt) { //user clicks 'Add Task' button
evt.preventDefault();
$('#taskCreation').removeClass('not'); //removes the 'not' class, which hides the input fields
});
フル例（HTML、CSS、jQueryの）その変数が唯一の内部範囲を有するので
@CHARSET "UTF-8";
body, h1, h2, h3, h4, h5, h6, p, ul, dl, ol, form, fieldset, input, label, table, tbody, tfoot, th, tr, td, textarea, select {
font-family: "helvetica neue", helvetica, "lucinda sans unicode", "sans serif";
font-weight: normal;
color: #333;
padding: 0;
border: 0;
margin: 0;
font-size: 12px;
}
header {
width: 100%;
height: 80px;
background: #d1e0e1;
color: #333;
font-weight: bold;
font-size: 20px;
text-align: center;
line-height: 80px;
}
footer {
width: 100%;
height: 60px;
background: #d1e0e1;
font-size: 12px;
text-align: center;
line-height: 80px;
margin-top: 30px;
}
table, th, td {
border: 1px solid #888;
}
section {
margin: 20px 0 0 20px;
}
table {
width: 90%;
border-collapse: collapse;
}
thead {
line-height: 30px;
}
thead th {
background: #53777a;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
}
td {
font-size: 11px;
line-height: 25px;
padding-left: 10px;
}
.even {
background-color: #f8f8f8;
}
nav {
margin: 15px 0 10px 0;
}
nav a {
background: #53777a;
color: #fff;
width: 80px;
text-decoration: none;
border: 1px solid #5b5b5b;
font-size: 13px;
text-align: center;
padding: 5px 10px;
}
label {
display: block;
padding: 8px 0 8px 0;
color: #333;
}
input {
border-radius: 3px;
height: 24px;
border: 1px solid #AAA;
padding: 0 7px;
}
input.large {
width: 400px;
}
select {
border: 1px solid #AAA;
overflow: hidden;
margin-right: 15px;
width: 200px;
}
.required {
color: red;
}
.not {
display: none;
}
.rowHighlight {
font-weight: bold;
}
label.error {
color: red;
font-weight: bold;
}
.overdue {
background: #F7DCE5;
}
.warning {
background: #F7F7DC;
}
.taskCompleted {
text-decoration: line-through;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task list</title>
<link rel="stylesheet" type="text/css" href="styles/tasks.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<header>
<span>Task list</span>
</header>
<main>
<section id="taskCreation" class="not">
<form>
<div>
<label>Task</label>
<input type="text" required="required" name="task" class="large" placeholder="Breakfast at Tiffanys" />
</div>
<div>
<label>Required by</label>
<input type="date" required="required" name="requiredBy" />
</div>
<div>
<label>Category</label>
<select name="category">
<option value="Personal">Personal</option>
<option value="Work">Work</option>
</select>
</div>
<nav>
<a href="#">Save task</a> <a href="#">Clear task</a>
</nav>
</form>
</section>
<section>
<table id="tblTasks">
<colgroup>
<col width="50%">
<col width="25%">
<col width="25%">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Due</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr data-priority="high">
<td data-name-field="true">Return library books</td>
<td>
<time datetime="2013-10-14">2013-10-14</time>
</td>
<td>Personal</td>
</tr>
<tr data-priority="medium">
<td data-name-field="true">Perform project demo to stakeholders</td>
<td>
<time datetime="2013-10-14">2013-10-14</time>
</td>
<td>Work</td>
</tr>
<tr data-priority="low">
<td data-name-field="true">Meet friends for dinner</td>
<td>
<time datetime="2013-10-14">2013-10-14</time>
</td>
<td>Personal</td>
</tr>
</tbody>
</table>
<nav>
<a href="#" id="btnAddTask">Add task</a>
</nav>
</section>
</main>
<footer>You have 3 tasks</footer>
</body>
<script>
$('[required="required"]').prev('label').append('<span>*</span>').children('span').addClass('required');
$('tbody tr:even').addClass('even');
$('#btnAddTask').click(function(evt) {
evt.preventDefault();
$('#taskCreation').removeClass('not');
});
</script>
</html>
ます場合 - にconsole.log（EVT） - コンソールに全体的にオブジェクトが表示されますその構造化された仕組み – Tasos