Event
Event bubbling / Event propagationイベントチェーンを防ぐ
$("#btn").click(function(event){
...
event.preventDefault(); //方法１
event.stopPropagation(); //方法２
return false; //方法３
};
ready()の書き方
$(document).ready(function(){
...
});
$.ready(function(){
...
});
$(function(){
...
});
jQuery(document).ready(function(){
...
});
jQuery(function(){
...
});
※実行の順番：ready(DOM) ⇒ imgダウンロードなど ⇒ onload
bind(type,[data],fn)
blur、focus、load、resize、scroll、unload、click、dbclick、
mousedown、mouserup、mousemove、mouseover、mouseout、mouseenter、mouseleave、
change、select、submit、keydown、keypress、keyup
$("#btn").bind("click mouseout", function(){ // 複数指定
...
});
var message="テスト";
$("#txt_name").bind("focus", {msg:message}, function(event){
$("#div1").show().html(event.data.msg);
});
//イベントのバインド（書き方１）
$('#foo').click(function(event) {
...
});
//イベントのバインド（書き方２） 引数渡し
$('#foo').bind('click', {test1:"xxx", test2:"yyy"}, function(event) {
alert(event.data.test1 + event.data.test2 );
});
イベントの切り替え
１．hover(over, out)
$("a").hover(function(){
$("#content").show();
}, function(){
$("#content").hide();
});
↓同様
$("a").mouseenter(function(){
$("#content").show();
});
$("a").mouseleave(function(){
$("#content").hide();
});
２．toggle(fn1,fn2,[fn3,fn4,...]) クリック
$("a").toggle(function(){
$("#content").show();
}, function(){
$("#content").hide();
});
unbind([type],[fn]) イベントを削除
$("input").unbind(); //すべて
$("input").unbind("click");
そのほか
１．one() 一回のみ
$('#btn').one('click', function(){
...
});
２．trigger(type,[data]) ブラウザのデフォルトイベントも発生
triggerHandler ブラウザのデフォルトイベントは発生しない
var $target = $("input");
$target.bind("btn_click", function(){
var txt = $(this).val();
$("#div1").html(txt);
});
$target.trigger("btn_click");
★Event変遷
1．click
$('ol li').click( function() {...});
2. bindとunbind
$('ol li').bind( 'click', function() {...});
3.liveとdie
$('ol li').live( 'click', function() {...});
$('li', $('ol')[0]).live(...);
4.delegateとundelegate
$('ol').delegate('li', 'click', function() {...});
5.onとoff 推薦
$('ol').on('click', 'li', function() {...}); // delegateに相当
$('ol li').on('click', function() {...}); // bindに相当
※定義ソース
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
live: function( types, data, fn ) { // 1.7から廃棄
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
★Event BindとEvent Delegate
Event Delegate（Bubble原理により）のメリット：メモリ消費小、追加したDOMも適用
JavaScript例
<div id="wrap">
<input type="button" value="ボタン１" />
<input type="button" value="ボタン２" />
</div>
var wrap = document.getElementById('wrap'),
var inputs = wrap.getElementsByTagName('input');
for (var i = 0, l = inputs.length; i < l; i++) {
inputs[i].onclick = function () {
alert(i); // ボタン押下：1, 1
}
}
// Closure版
for (var i = 0, l = inputs.length; i < l; i++) {
(function (cur) {
inputs[cur].onclick = function () {
alert(cur); // ボタン押下：0, 1
}
})(i);
}
// delegate版
wrap.onclick = function (event) {
var event = event || window.event,
var target = event.target || event.srcElement;
for (var i = 0, l = inputs.length; i < l; i++) {
if (inputs[i] === target) {
alert(i);
}
}
}
var newInput = document.createElement('input');
newInput.setAttribute('type', 'button');
newInput.setAttribute('value', 'ボタン３');
wrap.appendChild(newInput);
jQuery例
$(function(){
$('.ul a').click(function(e){
alert('xxx');
});
});
$(function(){
$('.ul').on('click', 'a', function(e){
alert('xxx');
});
});
$(document).on("click", "td", function(){
$(this).toggleClass("click");
});
$(document).off("click", "td");
★Event書き方の改良版
書き方１
$('.action').on('click', '#btn-add， #btn-del', function(){
if($(this).attr('id') == 'btn-add'){
...
} else{
...
}
});
書き方２
$('.action').coffee({
click: {
'#btn-add': function(){
...
},
'#btn-del': function(){
...
}
},
mouseenter: {
'#btn-sort': function(){
...
}
}
});
$.fn.coffee = function(obj){
for(var event in obj) {
for(var selector in obj[event]) {
$(this).on(event, selector, obj[event][selector]);
}
}
}
PS CSSも同様
書き方１
.action { width: 100%; color: #000; }
.action #btn-add { color: blue; }
.action #btn-del { color: red; }
書き方２
.action {
width: 100%;
color: #000;
#btn-add {
color: blue;
}
#btn-del {
color: red;
}
}