JavaScript 能把事件都写在一起吗?-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

怪我咯 2017-04-11 09:11:54

[JavaScript讨论组]

447

<body>
    <p id="one" >aa</p>
    <p id="two">bb</p>
    <p id="three">cc</p>
    <p id="four">dd</p>
</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()...

该怎么改呢?

怪我咯

走同样的路，发现不同的人生

全部回复(5)

高洛峰2017-04-11 09:13:54 5楼

// jquery 绑定在p 标签下

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

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

//or

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

// or not jquery

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

els.forEach(function(el) {
    el.addEventListener('click',func);
})

赞 +0

添加回复

伊谢尔伦2017-04-11 09:13:54 4楼

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

$('p').on('click',onpClick1)

function onpClick1(){
    //do something
}

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

赞 +0

添加回复

怪我咯2017-04-11 09:13:54 3楼

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;

赞 +0

添加回复

PHP中文网2017-04-11 09:13:54 2楼

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

赞 +0

添加回复

大家讲道理2017-04-11 09:13:54 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>