対象の要素を絞ってイベントを登録する

今回紹介するon()は、
これまでの記事で紹介したイベントを別の書き方で
設定できるメソッドです。

基本的な書き方はone()と同様で、イベントの発生条件には、
click,dblclick,mouse****等のイベントを感知する命令を
指定します。その後、「,」カンマで区切り、
function(){...}に実行したい処理を書きます。

$(セレクター).on(イベント発生の条件,function(){
　イベント発生時に実行する処理
});

one()と異なる点は、ここで設定した処理はイベントが
発生するたびに実行されます。

サンプルコードを実行すると、以前書いた
mouseover/mouseoutの記事と同様の処理が行われます。

青い四角に、マウスのカーソルをのせると黄色に
黄色四角から、マウスのカーソルをどけると青に戻ります。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        background-color:white;
        font-weight:100;
        margin:0 auto;}
    #box{
        width:100px;
        height:100px;
        background-color:blue;}
    button,li{margin:8px;}
    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">

<div id="box"></div>

<button>画像を追加</button>

<ul>
    <li><a href="kuroneko.jpg">黒猫</a></li>
    <li><a href="shironeko.jpg">白猫</a></li>
    <li><a href="mikeneko.jpg">三毛猫</a></li>    
</ul>
<p><img src="kuroneko.jpg" alt="黒猫" width="100" height="100"></p>
    
</div><!--contatiner-->
    

<script>
$(document).ready(function(){
    $("#box").on("mouseover",function(){
        $(this).css("background-color","yellow");
    });
    $("#box").on("mouseout",function(){
        $(this).css("background-color","blue");
    });
    /*
    $("a").click(function(){
       $("img").attr("src",$(this).attr("href"))
            .attr("alt",$(this).text());
        return false;
    });
    */
    
    $("ul").on("click","a",function(){
       $("img").attr("src",$(this).attr("href"))
            .attr("alt",$(this).text());
        return false;
    });

    $("button").click(function(){
        $("ul").append("<li><a href='kuroneko.jpg'>ぶち猫</a></li>"); 
    });
});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:white;

font-weight:100;

margin:0 auto;}

#box{

width:100px;

height:100px;

background-color:blue;}

button,li{margin:8px;}

</style>

</head>

<body>

<button>画像を追加</button>

<ul>

</ul>

</div>

$(document).ready(function(){

$("#box").on("mouseover",function(){

$(this).css("background-color","yellow");

});

$("#box").on("mouseout",function(){

$(this).css("background-color","blue");

});

$("a").click(function(){

$("img").attr("src",$(this).attr("href"))

.attr("alt",$(this).text());

return false;

});

$("ul").on("click","a",function(){

$("img").attr("src",$(this).attr("href"))

.attr("alt",$(this).text());

return false;

});

$("button").click(function(){

$("ul").append("<li><a href='kuroneko.jpg'>ぶち猫</a></li>");

});

</script>

</body>

</html>

mouseover(function(){...})とon("mouseover",function(){...})は
同じ処理をします。

on()には別の機能があります。イベントの発生条件の後ろに
「イベントが発生する要素」を指定できます。

サンプルコードでは、ul要素内のa要素がクリックされたときに、
img要素のsrc,altの属性を書き換えています。
セレクターで指定した要素内にある特定の要素でイベントが
発生した時だけ、処理を行える機能がon()にあります。

なぜ、その書き方をするかはメリットがあるからです。
この方法だと、実行した時点ではHTMLに存在していない要素、
将来追加される要素にもイベント処理が追加できるからです。

分かりにくいのでサンプルコードのご覧ください。
５０～５６行目のコメントアウト外して
５７～６３行目をコメントアウトしてください。

そしてじっこうすると、
ul要素を使って猫のリストが並んでいます。
そして猫の名前をクリックすると、猫の画像が
切り替わります。

ですが、「画像を追加」ボタンをクリックして、
「ぶち猫」をクリックすると、画像が置いてある
URLへジャンプしてしまいます。

なぜ、そうなるのかというと、
a要素のイベント処理は、$(function(){...})でHTMLが
ブラウザーに読み込まれた時点で設定しています。この時点では
「ぶち猫」はa要素に存在していないからです。

イベント設定時に存在しなかった要素にも
on()命令を使うとイベント処理を適用できます。

５０～５６行目のコメントアウトしてください。
５７～６３行目をコメントアウトを外してください。

そうすると、追加したぶち猫の画像も切り替わり
別のページに飛ばされることもなくなります。

on()がセレクターで指定したul要素の内側に
ある要素がクリックされたときに、その要素が
「イベントが発生する要素」かどうかで処理するか
否かを判定しているからです。