差分
ナビゲーションに移動
検索に移動
ページの作成：「Knockout.jsの'''eventバインディング'''とは、関連付けられたDOM要素において、パラメーターで指定したイベントが発生した...」
[[Knockout.js]]の'''eventバインディング'''とは、関連付けられた[[DOM]]要素において、パラメーターで指定したイベントが発生したときに、パラメーターで指定されたJavaScript関数が呼び出されるようにする[[Knockout.js/操作バインディング|操作バインディング]]である。
keypressやmouseover、mouseoutなど、任意のイベントをバインドすることができる。
== パラメーター ==
clickバインディングの基本的な書式は以下のとおりである。
<source lang="html5">
<div data-bind="event: { イベント名: 関数名 }>ほげほげ</div>
</source>
eventバインディングのパラメーターには、検出したいイベント名と、検出した際に実行する関数名を指定する。
また「event: { mouseover: someObject.someFunction }」などと記述することでビューモデル以外の任意の[[JavaScript]]の関数を指定することもできる。さらに「event: { mouseover: function(data, event) {}」などと[[匿名関数]]を記述することもできたりする。
=== 追加パラメーター ===
==== イベント名Bubble ====
eventバインディングが入れ子になっていて、かつ子要素側でイベントが発生すると、[[knockout.js]]はデフォルトで親要素のeventバインディングまで実行してしまう。
そのようなことを抑制したい場合には、「イベント名Bubble（たとえば「mouseoverBubble」）」という形式のパラメーターに「false」を設定する。そうすることで親要素へのイベントの伝搬は停止される。
== 備考 ==
=== イベントとクリック ===
クリックに関しては[[knockout.js/clickバインディング|clickバインディング]]が用意されているが、eventバインディングのイベント名に「click」と指定しても同じ動作をする。ようするに[[knockout.js/clickバインディング|clickバインディング]]はeventバインディングの中でも多用されるであろうということで用意されている短縮表記である。
よって、自動的に渡される引数などの挙動も同一なので、このページの記述に漏れがあるかもしれないので、[[knockout.js/clickバインディング|clickバインディング]]のページも見ろ。
<source lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - eventバインディングとclickバインディング</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
<script type="text/javascript">
jQuery(function() {
// ビューモデル
var AppViewModel = function() {
var self = this;
self.buttonClick = function() {
alert("button click!");
return true;
};
};
// バインディング適用
ko.applyBindings(new AppViewModel());
});
</script>
</head>
<body>
<div>
<button data-bind="event: { click: buttonClick, clickBubble: false }">
押してみろ！その１
</button>
<button data-bind="click: buttonClick, clickBubble: false">
押してみろ！その２
</button>
</div>
</body>
</html>
</source>
== 関連項目 ==
* [[Knockout.js]]
** [[Knockout.js/可視バインディング|可視バインディング]]
** [[Knockout.js/制御フローバインディング|制御フローバインディング]]
** [[Knockout.js/操作バインディング|操作バインディング]]
== 参考文献 ==
<references/>
== 外部リンク ==
{{stub}}
keypressやmouseover、mouseoutなど、任意のイベントをバインドすることができる。
== パラメーター ==
clickバインディングの基本的な書式は以下のとおりである。
<source lang="html5">
<div data-bind="event: { イベント名: 関数名 }>ほげほげ</div>
</source>
eventバインディングのパラメーターには、検出したいイベント名と、検出した際に実行する関数名を指定する。
また「event: { mouseover: someObject.someFunction }」などと記述することでビューモデル以外の任意の[[JavaScript]]の関数を指定することもできる。さらに「event: { mouseover: function(data, event) {}」などと[[匿名関数]]を記述することもできたりする。
=== 追加パラメーター ===
==== イベント名Bubble ====
eventバインディングが入れ子になっていて、かつ子要素側でイベントが発生すると、[[knockout.js]]はデフォルトで親要素のeventバインディングまで実行してしまう。
そのようなことを抑制したい場合には、「イベント名Bubble（たとえば「mouseoverBubble」）」という形式のパラメーターに「false」を設定する。そうすることで親要素へのイベントの伝搬は停止される。
== 備考 ==
=== イベントとクリック ===
クリックに関しては[[knockout.js/clickバインディング|clickバインディング]]が用意されているが、eventバインディングのイベント名に「click」と指定しても同じ動作をする。ようするに[[knockout.js/clickバインディング|clickバインディング]]はeventバインディングの中でも多用されるであろうということで用意されている短縮表記である。
よって、自動的に渡される引数などの挙動も同一なので、このページの記述に漏れがあるかもしれないので、[[knockout.js/clickバインディング|clickバインディング]]のページも見ろ。
<source lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - eventバインディングとclickバインディング</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
<script type="text/javascript">
jQuery(function() {
// ビューモデル
var AppViewModel = function() {
var self = this;
self.buttonClick = function() {
alert("button click!");
return true;
};
};
// バインディング適用
ko.applyBindings(new AppViewModel());
});
</script>
</head>
<body>
<div>
<button data-bind="event: { click: buttonClick, clickBubble: false }">
押してみろ！その１
</button>
<button data-bind="click: buttonClick, clickBubble: false">
押してみろ！その２
</button>
</div>
</body>
</html>
</source>
== 関連項目 ==
* [[Knockout.js]]
** [[Knockout.js/可視バインディング|可視バインディング]]
** [[Knockout.js/制御フローバインディング|制御フローバインディング]]
** [[Knockout.js/操作バインディング|操作バインディング]]
== 参考文献 ==
<references/>
== 外部リンク ==
{{stub}}
