新手求问，关于js function调用的问题

Question

目前，我在写js代码时，将js文件分为两类：一是所有页面都要调用一些function的公共文档；二是页面单独要用到的功能文档。
我在公共文档里写了window.onload=function(){}；在功能文档里针对每个功能写一个function,然后在HTML要用到的地方调用如：onclick="XXX(){}",但是有些是多个标签用到同一个功能如下方代码:

`<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>`

<script>
var test=document.getElementByTagName('li');
for (j = 0; j < test.length; j++) {
        test[i].onclick=function(){}
</script>

在这种情况下，需要把代码写成一个function吗？如果写成了function,难道要给每个li标签都麻烦的调用吗？而且引入公共文档里面已经有一个window.onload了。如果不写functon的话有会显得代码很乱。

说了这么多，其实就是想知道大家在写js代码时是如何分类?在已经有一个wiondow.onload的情况下怎么调用其他的function?

Answer 1

1. 对于监听 ul 下所有 li 这种需求，一般是监听 ul 的事件，然后通过 event.target 之类的方式去获取真正触发事件的元素，这个涉及 DOM 的事件机制，你可以了解一下。
2. 一般来说不写 window.onload 这种形式，我个人是这样的:

(function(window, document, undefined) {
    ...
})(window, document, undefined)

很多规范写法都是要慢慢积累的，你也可以直接看各网站那些未被混淆的 js 文件来快速了解。

Answer 2

习惯用jQ，所以思路是jQ式的：比如Demo里这段，因为script标签是位于body结束前的，所以省掉个DOMContentLoaded事件，当然也不用写onload。另外这个click一般还是会写事件监听，而不用onclick。事件监听里直接用表达式就好，不会单独声明函数除非需要复用。另外这个不会用for，会用事件代理的方式来写。

Answer 3

那个for循环用事件委托写法就好了

var Ul = document.getElementById("ul");
　　Ul.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(123);
　 　　　　　　    <!--你的function-->
　　　　}
　　}

Answer 4

不用for遍历，直接例如这样：$('ul>li').bindclick..
$('ul>li')就代表ul下所有li了。你百度一下“Js选择器”，基础多学一下。