随分と久しぶりに投稿します。
最近、ExtJSから若干離れたことをしております。（汗；
ひょんな事から、jQueryによるイベントハンドルを行いたい状況で、下記をメモ程度に記載しておきます。
要点は
- 独自のイベントを定義して
- そのイベントをハンドルする
ということです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQueryで独自イベントのハンドル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.each(["addClass", "removeClass"], function(i, methodname) {
var oldmethod = $.fn[methodname];
$.fn[methodname] = function() {
oldmethod.apply(this, arguments);
this.trigger(methodname + "Change");
return this;
}
});
$('h1').on('addClassChange', function() { console.log('addClass!!') });
$('h1').on('removeClassChange', function() { console.log('removeClass!!') });
});
</script>
</head>
<body>
<h1 id="h1">独自イベントのハンドル</h1>
</body>
</html>
addClass された際に、イベントのハンドルがしたかったのです。
これで、addClassChange、removeClassChange というイベント名で addClass、removeClass のハンドルが出来るようになります。
参考にしたところ
https://forum.jquery.com/topic/firing-an-event-on-addclass
記事の内容が古くなっているものもあり、適宜アップデートされる場合がございます。