0

我有一个想法，我想点击一个按钮然后绑定并运行一些函数，这不应该在 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>
4

2 回答 2

1

这样做对我来说是个好习惯吗？

是的，但还有其他可用的策略。哪个最好取决于您的要求以及每种方法的功能是否适合您的情况。但是您当前的策略很好并且通常可以实施。

这种方式是不是更好？在dom准备好时不绑定click事件，而是当用户点击该地方时，快速绑定相关事件fn并运行

不，您将添加一个侦听器来添加一个侦听器，这没有意义。此外，调度事件时调用的侦听器具有关联的事件对象，除非您实现自己的事件管理框架，否则很难使用您建议的方法复制该对象。你想这样做吗？

这种方式应该节省浏览器的资源吗？

不可以。还有其他策略可以减少文档中的侦听器数量，例如事件委托。

因为当dom准备好时它不会绑定所有的东西，有时用户根本不会点击这个地方，所以绑定事件没有意义。

浏览器调度数以万计的事件，它们在这方面相当有效。如果性能是一个问题，那么就解决它。

于 2012-11-28T03:53:12.137 回答
0

这并不能帮助你提高代码能力。我希望你能从中有所收获。

<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>
于 2020-07-04T12:28:18.973 回答