1、複数htmlタグクリックイベントの実装詳細について
4000 ワード
1、複数のhtmlタグに対してイベントをクリックするエラーの書き方、および原因分析
1.1複数htmlタグクリックイベントの典型的な誤記
1.1.1 htmlコード
書き方を間違えた結果:
どのh 1ラベルをクリックしても、弾けたのは666です.
誤記の原因分析:
ラベルのクリックイベントは、ラベルをクリックしたときにのみトリガーされるからです.
ラベルをクリックすると、iの数値はすでに6になっているので、どのh 1のラベルをクリックしても、
弾き出す情報はすべて666です.
2、正しい書き方、thisキーワードを使う
2.1複数のhtmlタグがイベントをクリックして、勝ち取る書き方
2.1.1 Javascriptの書き方
2.1.2 Jqueryの書き方
3、クリックイベントのケーススタディについて
3.1要求
すべてのaラベルの中のimgラベルに、クリックイベントを追加します.
3.2 htmlコード
3.2 Javascriptコード
1.1複数htmlタグクリックイベントの典型的な誤記
1.1.1 htmlコード
<body>
<h1>111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555</h1>
<h1>666</h1>
</body><script type="text/javascript">
window.onload = function() {
var hlist = document.getElementsByTagName('h1');
console.log(hlist.length)
/* */
for (var i = 0; i < hlist.length; i++) {
var htag = hlist[i];
htag.onclick = function() {
alert(htag.innerHTML);
}
}
}
</script>書き方を間違えた結果:
どのh 1ラベルをクリックしても、弾けたのは666です.
誤記の原因分析:
ラベルのクリックイベントは、ラベルをクリックしたときにのみトリガーされるからです.
ラベルをクリックすると、iの数値はすでに6になっているので、どのh 1のラベルをクリックしても、
弾き出す情報はすべて666です.
2、正しい書き方、thisキーワードを使う
2.1複数のhtmlタグがイベントをクリックして、勝ち取る書き方
2.1.1 Javascriptの書き方
<script type="text/javascript">
window.onload = function() {
var hlist = document.getElementsByTagName('h1');
console.log(hlist.length)
for (var i = 0; i < hlist.length; i++) {
var htag = hlist[i];
/* this */
htag.onclick = function() {
alert(this.innerHTML);
}
}
}
</script>2.1.2 Jqueryの書き方
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('h1').click(function() {
alert($(this).html());
});
});
</script>3、クリックイベントのケーススタディについて
3.1要求
すべてのaラベルの中のimgラベルに、クリックイベントを追加します.
3.2 htmlコード
<body>
<div id="myimg">
<ul>
<li>
<a href="photos/image1.jpg" title="1">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="2">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="3">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image4.jpg" title="4">
<img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image5.jpg" title="5">
<img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>
</body>3.2 Javascriptコード
// window.onload
// window.onload ，
window.onload=function(){
//
var div=document.getElementById("myimg");
// a
var href=div.getElementsByTagName("a");
//
for(var i=0;i<href.length;i++){
//
href[i].onclick=function(){
// ： img
alert(this.getElementsByTagName('img')[0].src);
// ：
// onclick href ，href onclick ， onclick false href
return false;
}
}
}