うさぎのイラスト

ネットアンサー55備忘録

web技術を書いていきます

jQuery triggerを使ってカスタムイベントを作成

-2017年10月23日-
規定のイベント要素といえば、「scroll」「click」「resize」がございますが、イベント要素は自身で作ることも可能であります。
デモサイト
* {
	margin: 0;
	padding: 0;
}

.box01 {
  width: 100px;
  height: 100px;
  margin: 0 0 30px 0;
  background-color: #FA8072;
}

.boxlist{
	background-color: #ccc;
	padding: 15px 0;
	width: 100%;
}

a {
  color: #285294;
}

ul[id^="sub_"]{
	display: none;
}

a.button{
	display: inline-block;
	border: 1px solid #ccc;
	background-color: #ddd;
	padding: 20px;
}

<a href="/aabbbccc/" class="button">ボタンだよ</a>
<div class="box01">
<a href="aa">aa</a><br>
<a href="bb">bb</a><br>
<a href="cc">cc</a><br>
<a href="dd">dd</a><br>
</div>

<hr>
<div class="boxlist">
	<ul>
	</ul>
</div>
<i></i>
var dispatcher = $( {} );

$(function(){
	$('a.button').click(function() {
		var subElem = $(this).attr('href');
		console.log(subElem);
		$('.boxlist ul').text(subElem);

		dispatcher.trigger('myFunc');
		return false;
	})
});



dispatcher.on('myFunc',function(){
	$('i').text('カスタム成功');
})