问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JavaScript 能把事件都写在一起吗?

头像
特爱点赞的野蛮人
    1.2k8126165
    <body>
    <div id="one" >aa</div>
    <div id="two">bb</div>
    <div id="three">cc</div>
    <div id="four">dd</div>
</body>

<script>
one.onclick=function djh1()
{
    alert( "aaaaaaa" );
}

two.onclick=function djh2()
{
    alert( "bbbbbbb" );
}

three.onclick=function djh3()
{
    alert( "ccccccc" );
}

    我想让所有 onclick 在一起
    目的是想让 点击事件和 function 分开,因为万一function 好几百行,那看起来多乱呀!

    也不想让点击事件出现在 HTML标签里,因为改的时候,还得从 html 找!

    //事件在一起:
one.onclick...
two.onclick...
three.onclick...


//function 在一起:
function djh1()...
function djh2()...
function djh3()...

    该怎么改呢?

    javascript
    阅读 4.7k
    5 个回答
    得票最新
    头像
    静逸秋水
      2.6k227
      ✓ 已被采纳
      // jquery 绑定在div 标签下

var func = function() {
    alert($(this).text());
};

$('div').on('click',func);

//or

var func = {
    'func1': function() {...},
    'func2': function() {...},
}
$('div').on('click',function() {
    func['func' + ($(this).index() + 1)]();
});

// or not jquery

var els = docuemnt.querySelectorAll('div');

els.forEach(function(el) {
    el.addEventListener('click',func);
})
      头像
      donghanji
        2.3k1315

        var oneFun(){};
        var twoFun(){};
        var threeFun(){};

        one.onclick=oneFun();
        two.onclick=twoFun();
        three.onclick=threeFun();

        这样？

        或者，这样?
        var funs={

        one:function(){},
two:function(){},
three:function(){}

        }
        one.onclick=funs.one;
        two.onclick=funs.two;
        three.onclick=funs.three;

        头像
        tcc
          61248

          把div 标签统一加一个 class 然后循环

          头像
          G_Koala_C
            5.1k645134

            每个div上放个onClick事件，调用相同的方法，传不同的id作为参数，在方法里边判断id，根据id给出对应的逻辑。这种是把所有类似的function都合并成一个function。

            $('div').on('click',onDivClick1)

function onDivClick1(){
    //do something
}

            这种就可以达到你说的效果了，注意编号。

            头像
            caryhgq
              3.5k65484

              建议“G_Koala_C”思路，比较好，更简洁。。。所有的div都加click事件，里面根据当前id来加载不同的业务逻辑

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题