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('カスタム成功');
})