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

jquery javascript jquery3.1.1 js

火爆浪子 2019-02-06 10:29:30 ‧ 6485 瀏覽

分享至

$('.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 }} |

直播中

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

回應 3
分享
檢舉

淺水員 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
即可