うさぎのイラスト

ネットアンサー55備忘録

web技術を書いていきます

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

-2017年10月23日-
規定のイベント要素といえば、「scroll」「click」「resize」がございますが、イベント要素は自身で作ることも可能であります。
デモサイト
1* {
2    margin: 0;
3    padding: 0;
4}
5 
6.box01 {
7  width: 100px;
8  height: 100px;
9  margin: 0 0 30px 0;
10  background-color: #FA8072;
11}
12 
13.boxlist{
14    background-color: #ccc;
15    padding: 15px 0;
16    width: 100%;
17}
18 
19a {
20  color: #285294;
21}
22 
23ul[id^="sub_"]{
24    display: none;
25}
26 
27a.button{
28    display: inline-block;
29    border: 1px solid #ccc;
30    background-color: #ddd;
31    padding: 20px;
32}
1<a href="/aabbbccc/" class="button">ボタンだよ</a>
2<div class="box01">
3<a href="aa">aa</a><br>
4<a href="bb">bb</a><br>
5<a href="cc">cc</a><br>
6<a href="dd">dd</a><br>
7</div>
8 
9<hr>
10<div class="boxlist">
11    <ul>
12    </ul>
13</div>
14<i></i>
1var dispatcher = $( {} );
2 
3$(function(){
4    $('a.button').click(function() {
5        var subElem = $(this).attr('href');
6        console.log(subElem);
7        $('.boxlist ul').text(subElem);
8 
9        dispatcher.trigger('myFunc');
10        return false;
11    })
12});
13 
14 
15 
16dispatcher.on('myFunc',function(){
17    $('i').text('カスタム成功');
18})