單擊dom節點時，如何在js中綁定事件和運行事件？

Question

我有一個想法，我想單擊一個按鈕然后綁定並運行一些函數，當 dom 准備好時，這不應該綁定，如何編碼？
我的大部分 js 函數都有點擊事件，我通常會命名這些函數然后添加
window.addEvent("domready",function(){fn();});
當dom准備好時讓它工作
這樣做對我來說是個好習慣嗎？

這種方式更好嗎？
不要在 dom 准備好時綁定 click 事件，而是當用戶點擊這個地方時，
快速綁定相關事件 fn 並運行
這種方式應該節省瀏覽器的資源嗎？ 因為當 dom 准備好時，它不會綁定所有的東西，
有時用戶根本不會點擊這個地方，所以綁定事件沒有意義。
如果這樣更好，有人可以告訴我單擊然后綁定並運行時如何編碼嗎？

<script type="text/javascript" src="http://localhost/bvtemplates/y01/includes/templates/y01/jscript/jscript_010_mootools.js"></script>\
<script type="text/javascript">
    /* ------- 
        most of my js function has click event , I normally name these functions and then add
        window.addEvent("domready",function(){fn();});
        to let it works when dom is ready
        Is it a good habit for me doing it like that?

        Is this way bellow better?
        not to bind the click event when dom ready, but when user click the place, 
        quickly bind the relative event fn and run
        should this way save the resource of browser? for it will not bind all things when dom ready, 
        sometimes the user will not click the place at all ,so there is no meaning to bind the event.
        If better this way, any one can tell me how to code when click then bind and run?
    ------- */

    function a(){
        $$('.a').addEvent('click', function (){
            alert('a');
        });
    }
    window.addEvent("domready",function(){a();});

    function b(){
        $$('.b').addEvent('click', function (){
            alert('b');
        })'
    }
    window.addEvent("domready",function(){a();});
</script>
<button class="a">a</button>
<button class="b">b</button>

Answer 1

這樣做對我來說是個好習慣嗎？

是的，但還有其他可用的策略。 哪種方法最好取決於您的要求以及每種方法的功能是否適合您的情況。 但是您當前的策略很好並且普遍實施。

這種方式更好嗎？ 不要在dom准備好時綁定click事件，而是當用戶點擊地方時，快速綁定相關事件fn並運行

不，您將添加一個偵聽器來添加一個偵聽器，這是沒有意義的。 此外，調度事件時調用的偵聽器具有關聯的事件對象，除非您實現自己的事件管理框架，否則很難使用您建議的方法復制該對象。 你想這樣做嗎？

這種方式應該節省瀏覽器的資源嗎？

不可以。還有其他減少文檔中偵聽器數量的策略，例如事件委托。

因為在dom ready時它不會綁定所有的東西，有時用戶根本不會點擊那個地方，所以綁定事件沒有意義。

瀏覽器分派了無數的事件，他們在這方面相當高效。 如果性能是一個問題，那就解決它。

Answer 2

這不是幫助你提高代碼能力..我希望你能在這方面有所收獲..

<button class="a">a</button>
<button class="b">b</button>
// button should be created first.
 let btn = document.querySelector('.a');
        btn.onclick = function () {
            alert('a');
        } 
 let btn1 = document.querySelector('.b');
 btn1.onclick = function () {
     alert('b');
 }
                    // function a() {
                    //       $$('.a').addEvent('click', function (){
                    //          alert('a');
                    //       });
                    //  }
                 
    // function b(){
    //     $$('.b').addEvent('click', function (){
    //         alert('b');
    //     })
    // }
    // window.addEvent("domready",function() {a();});
</script>