Question

我有一个想法，我想点击一个按钮然后绑定并运行一些功能，当dom准备好时，这不应该绑定，如何编码？
我的大多数js函数都有click事件，我通常将这些函数命名为然后添加
window.addEvent（ “domready中”，函数（）{FN（）;}）;
当dom准备好时让它工作我这样做是好习惯吗？

这种方式更好吗？
在dom准备好时不要绑定click事件，但是当用户单击该地点时，
快速绑定相关事件fn并运行
这样可以节省浏览器的资源吗？因为当dom准备就绪时它不会束缚所有东西，
有时用户根本不会点击该位置，因此没有任何意义来绑定事件如果这样更好，任何人都可以告诉我如何点击然后绑定并运行？

enter image description here

<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准备就绪时它不会绑定所有东西，有时用户根本不会单击该位置，因此没有任何意义来绑定事件。

浏览器发送数以万计的事件，它们相当有效。如果性能是一个问题，那么请解决它。

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>

单击dom节点时，如何绑定事件并在js中运行事件？

2 个答案: