JavaScriptのbind()メソッドとon('click')の違い

前へ 次へ
このQ&Aのポイント
  • JavaScriptのbind()メソッドとon('click')は、クリックイベントの処理を追加するための方法です。
  • bind()メソッドは、要素とイベントハンドラの関数を結び付けるために使用されます。
  • 一方、on('click')は、要素に対してクリックイベントをバインドするためのjQueryのメソッドです。
回答を見る
  • ベストアンサー

js bind()

javascript function dani(e){ $('#dani').fadeIn(500, "easeInOutQuad"); // 閉じる $('input[type=button]#dani').bind('click', function(){ dani(dani); removePhrasePanel(); }); } この場合の .bind()ってon('click',function・・・と同じ意味ですか？ http://qiita.com/nmta/items/310aa1cf385fa55129c1 上のurlでは同じ物と言っていますが仕事のプロジェクトで両方使っているので、統一しないという事はメリット、デメリットがあると思い質問しました。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

挙動としては同じでしょうが、on()を使うほうが良いでしょう。 私は業務では、on()しか使いません。 http://www.webcreativepark.net/jquery/events/bind/ 以下、抜粋 > jQuery 1.7.0で、要素にイベントを指定できるon()が追加されており、bind()ではなくon()の利用が推奨されています。 > bind()は要素に直接イベントを指定するのに対して、on()はdocumentにイベントを指定しbind()より高速に動作します。また、bind()はすでに存在する要素に対してしか、イベントが指定できませんがon()やdelegate()は今後追加される要素に対してもイベントが指定できます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQuery - bind('click', x)

    <!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、 この hideFunc （メニューを消す命令） がすぐ呼ばれてしまいます。 適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、 いまいちスマートな感じがしません。 ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください

  • jQueryでの、引数を取るJS関数の呼出方法

    jQueryの学習をしています。 HTML & JavaScriptで下記のように書かれているコード <input type=button id=button1 onclick=func_a() /> <script> function func1(){ //処理いろいろ } </script> は、jQueryを使って書くと、 $('#button1').live('click', func_a); このように書けます。 <input type=button id=button1 onclick=func_b(arg1, arg2) /> <script> function func_b(argument1, argument2){ //処理いろいろ } のように引数を取る関数は jQueryではどのように書けばよいのでしょうか？ $('#button1').live('click', func_b(arg1, arg2)); とは書けなかったので、今は、 if (arg1 == xxx){ $('#button1').live('click', func_b_1_1); } else { $('#button1').live('click', func_b_1_2); } などのように引数別に同じような関数を創って書いています。 DRY原則という同じコードを二度書くなという約束もあるようなので、 きっといい方法があると思うのですが、 お詳しい方、教えていただけるとうれしいです。 どうぞ、よろしくお願いいたします。

  • JSで一つのボタンを押したとき、二つの内容を表示させる方法を教えて下さい

    ボタン<button>を押したとき、<INPUT>に押されたボタンの内容を表示するものを作りまして…。 とりあえず下記のソースをご覧下さい。 －－－－－ソース－－－－－－ ～HTML～ <button onClick="calc('INPUTに表示させる内容')">ボタン１</button> <INPUT TYPE="text" NAME="text1"> ～JavaScript～ function calc(ch) { document.form.text1.value =ch; } －－－－－－－－－－－－－－ 今のやりかたですと一つの<INPUT>にしか入力されないですが、これを二つの<INPUT>にそれぞれ違う内容を入力させることは可能でしょうか。 例えば： ■[ボタン１]を押すと ┃ ┣[インプット１]に表品名 ┃ ┗[インプット２]に表品の値段 雑な説明で申し訳ないですが、宜しくお願い致します。

  • <form>タグ内の再読み込みに関して

    以下のようなhtmlファイルがあったとします。 ※<body>タグ内以外は省略 ------------------------------------------------- <body onload="bodyload()"> <form> <input id="id_button1" type="image" value="button" name="n_button1" onclick="click();"> </form> </body> ------------------------------------------------- 呼び出されるjavascriptを以下の通りとします ------------------------------------------------- function bodyload() { document.getElementById('id_button1').src = '/images/base.png' } function click() { document.getElementById('id_button1').src = '/images/1.png' } ------------------------------------------------- id_button1のクリックによって、click()が動作し画像が「/images/1.png」に変更されるのですが、 一瞬で「/images/base.png」に戻ってしまいます。色々試したところhtmlファイルの<form>タグを 消してやれば「/images/base.png」に戻ることなく画像を変更することが可能であることに気づき ました。 どうやらformタグがあると再読み込みが行われているようです。 formタグがあると何故このような動きをするのでしょうか？　formタグ内でも再読み込みの有無を 制御することはできないのでしょうか？お分かりになる方がいらっしゃればご教授いただければ と思います。 javascriptというよりhtmlの内容かもしれませんがよろしくお願いいたします。 なお、実行環境はWindows8Pro、VisualStudio2012、Windowsストアアプリ開発プロジェクト内のデバッグです。

  • prototype.jsを利用したイベントの登録について

    はじめまして。 現在 prototype.js 1.4.0 を利用して、Web ページの作成を行っているのですが、イベントの登録 (Event.observe)でやりたいことと、異なる動作になってしまい困っているところです。 [ やりたいこと ] javascript側で動的に生成した各要素 (div) に対して moueover & mouseout のイベントを割り当てる。mouseover 時には background の値を変え mouseout 時には background の値を元(transparent)に戻す。 [ 困っていること ] 各要素のmouseover & mouseout 時には各要素の背景色が変更されるはずなのに、一番最後に生成した要素の背景が変更されてしまう。 [ コード ] <html> <head> <script type="text/javascript" src="prototype.js" ></script> <script type="text/javascript"> view = new Class.create(); view.prototype = { initialize:function() { var view = $('viewContents'); var idName = 'test'; for (var i=0; i<10; i++) { var id = idName + i; var d = document.createElement('div'); d.id = id; d.innerHTML = id; view.appendChild(d); Event.observe(d,'mouseover',function() {d.style.background='#aaa';}.bind(this),false); Event.observe(d,'mouseout' ,function() {d.style.background='transparent';}.bind(this),false); Event.observe(d,'click' ,function() {alert(d.id);}.bind(this),false); } } } </script> </head> <body> <p><input type="button" onclick="new view();" value="取得"></p> <div id="viewContents"></div> </body> </html> となります。 なにか基本的なところが間違っているのでしょうか？ よろしくお願いいたします。

  • 読み込み後発動するjsを他のjsに連携させたい

    javascriptを使ってiPhoneアプリを作っています。 サーバー側のmysqlと交信させるようにしているのですが、下記のように単純にpostすると、post後に表示されるのはサーバー側のhoge.ne.jp/usr_in.phpです。 【iphone側　index.html】 <script type="text/javascript" src="js/jquery.js"></script> <form name="form1" id="form1" method="POST" name="form1" action="https://hoge.ne.jp/usr_in.php"> <input type=“hidden” name="myname" value="" /> <input type="hidden" name="pass" value="" /> <button class="button8">購入</button> </form> そこで、下記のような【遷移JS】を用い、ボタンを押すと、サーバー側にpostしたあと、【iphone側のfinish.html】に遷移するようにしました。ここまではうまくいきました。 【遷移JS】 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTMLでの送信をキャンセル event.preventDefault(); // 操作対象のフォーム要素を取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信を防止する。） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', // （デモ用に入力値をちょいと操作します） timeout: 10000, // 単位はミリ秒 // 送信前 beforeSend: function(xhr, settings) { // ボタンを無効化し、二重送信を防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタンを有効化し、再送信を許可 $button.attr('disabled', false); }, // 通信成功時の処理 success: function(result, textStatus, xhr) { // 入力値を初期化 $form[0].reset(); // location.href = "finish.html"; // }, // 通信失敗時の処理 error: function(xhr, textStatus, error) { alert('購入できませんでした。再度お試しください'); } }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="https://hoge.ne.jp/usr_in.php"> <input type=“hidden” name="myname" value="" /> <input type="hidden" name="pass" value="" /> <button class="button8">登録</button> </form> 次に、このmysqlへの会員登録機能を自動化するために、読み込み後に自動的にsubmitされる【自動実行JS】を組み、<body onLoad="loadHello()"></body>で囲んだ後、<form></form>の最底辺に挿入しました。 【自動実行JS】 <SCRIPT language="JavaScript"> function loadHello(){ document.form1.submit(); } </script> 結果、自動登録機能は機能するのですが、サーバー側のhoge.ne.jp/usr_in.phpが表示されてしまい、【iphone側のfinish.html】に遷移してくれません。 bodyをloadした後、【自動実行JS】が実行された時に、【遷移JS】にトスされずにそのまま送信されてしまうようです。どこをどう修正すればいいかご教授願います。

  • イベントハンドラメソッドに関して教えてください

    お世話になります。イベントハンドラメソッドについて教えてください。 -----JS----- function f() { window.alert("Click"); } ---(1) document.myform.mybtn2 = function(){ ---(2) window.alert("Click"); } -----HTML----- <form id="myform" name="myform"> <input type="button" id="mybtn1" name="mybtn1" value="Click" onclick="f()" /> ---(1) <input type="button" id="mybtn2" name="mybtn2" value="Click" /> ---(2) </form> Q:上記のコードで(1)の場合だと正常にalert画面が出ますが、(2)の場合だと何も起こりません。 FirefoxのJavaScriptコンソールで調べると下記のエラーが表示されます。 documnet.myform has no propaties なぜエラーが発生するのか分からずに困っています。 解決の手がかりでもよいので教えてください。

  • javascriptで別窓で出したページとメインページで同時に動作を行ないたいのですが、教えて下さい。

    javascriptで別窓で出したページを登録ボタンを押すと、そのページが閉じて メインページがボタンを押したことで、切り替わるという動作を行ないたいのですが、 良い方法はありますか？教えてください。 <INPUT type='button' value='登録' onClick=\"opener.location.href='$order'\"> <A href=\"javascript:click_close();\">ウィンドウを閉じる</A> 今は、２つのリンクを貼っています。これを一つにしたいのですが、ご伝授下さい。 function click_close () { window.close(); }

  • jsと<audio>タグについて

    HTML5の<audio>タグを使用し、試聴プレーヤーのようなものを作りたいと思っています。 こちらのサイト（http://www.html5-memo.com/audio/player001/）様から拝借したソースが以下です。 javascript------------------ function audioPlay(){ document.getElementById("aka").play(); } function audioPause(){ document.getElementById("aka").pause(); } html----------------------- <audio id="aka" preload="auto">　<!-- 1曲目 --> <source src="audio/aka.mp3" type="audio/mp3"></audio> <input type="button" onclick="audioPlay()" value="再生"> <input type="button" onclick="audioPause()" value="停止"> <audio id="midori" preload="auto">　<!-- 2曲目 --> <source src="audio/midori.mp3" type="audio/mp3"></audio> <input type="button" onclick="audioPlay()" value="再生"> <input type="button" onclick="audioPause()" value="停止"> …以下同じ様にに7曲分… ------------------------- 現状では当然1曲目しか再生されません。 onclick="audioPlay()"がfunction audioPlay()を読みに行き、その中のgetElementById("aka")でID「aka」を指定して<audio id="aka" preload="auto">を実行している、というのは調べてわかったのですが、2曲目のID「midori」を再生するにはどうしたらいいのでしょうか。 audioPlay('aka')、audioPlay('midori')などとして引数を利用するのかな、と思ったのですが、getElementById("aka")がよくわからず・・・ 初心者で質問の内容すら上手く説明できたか不安なのですが、内容を察してくださる方お教え願えませんか。 よろしくお願い致します。

  • JSについて教えてください

    現在ドットインストールというサイトでJavaScriptを勉強しています 今割り勘電卓という物を作っています 完成はしていませんが以下のコードは打ち込まれた数字がきちんと取得されているかを確かめている段階です。 ですがconsole.logに表示されませんなぜでしょうか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <h1>割り勘電卓</h1> <p>支払額：<input type = "text" id = "amount"></p> <p>人数：<input type = "text" id = "num"></p> <p><input type = "button" value = "計算" onclic = "getResult();"></p> <p id = result></p> <script> function getResult(){ var amount = document.getElementById('amount').value; var num = document.getElementById('num').value; console.log(amount); console.log(num); } </script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する