鍍金池/ 問答/PHP  HTML/ 新手求問，關(guān)于js function調(diào)用的問題

新手求問，關(guān)于js function調(diào)用的問題

目前，我在寫js代碼時(shí)，將js文件分為兩類：一是所有頁(yè)面都要調(diào)用一些function的公共文檔；二是頁(yè)面單獨(dú)要用到的功能文檔。
我在公共文檔里寫了window.onload=function(){}；在功能文檔里針對(duì)每個(gè)功能寫一個(gè)function,然后在HTML要用到的地方調(diào)用如：onclick="XXX(){}",但是有些是多個(gè)標(biāo)簽用到同一個(gè)功能如下方代碼:

`<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>

在這種情況下，需要把代碼寫成一個(gè)function嗎？如果寫成了function,難道要給每個(gè)li標(biāo)簽都麻煩的調(diào)用嗎？而且引入公共文檔里面已經(jīng)有一個(gè)window.onload了。如果不寫functon的話有會(huì)顯得代碼很亂。

說(shuō)了這么多，其實(shí)就是想知道大家在寫js代碼時(shí)是如何分類?在已經(jīng)有一個(gè)wiondow.onload的情況下怎么調(diào)用其他的function?

回答
編輯回答
下墜
  1. 對(duì)于監(jiān)聽 ul 下所有 li 這種需求，一般是監(jiān)聽 ul 的事件，然后通過 event.target 之類的方式去獲取真正觸發(fā)事件的元素，這個(gè)涉及 DOM 的事件機(jī)制，你可以了解一下。
  2. 一般來(lái)說(shuō)不寫 window.onload 這種形式，我個(gè)人是這樣的:
(function(window, document, undefined) {
    ...
})(window, document, undefined)

很多規(guī)范寫法都是要慢慢積累的，你也可以直接看各網(wǎng)站那些未被混淆的 js 文件來(lái)快速了解。

2017年3月19日 05:38
編輯回答
練命

不用for遍歷，直接例如這樣：$('ul>li').bindclick..
$('ul>li')就代表ul下所有l(wèi)i了。你百度一下“Js選擇器”，基礎(chǔ)多學(xué)一下。

2018年6月7日 01:23
編輯回答
墨沫

習(xí)慣用jQ，所以思路是jQ式的：比如Demo里這段，因?yàn)閟cript標(biāo)簽是位于body結(jié)束前的，所以省掉個(gè)DOMContentLoaded事件，當(dāng)然也不用寫onload。另外這個(gè)click一般還是會(huì)寫事件監(jiān)聽，而不用onclick。事件監(jiān)聽里直接用表達(dá)式就好，不會(huì)單獨(dú)聲明函數(shù)除非需要復(fù)用。另外這個(gè)不會(huì)用for，會(huì)用事件代理的方式來(lái)寫。

2017年6月8日 20:41
編輯回答
糖果果

那個(gè)for循環(huán)用事件委托寫法就好了

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-->
　　　　}
　　}
2018年6月28日 22:09