iT邦幫忙

0

js 可以設定同樣一個 event 事件可以有兩個以上的 click or submit ?

  • 分享至 

  • xImage
$('.active-btn').click(function(e) {
    // do 1...
    // do 4...
});

$('.active-btn').click(function(e) {
    // do 2...
    // do 3...
});

click 多個:
我突然發現這個問題
我 click 事件重複了
但是我竟然可以分別做 1,2,3,4 這些事?
雖然兩個要做的事沒有重複
只是這樣是可行的喔?

以及submit 多個:
我的做法是
在每個 <form> 中有個 data-type
然後根據 var type = e.currentTarget.dataset.type; 去找 type
$('#form').submit(function(e) { 裡面會用 switch 去判斷 type 是誰,再去做對應的事情
這樣的做法可以嗎?
因為我 $('#form').submit(function(e) { 裡面要處理的太多了
我想說分文件處理,但是每個文件開頭都會用 $('#form').submit(function(e) {

就像這樣

a.js

$('#form').submit(function(e) {
e.preventDefault();
var type = e.currentTarget.dataset.type;
    switch (type) {
        case 'a':
        break;

        case 'c':
        break;
    }
});

b.js

$('#form').submit(function(e) {
e.preventDefault();
var type = e.currentTarget.dataset.type;
    switch (type) {
        case 'b':
        break;

        case 'd':
        break;
    }
});
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
淺水員
iT邦大師 6 級 ‧ 2019-02-06 11:57:49
最佳解答

removeEventListener 來看
會發現要移除一個事件除了指定 event type 之外,也要給予第二個參數
所以我做了下面的實驗
#bt1 會產生 2 個 log ,而 #bt2#bt3 雖然也使用兩個事件綁定,但是卻只有一個 log

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件測試</title>
</head>
<body>
    <button id='bt1'>bt1</button>
    <button id='bt2'>bt2</button>
    <button id='bt3'>bt3</button>
    <script type="text/javascript">
    function foo()
    {
        console.log(2);
    }
    (function(){
        //#bt1 綁兩個相同內容的 anonymous function 
        let bt1=document.getElementById('bt1');
        bt1.addEventListener('click',function(evt){
            console.log(1);
        });
        bt1.addEventListener('click',function(evt){
            console.log(1);
        });
        //#bt2 綁兩個相同的 function 
        let bt2=document.getElementById('bt2');
        bt2.addEventListener('click',foo);
        bt2.addEventListener('click',foo);
        //#bt3 綁兩個相同的 anonymous function 
        var bar=function(){
            console.log(3);
        }
        let bt3=document.getElementById('bt3');
        bt3.addEventListener('click',bar);
        bt3.addEventListener('click',bar);
    })();
    </script>
</body>
</html>

原因應該是依據是否為相同的 instance
例如:

var a={},b={};
var c=a;
console.log(a===b?'eaual':'not eaual'); //顯示 not eaual
console.log(a===c?'eaual':'not eaual'); //顯示 eaual
淺水員 iT邦大師 6 級 ‧ 2019-02-06 12:28:00 檢舉

另外架構部分我的想法是利用 object (類似 hash table)
要執行的函式都定義在獨立的 js 檔案

eventCallback.js

var eventCallbackArray={};
eventCallbackArray['a']=function(){
    console.log('a');
}
eventCallbackArray['b']=function(){
    console.log('b');
}
eventCallbackArray['c']=function(){
    console.log('c');
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <p data-type='a'>點我-a</p>
    <p data-type='b'>點我-b</p>
    <p data-type='c'>點我-c</p>
    <p data-type='d'>點我-d</p>
    <!--讀取 eventCallback.js -->
    <script src="eventCallback.js" type="text/javascript"></script>
    <!--註冊 click 事件-->
    <script type="text/javascript">
        $(function(){
            $('p').on('click',function(e){
                let func=eventCallbackArray[e.target.dataset.type];
                if(func){
                    func();
                }
            });    
        });        
    </script>
</body>
</html>

這樣就算要分成多個檔案,就依序叫做
eventCallback-part1.js
eventCallback-part2.js
eventCallback-part3.js
即可

火爆浪子 iT邦研究生 1 級 ‧ 2019-02-06 15:34:28 檢舉

也就是說即使 function 一開始的觸發是有多個(click or submit),裡面 function 不同也是可以運行?

淺水員 iT邦大師 6 級 ‧ 2019-02-06 16:18:06 檢舉

應該是可以,只是我比較推薦用 {'key'=>callback,...} 這樣的方式來處理。要擴充或是分成好幾個檔案都方便。

我要發表回答

立即登入回答