jQuery学習メモ5(jQueryでのイベント)

10397 ワード

$  JQuery  ，        。          、     ，          ，

1
jquery: $(document).ready()Javascript:windowの代わりに、DOM構造がロードするとイベントに応答できる.onload()【ページ要素をすべてブラウザにロード】.
$(document)を使用します.ready()の場合、イベントがピクチャのアスペクト操作であり、エレメントの関連ファイルがダウンロードされていない場合、イベントは必ずしも有効ではありません.
解決策--jQueryのもう一つのページロードに関する方法--load():要素がロードされてから、イベントに応答します.
jQuery:$(window).load(function(){.................}) == javascript : window.onload()=function(){................}
二
イベントバブル:
Span->out div,event responsing one by one
内側から外側に広がる

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>

<!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" >
<head runat="server">
    <title>    </title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div id="content">
    
    out div
    <br />
    <span>internal div</span>
    <br />
    out div
    </div>
    <div id="msg"></div>
    </form>
</body>
</html>
<script>
$(function(){
    //Span->out div,event responsing one by one
    $("span").bind("click",function(){
        var txt=$("#msg").html()+"<p>internal span is clicked";
        $("#msg").html(txt);
        console.info(txt)
      
            })
    $("#content").bind("click",function(){
        var txt=$("#msg").html()+"<p>out div is clicked";
        $("#msg").html(txt);
        console.info("1:"+txt)
    })
    

})
</script>

泡を解決する方法:functionのパラメータに追加する
イベントイベントオブジェクト.htmlの要素をクリックすると、イベントオブジェクトが作成されます.このイベントオブジェクトは、イベント処理関数のみが実行にアクセスできます.
event.stopPropagation();//イベントバブルの停止

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>

<!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" >
<head runat="server">
    <title>    </title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div id="content">
    
    out div
    <br />
    <span>internal div</span>
    <br />
    out div
    </div>
    <div id="msg"></div>
    </form>
</body>
</html>
<script>
$(function(){
    //Span->out div,event responsing one by one
    $("span").bind("click",function(event){
        var txt=$("#msg").html()+"<p>internal span is clicked";
        $("#msg").html(txt);
        console.info(txt)
        event.stopPropagation();//       
            })
    $("#content").bind("click",function(event){
        var txt=$("#msg").html()+"<p>out div is clicked";
        $("#msg").html(txt);
        console.info("1:"+txt)
    })
    

})
</script>

三
エレメントのデフォルト動作をブロックするには、次の手順に従います.
例えばformフォームがコミットをクリックするとフォームがコミットされますが、まずフォームを検証し、要求に合ってコミットしますか?
ここで使うpreventDefault();
イベントキャプチャは、イベントバブルとは反対に、イベントキャプチャ石が最上位から下にトリガーされます.
body->div->span

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>

<!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" >
<head runat="server">
    <title>    </title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    
    
</head>
<body>
    <form id="form1" runat="server" action="../jQueryDom/JqueryCSS_DOM2.aspx" method="post">
       ：<input type="text" id="username" />
    <br /> 
    <input type="submit" value="  " id ="sub" />
     
    <div id="content">
    out div
    <br />
    <span>internal div</span>
    <br />
    out div
    </div>
    <div id="msg"></div>

    </form>
</body>
</html>
<script>

$("#sub").bind("click",function(event){
    var username=$("#username").val();//get $("#username")'s value
    if(username.length<6)
    {
        $("#msg").html("<p>      </p>");
        event.preventDefault(); // return false ;   
    }
} )
</script>

四
イベントの削除
unbind([type][date])パラメータ1イベントタイプ、パラメータ2を削除する関数
知識点:
$("#msg").html("

bind function 2

");//htmlの内容は$("#msg")で上書きする.html()+"

bind function 3

";//http ml内容は後へ続く
id=btnのclickイベントを削除し、id=btnのすべてのイベントを削除します.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>

<!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" >
<head runat="server">
    <title>    </title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    
    
</head>
<body>
    <form id="form1" runat="server" action="../jQueryDom/JqueryCSS_DOM2.aspx" method="post">
       ：<input type="text" id="username" />
    <br /> 
    <input type="submit" value="  " id ="sub" />
     <br />
     <input type="button" value="click me" id="btn" />
     <br />
     <input type="button" value="    " id="delAll" />
    <div id="content">
    out div
    <br />
    <span>internal div</span>
    <br />
    out div
    </div>
    <div id="msg"></div>

    </form>
</body>
</html>
<script>

//     -    

$("#btn").bind("click",function(){
    $("#msg").html("<p>bind function 1</p>");
    $("#msg").html("<p>bind function 2</p>"); //html      
     var msg1= $("#msg").html()+"<p>bind function 3</p>";  //html       
     console.info("1 :"+msg1);
    
})

//    -1            
$("#btn").bind("click",function(){
    $("#msg").append("<p>bind function 1</p>");  // append :html       
    console.info("1")
}).bind("click",function(){
    $("#msg").append("<p>bind function 2</p>");
    console.info("2")
}).bind("click",function(){
    $("#msg").append("<p>bind function 3</p>");
    console.info("3")
})
//    
//$("#delAll").click(function(){//bind      
//    $("#btn").unbind("click");//   id=btn    click   ，（submit       ）
//    console.info("delete");
//})
$("#delAll").bind("click",function(){
    $("#btn").unbind();
    console.info("bind-delete");
})


</script>

2指定された関数のイベントを削除します.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>

<!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" >
<head runat="server">
    <title>    </title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    
    
</head>
<body>
    <form id="form1" runat="server" action="../jQueryDom/JqueryCSS_DOM2.aspx" method="post">
       ：<input type="text" id="username" />
    <br /> 
    <input type="submit" value="  " id ="sub" />
     <br />
     <input type="button" value="click me" id="btn" />
     <br />
     <input type="button" value="    " id="delAll" />
    <div id="content">
    out div
    <br />
    <span>internal div</span>
    <br />
    out div
    </div>
    <div id="msg"></div>

    </form>
</body>
</html>
<script>
//    -1            ,          
$("#btn").bind("click",Fun1=function(){
    $("#msg").append("<p>bind function 1</p>");  // append :html       
    console.info("1")
}).bind("click",Fun2=function(){
    $("#msg").append("<p>bind function 2</p>");
    console.info("2")
}).bind("click",Fun3=function(){
    $("#msg").append("<p>bind function 3</p>");
    console.info("3")
})
//        
$("#delAll").bind("click",function(){
    $("#btn").unbind("click",Fun2); //          ，  Fun2  ，     
    console.info("bind-delete");
})

</script>

one()は
bind()ですが、one()は一度だけ作用し、その後バインドはすぐに解除されます.上のコードのbindをoneに変えてみて~

jqueryとjsはイベントのバブルを阻止する

Applet問題