javascript 循环遍历绑定事件问题 / 憋错料

<!DOCTYPE html>

<head>

<title>浏览器导航</title>

/** 调用终端统计接口 */

(function () {

var ext = window.mopontv;

if (ext != undefined) {

try {

ext.isRealTimePVSupport();

} catch (err) {

}

})();

/** 搜索 */

function postJSON(url, data, successHandler, errorHandler) {

var request = new XMLHttpRequest();

request.open("POST", url, true);

request.onreadystatechange = function () {

// 事件监听

// console.log(request.readyState);

if (request.readyState === XMLHttpRequest.DONE) {

if (request.status === 200) {

var type = request.getResponseHeader("Content-Type");

if (successHandler && type === "application/json") {

successHandler(JSON.parse(request.responseText));

}

if (successHandler && type.match(/^text/)) {

successHandler(request.responseText);

}

} else {

console.log("error:" + request.status);

// throw new Error(request.status);

if (errorHandler) {

errorHandler(request);

}

};

request.send("data=" + JSON.stringify(data));

};

var param = {

optype: "ntvsearchstatistic",

tag: "SDFQ34RKL",

browserid: 1000266,

advids: "83",

version: 1,

action: "",

word: ""

}

function search($this) {

var word = "";

var $sbox = $this.parentNode;

word = $sbox.getElementsByTagName("input")[0].value;

if (word.replace(/(^\s*)|(\s*$)/g, "") !== "") {

var form = $sbox.parentNode;

var action = form.action;

action = action + word;

window.location.href = action;

// statistic

param.word = word;

param.action = form.action;

postJSON("http://swift.51mrp.com/ntvsearchstatistic", param, function (rsp) {

//console.log(rsp);

});

}

return false;

}

/*APN切换*/

function isAPNSupport() {

var ext = window.mopontv;

return ext != undefined && ext.isAPNSelectionSupport();

}

function bindAPNUrls(c) {

var apnUrlsJson = changeUrl(["http://baidu.com", "http://dddddd", "http://s", "http://s1", "http://s2", "http://s3", "http://s4", "http://sdfsdf", "https://s", "http://swift.51mrp.com/", "http://swift.51mrp.com/1", "http://swift.51mrp.com/10", "http://swift.51mrp.com/11",
"http://swift.51mrp.com/12", "http://swift.51mrp.com/13", "http://swift.51mrp.com/14", "http://swift.51mrp.com/15", "http://swift.51mrp.com/16", "http://swift.51mrp.com/17", "http://swift.51mrp.com/2", "http://swift.51mrp.com/3", "http://swift.51mrp.com/4",
"http://swift.51mrp.com/5", "http://swift.51mrp.com/6", "http://swift.51mrp.com/7", "http://swift.51mrp.com/8", "http://swift.51mrp.com/9", "http://swift.51mrp.com/android_browser_mng/home/getHomePage?bid\u003d1000206", "http://swift.51mrp.com/urlMappingHandler?code\u003d-1428599978\u0026type\u003dbrowser_griditem_download/hhh.apk",
"http://swift.51mrp.com/urlMappingHandler?code\u003d-718892215", "http://t.moonbasa.com/rd/rdm?e\u003d999\u0026adtype\u003d1\u0026unionid\u003dskymobi\u0026subunionid\u003d\u0026other\u003dunionid:skymobi|adtype:1|adid:999\u0026url\u003dhttp://t.moonbasa.com",
"http://www.baidu.com", "http://www.google.cn/", "http://www.renren.com", "http://www.renren.com/"]);

var t = (c || document).getElementsByTagName("a");

for (i in t) {

var a = t[i];

if (apnUrlsJson.indexOf(a.href) != -1) {

a.onclick = function (e) {

e.preventDefault();

window.mopontv.onLoadSpecificURL(this.href);

};

}

function changeUrl(APNList) {

var tagA = document.createElement("a");

for (i in APNList) {

tagA.href = APNList[i];

APNList[i] = tagA.href;

}

return APNList;

}

var appCache = window.applicationCache;

appCache.onupdateready = function () {

window.location.reload();

}

/*新增*/

window.onload = function () {

/**

var ul=document.getElementsByClassName("fenlei")[0];

var lis=ul.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

var li=lis[i];

li.onclick=click_nav;

}

lis[0].click();

var ul=document.getElementsByClassName("fenlei")[1];

var lis=ul.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

var li=lis[i];

li.onclick=click_nav1;

}

lis[0].click();

**/

var add_the_handlers = function (nodes) {

var click_nav_fix = function (liElement) {

debugger;

var url = liElement.dataset.url;

var show = liElement.dataset.show;

var index=0;

var uls= document.getElementsByClassName("fenlei");

for (var i = 0; i < uls.length; i++) {

if(liElement.parentNode===uls[i]){

index=i

}

var form = document.getElementsByTagName("form")[index];

var input = form.getElementsByTagName("input")[0];

var p = liElement.parentNode.children;

for (var i = 0; i < p.length; i++) {

var chi = p[i];

chi.setAttribute("class", "");

}

liElement.setAttribute("class", "fenlei_click");

input.setAttribute("placeholder", show);

form.setAttribute("action", url);

}

for (var i = 0; i < nodes.length; i++) {

//alert("父元素个数："+ul.length);

//var ul_temp=document.getElementsByClassName("fenlei")[i];

doc = nodes[i]

doc.onclick = function (e) {

e = e || window.event;

var tagChild = e.srcElement || e.target;

if (tagChild.nodeType == 1 && tagChild.tagName.toLowerCase() == "li") {

click_nav_fix(tagChild);

}

tagChild = null;

}

var lis = nodes[i].getElementsByTagName("li");

lis[0].click();

}

};

// 父元素循环调用

var ul = document.getElementsByClassName("fenlei");

add_the_handlers(ul);

};

function click_nav() {

var url = this.dataset.url;

var show = this.dataset.show;

var form = document.getElementsByTagName("form")[0];

var input = form.getElementsByTagName("input")[0];

var p = this.parentNode.children;

for (var i = 0; i < p.length; i++) {

var chi = p[i];

chi.setAttribute("class", "");

}

this.setAttribute("class", "fenlei_click");

input.setAttribute("placeholder", show);

form.setAttribute("action", url);

}

/*新增修改*/

function click_nav1() {

var url = this.dataset.url;

var show = this.dataset.show;

var form = document.getElementsByTagName("form")[1];

var input = form.getElementsByTagName("input")[0];

var p = this.parentNode.children;

for (var i = 0; i < p.length; i++) {

var chi = p[i];

chi.setAttribute("class", "");

}

this.setAttribute("class", "fenlei_click");

input.setAttribute("placeholder", show);

form.setAttribute("action", url);

}

</script>

body, div, a, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form

{

margin: 0;

padding: 0;

list-style: none;

vertical-align: middle;

font-size: 14px;

font-family: Arial,Helvetica;

-webkit-text-size-adjust: none;

}

{

text-decoration: none;

}

body

{

background: #fafafa;

min-width: 320px;

max-width: 350px;

margin: 0 auto;

color: #666;

}

.header

{

background: url(http://plugins.mrpcdn.com/down/714253d4-8b1d-458d-8770-9bc33c4625d9/320x447.jpg) #fafafa no-repeat center center;

background-size: 100% 447px;

height: 447px;

margin-bottom: -393px;

}

.header .logo

{

padding: 19px 0 0 10px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAMAAADthUvBAAADAFBMVEX7+/uGhobR0dHFxcW2trbExMTw8PBqamr////z8/MoKCjx8fHx8fHz8/MrKytycnLZ2dny8vKTk5PLy8t/f3/j4+NYWFjPz8/p6elXV1e3t7fn5+fIyMinp6e0tLTk5OSRkZHU1NTJyclgYGBOTk7p6emxsbEuLi55eXlfX19KSkrPz8+urq7T09PY2NjOzs7U1NSkpKTGxsbd3d3Q0NDV1dXj4+OZmZnh4eHLy8vCwsKWlpb////Z2dmrq6sPDw/k5OT29vb////i4uLU1NRKSkp3d3fZ2dn////r6+sTExMYGBiAgID///////8qKiq1tbUAAACcnJz////IyMjx8fEAAAC8vLzl5eXAwMDw8PDS0tLT09PNzc3////d3d2EhIT+/v7Ly8sAAADg4OAAAABFRUUDAwP8/Pz////9/f3///+Hh4eOjo7////z8/P8/Pz5+fkAAAAAAACMjIwAAAAAAACBgYH6+vr29vYAAAAAAAAAAAD6+voAAAAAAAAAAACEhIT///////8AAAAAAAAAAAAAAAD///8AAAAAAAAAAAD09PQAAAACAgLR0dEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAD7+/sAAAD///8AAAAAAAAAAADj4+P/x4j/umz/5Mb/qkj/r1P/nSv/tF3/slr/v3X/rE3/5cf/qUb/7tv/6dCRxfD/9Oj/x4f/rlD/lx//y4//sFX/zpX/0p//zJL/16ny8vKp0vP39/f/wXn/5sr/2Kz/ojf/xYL/ni//9Of/48T/7dh4uOz/0Jn/69P/t2X/lyH/oTX/uGb/4sH/u27/vnP/6M7/q0r/pkDC3/f/pDz/mST//v3/+fL/tmL/8+b/tWD/myj/8N//w33/+/X/37r/3bb/oDP/4b9gq+nn8vz/27D/nS3/8eL/9+222PXa7Pr//fr/qkn//Pj/3LNUpefz+f2Fvu7/t2RHnub/nzH/8uP/2a7/zJH/uWn/58ydy/HO5fhsses8mOT/lh7///8vOoXlAAAAoHRSTlMVP75zguejiUzDc+fksXBy/N6Xoo/sf4l9akfHQcm88Xgv1FpfdkVTeIsYo6Y6mHPcjOzg4tlLnqri1qYY8mF24MWT/eMsJOd01WtfEHudTGg/bT2mNzZakny/JezjmMF/o8tbszp8axaBXx6koFXNqbdXJDwnGqqxBU1iQyQ0EQtyhTAwNwgHEBwhK9BIPdlQMgUTFh8YCSENrg9BAwEArngkbgAABcxJREFUeNq91mdUU0kYBuDtvffee3Nd1957L9h7V2yowKLSQhakE5Q0jDHJrgVdu65dAUF6L9KkSZMEhCRGFFPm3bkp5IaD+0PP8T0nQxK48+T7ZjKXxxSPII8W2cGO74Au/nTaxGkPhXiuHgrHbFlv+X2IJzOuXbNWsQTA6w+BDHgRaGxss6dRCSxR0GwEFioUkxgVVWfiMOaBEc+XkHSg5jYriQUJVczsS1BSjOdWoaWBqnnkFlzl8gdE1mNPIrmcf9Oe/CLyTzE8Q1B18gT81+M6SQXukVLMnefr+b/zBQRYuhzQGRmGStJ+vLnFnuZDNZllmOeLivL9eH4N4skpBskCk0kdF4fsYiVEQRMBRFi6HLHWEdmCdnIdjrlG7uEZ4MqNUmAu7pC7DHKgrK2tohk7rdduhEM2KhT+aGrCMMUYaJrg6ojspEh1XDwG4m5CW3sycKhU2U4RFFdUl+9LLoMVySiiC3ejXYlVljqgMbCiQUgEYKwDIlyRotNg9eo1vp2QSpKHiqL8JNLOlHHcjLQSJlfLbEjMwZt781NbMMG8+rtgMLFiAK3DYNIamgDQn6C55OuA1FaTA6glscV7M9IQk4ksBjkSu78oM+dUia1d14rpegHL/fhyK2KANXr6dAOMjGZU6fV6tZYOKvg7VoLTpPYEaaDz5R4iu5FOkR5A241rAGxIOmiWfhe4KahL5BKMxnqN3mimzBw2yOQs5DqySUFmuRLKq7dPknjcosif3czIby425BaeHjxumRdHHCzvol0qgM6v1xthz2wJ3wFBKSG5+B1nCbncZkEeRyOD9LYjfZf5cMJF9EorotVbYzQVmrQU0apZSI8fw4XBjsjRclKL/ii5TC0L8ocZWdDdjmxzEvlJuHx5BwLYG6aiiEGrNVorNGAxL0rcGYkhZ2glyCcnHJBfn2IhHGnHwbID9SZTndEatclUf0yno0+MlgopMnWrSOrYLjqQ243AeWbTspGec1hIlFRhi/8GFBrtSTHAjhgA+hgUKglmL3wrasnBBBJLF778NJ0ynVVJ10gEaNibC2DaVa+3IxfmznPcwi03SXZJzdXiv0llWXliS5YdQZ+ukAA0Ge1Rm/tGEd0xihRaEA0Q4YicIu1A9fnsf2uuoJKcz7EgbTHpAO6PqNWOiJbZXbQuMIhK14QANtJwmE7+F+j8DUByYmUuRZ4AymoKYk8m3b9dap2K3S6dnm5kI7QWhHmzl0zOWpM9ydj2whtIq8WF+biizCJxQHN2TgYhBWloIOeAPAZZ9PLEXR0LPxZNapPehsynu00FZk10dVZEg1FcucPumv+Km9MQYPg7I4Cqw+VHgDj6vUyoVsKGpFvv/xZELhk5BJo6FT2LC3UU6UepeiDFeNF0kUHqdCYgXCCz3U+ySCtcvLevEAk+mDL5VVSk7iOnW4CSs7VVoOKZg+Rwbu5+kpmbk7P7nBIDLEiQYOQiABoTjU6D4VDXMUdkCvPiAnTM2TU6UGxFFqIyIxtv8aJCJfxooce7OEt7dBT9mBnwxWYcKSK0a8QykJo0zJCbEVkwV9Dn7dGgp8rFevRdiiYDDHq9RqXCgp6gBQKfRIrltnt8RXwVxnOEXD79eNKPcDz1TgUGOkd+8/WUb73HoSWpobUjDXnN+CHY9q2XScKmwpwFKyePBT6FOZdWfvUhgNc+9p4psCKKoQCW8sKi6Ykhl8tkrqAZMdhtq59ExHFasRyd8oSIa0PkMolw1uxfpv/0vbNblODnWZGfvTl9ce/+K90CxaMGLXZ29vKQdPxz93m3L70CxXyFNTPem/O+9zKn0OhgqXiTUDKh15PdXTZvXrduHR1cnh3v4y6hiK0WfpCfKJC3nTczlBssdA8P50TyeD4ckSRIuNXJKVwQ3IHwBR7hIvuVMqn7Cp9AkURGy+LTjc4N5fC2W+Pl5RO1iVbCCl8a6u4RJuTKZNFSP8EmUZgoVCjhy4L8xGI/c2P/A/yo1BskmmJwAAAAAElFTkSuQmCC)
no-repeat right bottom;

height: 30px;

width: 100px;

}

.search

{

padding: 7px 16px 5px 16px;

}

.search .sbox

{

margin: 0 auto;

overflow: hidden;

position: relative;

width: 100%;

height: 32px;

}

.search .sbox .sinput

{

border: 1px solid #999;

border-right: none;

border-radius: 2px;

height: 30px;

position: absolute;

right: 44px;

left: 0;

top: 0;

background: rgba(255,255,255,0.6);

}

.search .sbox .sinput input

{

display: block;

width: 100%;

line-height: 18px;

border: 0;

padding: 6px 10px 5px 8px;

background-color: transparent;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

.search .sbox .sbutton

{

background: #55b2fe;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAgCAMAAACxWgF2AAACZ1BMVEW/dwvJgxnkigLbhgb//fz/8+LPgAj/nQD/mwX/+fD/+vT+1Zj+rznGgBf/sjXvpzn9ohn+5cD8oyH92aH/oBL/5Lv9rTX+4rf//Pn91Zr8t0//mwT///79pB/+x3b+qy3/mAL/tET/+/X/sTz/uVH9t07+rDD+157/wWT+mQL+x3X83rD+7M/+79j/xGz/oxz9skH+4LP++/b+9un96Mr+oRf/0Ir/mgP++fH9pyj+9+z98d7/oBH/qSjiiQLjnzbrnCb/pyH/rzXghgD+yXb+nQ7+7NL/9Ob+7tX+nAr/+e79wGP+t0z++PD+pR7+t03/vFf9ohr//v398uD+ng39w2z+ulX+5sL/nAr+1JX+rDX94bb/1Jb9wWX++O792KDhiALMfgn+3av/47n/2J//mQP+xnP/0Yz/8dz+pB79ohv/8+D/oBP8v2P/79f/uVD/+/b+2J7//fv/79j/y3/9oRb95cH+pBz+mQH/8t78rzv83K391Zn+/v3/oRj9vl3+v2D/1Zj+8eD9qCn+7ND9v2P++vX9vl//u1T/9ef/mAH/piT+vmD+mwf9vVz+8+P+w2n95L3+/fv+z4j/8t/9skL8y4L9sD3+ox3+nAn/+e/+3q7//fr+tUn9xnP+skH/ulH+8uD/ulP+tkr+8+L/9OP+sj7/lwHGeQf/mwD+tEX/nAf/7tT+////+fH+/Pn+y37/+vL/4rb+lgD/mQX/9OT+47r+zIH/mQT/79b+sT3/+fL+/Pj/nQr/kwD/lAD/mAD/lQD/lwDGegfiiAL/mgDjnTP/rjLHegf/lgD/////nAD/mQCmBw7kAAAABHRSTlODg4ODyxPDhAAAAd9JREFUeNqN0/VTFVEYxvG1E+zGAOxGwW4U7O4OQEXsTmxFVEAssJPu5l7vnvOa78P+UbojA4fRc7jf387sZ959Z8NqOW/uDz/r0sKKnL/gp58FBlhzBDdJ/o3/k8i2vn131Dgr78uf2jM5/1T3takW9uBObQo9ng75oyPs5jSVL5wMtPZ0DAKiVrEwatocA4QP6tx1YO6UCnjjSBj1dniLF/lYkPSt3IsTiWzQ9kZgh4/qD7HHcf0GazWt34RdjTfnKzfxlLSaN2DnVtl4zb6Fx89Jp8U+bFOwQ8kpj56wdu+T2KI+Y/EgDff1+jxOSVWfu4hU/SY1uKbOpiVn8FA7m0pRqV7k2dFFF7Sa7+D2M2W4HI/Fp4V2dkYlXlRTA+4+DsWkf5fy1UtU3eP6Q89eGDuB9dopqwIuHZTMLLN6d0NRf8ekqTz9Mg7tXz19+Mh+JUDfMWHLWa8dUX31QAHWzpgGFPTp4QWS3timf0eePVx6ZN3M/BHDBuROAvCulnXajWReQvyaWVOlnLgCAD59tvXa9cTsfrhldwtd/rFW6rW61fsSl1d8IK1Wuf020+U1wqBVfnQpcOy1abbKfUNDsMw27q02JDR4lKPo3XWmcohzGg7tsq1We375W1vrN55vHbpDsWaoAAAAAElFTkSuQmCC)
#ff9900 no-repeat center center;

height: 32px;

width: 45px;

position: absolute;

right: 0;

top: 0;

text-indent: -9999em;

z-index: 2;

}

.imgad

{

width: 320px;

height: 50px;

margin: 0 auto;

}

.imgad img

{

width: 100%;

height: 45px;

display: block;

}

.textad

{

background: rgba(243,243,243,0.5);

height: 27px;

line-height: 27px;

width: 100%;

margin-top: 2px;

}

.textad a

{

padding-left: 16px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

display: block;

color: #656565;

}

.grid

{

padding: 0 5px 10px;

}

.grid ul .icon_item

{

display: table;

width: 100%;

table-layout: fixed;

padding: 15px 0 5px;

}

.grid ul .icon_item .icon_link

{

display: table-cell;

text-align: center;

vertical-align: middle;

}

.grid ul .icon_item .icon_link img

{

width: 54px;

height: 54px;

}

.grid ul .icon_item .icon_link span

{

display: block;

margin: 1px auto 0 auto;

white-space: nowrap;

font-size: 13px;

color: #828282;

}

.custom

{

margin: 10px 0 0 0;

border-bottom: 1px solid #b4b4b4;

}

.custom .common-block

{

border-bottom: 1px dashed #B4B4B4;

}

.custom .common-block:last-of-type

{

border-bottom: medium none;

}

.custom.c1 .common-header .title

{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAKlBMVEV/sjGFujR/sjGFujSFujSFujR/sTGEuTOFujR8rjCCtjMAAAB8rjCFujStRQKFAAAADHRSTlPONdItNiDUoXj7swCnZqw2AAAAKklEQVR42rXFwQEAIAjDQBAVLLr/upYhyCMnIQAG/yrQqzYXPcnajO3lBxsaBIcD15uYAAAAAElFTkSuQmCC)
no-repeat left center;

}

.custom.c1 .common-header .title span

{

color: #85BA34;

}

.custom.c1 .break-line

{

border-bottom-color: #85BA34;

}

.custom.c2 .common-header .title

{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAKlBMVEXJnmnSpW7JnWnSpW7SpW7SpW7InWnRpG3SpW7EmmbNoWsAAADInWnSpW4My1hoAAAADHRSTlPOPtI3QCfUoXj7swASMUUEAAAAKklEQVR42rXFwQEAIAjDQBAVLLr/upYhyCMnIQAG/yrQqzYXPcnajO3lBxsaBIcD15uYAAAAAElFTkSuQmCC)
no-repeat left center;

}

.custom.c2 .common-header .title span

{

color: #d2a56e;

}

.custom.c2 .break-line

{

border-bottom-color: #d2a56e;

}

.custom.c3 .common-header .title

{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAALVBMVEXTiZzcj6PSiJzcj6Pcj6PQh5rajaHcj6Pcj6Pcj6PNhZjXjJ8AAADNhZjcj6PL/EyBAAAADXRSTlPODdIIfuCoCgZ4+7MA6d5P9AAAACxJREFUeNqtxckBACAIxEA8ERbtv1xXbcE8MmICIPPrBDpT0UE92Hdr69d4bTYdBO+RhMKAAAAAAElFTkSuQmCC)
no-repeat left center;

}

.custom.c3 .common-header .title span

{

color: #dc8fa3;

}

.custom.c3 .break-line

{

border-bottom-color: #dc8fa3;

}

.custom.c4 .common-header .title

{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAJ1BMVEVNq85Nq85Mp8lRs9dQstZNq81Nq81Rs9dLp8lPr9IAAABQstZRs9ep3IsfAAAAC3RSTlPO0fSJodTSePuzABbOCnoAAAApSURBVHjatcXBAQAgCMNAEAUq7j+vZQjyyEkIAOdfB1quy2heNmac3X4DOgQenj8HKgAAAABJRU5ErkJggg==)
no-repeat left center;

}

.custom.c4 .common-header .title span

{

color: #51b3d7;

}

.custom.c4 .break-line

{

border-bottom-color: #51b3d7;

}

.custom.c0 .common-header .title

{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAKlBMVEXOm8zMmcrNm8vMmsrXotXWodTNmsvXotXJl8fSntAAAADWodTJl8fXotX9AKdTAAAAC3RSTlPO4NLdkaHUePuzAM20KekAAAAqSURBVHjatcXBAQAgCMNABBWKuv+6liHIIycuAJR/FegZdieNZG36XuUHCg4ENjgPzmgAAAAASUVORK5CYII=)
no-repeat left center;

}

.custom.c0 .common-header .title span

{

color: #d7a2d5;

}

.custom.c0 .break-line

{

border-bottom-color: #d7a2d5;

}

.custom .common-header

{

zoom: 1;

height: 30px;

padding-right: 13px;

}

.custom .common-header:before, .custom .common-header:after

{

display: table;

content: "";

}

.custom .common-header:after

{

clear: both;

}

.custom .common-header .title

{

float: left;

height: 20px;

margin: 5px 1px 5px 7px;

}

.custom .common-header .title span

{

font-size: 16px;

color: #85BA34;

text-align: left;

padding-left: 12px;

height: 22px;

line-height: 22px;

}

.custom .common-header a

{

float: right;

display: block;

height: 30px;

line-height: 30px;

color: #666;

max-width: 180px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.custom .break-line

{

height: 0;

font-size: 0;

margin-left: 26.5%;

border-bottom: 1px solid #85BA34;

}

.textlink

{

border-bottom: 1px dashed #b4b4b4;

}

.textlink .dot li

{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAA1BMVEXIyMiuWu3mAAAAFUlEQVR42q3BAQEAAACAkP6vdiKaAABIAAGDHiG2AAAAAElFTkSuQmCC) no-repeat 20px center;

background-size: 5px 5px;

padding-left: 20px;

}

.textlink .dot a

{

text-align: left;

padding-left: 28px;

}

.textlink li

{

display: table;

table-layout: fixed;

height: 17px;

line-height: 17px;

width: 100%;

padding: 12px 0;

border-bottom: 1px dashed #b4b4b4;

}

.textlink li a

{

display: table-cell;

border-right: 1px solid #999;

text-align: center;

font-size: 16px;

color: #666;

-webkit-font-smoothing: antialiased;

}

.textlink li a:last-of-type

{

border-right: medium none;

}

.textlink li:last-of-type

{

border-bottom: medium none;

}

.scroll-text

{

overflow: hidden;

position: relative;

}

.scroll-text .gallery

{

zoom: 1;

width: 400%;

overflow: hidden;

position: relative;

}

.scroll-text .gallery:before, .scroll-text .gallery:after

{

display: table;

content: "";

}

.scroll-text .gallery:after

{

clear: both;

}

.scroll-text .gallery a

{

position: relative;

display: block;

float: left;

width: 25%;

height: 50px;

line-height: 50px;

-webkit-tap-highlight-color: rgba(0,0,0,0);

text-align: center;

font-size: 15px;

color: #666;

}

.scroll-text .scroll-control

{

position: absolute;

bottom: 4px;

left: 50%;

margin-left: -20px;

text-align: center;

font-size: 0;

}

.scroll-text .scroll-control li

{

height: 3px;

width: 6px;

display: inline-block;

background: #dcdcdc;

margin: 0 2px;

overflow: hidden;

}

.scroll-text .scroll-control li.active

{

background: #bebebe;

}

.double-image .img, .image-text .img

{

display: -webkit-box;

}

.double-image .img a, .image-text .img a

{

display: block;

position: relative;

color: white;

}

.double-image .img a p, .image-text .img a p

{

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 25px;

line-height: 25px;

background-color: rgba(0,0,0,0.5);

overflow: hidden;

color: white;

text-align: center;

font-size: 13px;

}

.double-image ul

{

width: 288px;

margin: 13px auto;

display: -webkit-box;

}

.double-image .img

{

width: 134px;

height: 101px;

}

.double-image .img:first-of-type

{

margin-right: 20px;

}

.image-text ul

{

width: 289px;

margin: 13px auto;

display: -webkit-box;

}

.image-text .img

{

width: 121px;

height: 91px;

}

.image-text .img:first-of-type

{

margin-right: 8px;

}

.image-text .text

{

width: 160px;

}

.image-text .text a

{

display: block;

height: 30px;

line-height: 30px;

font-size: 13px;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

color: #666;

}

.image-text .text a label

{

padding: 0 3px;

}

.app-download

{

width: 320px;

margin: 0 auto;

}

.app-download .app

{

zoom: 1;

margin: 0 10px 0 16px;

}

.app-download .app:before, .app-download .app:after

{

display: table;

content: "";

}

.app-download .app:after

{

clear: both;

}

.app-download .app li

{

float: left;

display: -webkit-box;

margin: 13px 3px 13px 0;

}

.app-download .app li img

{

display: -webkit-box;

margin-right: 6px;

}

.app-download .app li .desc

{

width: 75px;

white-space: nowrap;

overflow: hidden;

}

.app-download .app li .desc .size

{

height: 21px;

line-height: 21px;

}

.app-download .app li .desc a

{

width: 67px;

height: 26px;

line-height: 26px;

display: block;

text-align: center;

background: #7cb8eb;

color: #fff;

}

.footer

{

background: url(http://plugins.mrpcdn.com/down/1ea47d57-c1ae-40fc-9aad-0ec9df79b892/320x117.jpg) #fafafa no-repeat center center;

background-size: 100% 117px;

height: 117px;

position: relative;

}

.footer .nav

{

position: absolute;

left: 50%;

top: 48px;

margin-left: -30px;

text-align: center;

}

.footer .nav .gotop

{

height: 27px;

line-height: 27px;

padding-right: 13px;

font-size: 16px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAMAAAA/gEgKAAAAk1BMVEU5e8I5e8I5e8I5e8I5e8M5e8I6fsc6fsc9hNA5fMM5fcU6fsc5fcU5fMM9hNA9hNA7gMo6fsc9hNA9hNA9hNA5fMM9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA5e8M5fMQ5e8IAAAA5e8M5e8M5fMM5e8M7gcs8g885fMQ9hNB+ACi/AAAAKXRSTlP+/vz5/vvS0TXt4s3d8iArvM4cJzLxeFGOAUQ/LzM8OF46JF9h9Oz+AE3+iG8AAACWSURBVHja1dDJDoIwFIVhg0EFxZFBBQfG2AXlvv/TyaVY2ktJjDv/XfkW9HT2mugnyG2g2TlCA+MahNoANUJRAq0svrzVZQLOLDZC2P7zboAnx2s+RhBxMeBG4PpZwxIN0mGltVPAV59lfpKQWfrurIdjAHreVsAaaBsBB9YmP+Jhr+yQ0J3+HzgFpweXQrqosOWKAu0N1lV8/JSeNS8AAAAASUVORK5CYII=)
no-repeat top right;

background-size: 12px 16px;

color: #3C83CF;

}

/*新增加的*/

.fenlei li

{

float: left;

font-size: 18px;

margin-left: 26px;

padding-bottom: 6px;

box-sizing: border-box;

height: 29px;

}

.fenlei_click

{

border-bottom: rgb(130,188,208) 2px solid;

color: rgb(130,188,208);

}

</style>

</head>

<body>

</div>

<ul>

</a><span>美女辣图</span>

</p>

</a><span>fanke fanke </span>

</p>

</a><span>中秋夜</span>

</p>

</a><span>赶集</span>

</p>

</li>

</a><span>宜搜搜索</span>

</p>

</a><span>性感危机</span>

</p>

</a><span>炎亚纶</span>

</p>

</a><span>爱购物</span>

</p>

</li>

</a><span>红花</span>

</p>

</a><span>赶集</span>

</p>

</p>

</p>

</li>

</ul>

</div>

</div>

</div>

<ul>

七夕</a> <a href="http://wap.ip138.com/sim.html">手机号</a> <a href="http://swift.51mrp.com/urlMappingHandler?code=-1686635499&mpbrw_param_browserid=1000266">

QQ</a> </li>

铁血</a> <a href="http://www.08060.com.cn/access/index.php?ht=2000202&ptype=1000">看书网</a>

搜狐</a> <a href="http://wap.huanqiu.com/pd.html?id=23">环球</a> </li>

路况</a> <a href="http://wap.8684.cn/">公交</a> <a href="http://wap.yuanlai.com">缘来</a>

泡泡</a> <a href="http://yy.ttpod.com/?">动听</a> <a href="http://map.baidu.com">地图</a>

<li><a href="http://dp.sina.cn/dpool/tools/translate/texttranslate.php">翻译</a> <a

href="http://live.sina.cn/dpool/sports/live/livelist.php">直播</a> <a href="http://m.360buy.com/">

京东</a> <a href="http://m.letv.com/">乐视</a> <a href="http://wap.it168.com/">IT168</a>

</li>

</i><i style="border: none; display: table-cell;"></i></li>

</ul>

</div>

</div>

</div>

</ul>

</div>

</div>

</form>

</div>

</div>

</ul>

</div>

</div>

</form>

</div>

</div>

</ul>

</div>

</div>

</form>

</div>

</div>

/*APN切换*/

function isAPNSupport() {

var ext = window.mopontv;

return ext != undefined && ext.isAPNSelectionSupport();

}

// Local Storage 扩展

if (localStorage) {

Storage.prototype.getObject = function (key) {

try {

var s = localStorage.getItem(key);

return JSON.parse(s);

} catch (e) {

console.error(e);

}

return null;

};

Storage.prototype.setObject = function (key, obj) {

var s = JSON.stringify(obj)

return localStorage.setItem(key, s);

};

}

var N = function () {

this.init();

};

//基础配置

N.conf = {

HOST: "http://172.16.3.208/advert",

DEFAULT_RETRY_TIMES: 300000,

version: 20150605183738

}

//广告请求json对象

N.param = {

optype: "advert",

tag: "SDFQ34RKL",

browserid: 1000266,

advids: "83",

version: 1

}

N.prototype = {

init: function () {

var st_objs = this.cls(‘scroll-text‘);

this.removeBorder();

for (var i = 0; i < st_objs.length; i++) {

this.slide(st_objs[i]);

};

this.fillAds();

//隐藏地址栏(全屏)

window.scrollTo(0, 1);

id: function (b) {

return document.getElementById(b)

tag: function (b, c) {

return [].slice.call((c || document).getElementsByTagName(b) || [], 0)

cls: function (b, c) {

return [].slice.call((c || document).getElementsByClassName(b) || [], 0)

removeBorder: function () {

var t_objs = this.cls(‘custom‘);

for (var i = 0; i < t_objs.length; i++) {

if (!this.hasClass(t_objs[i].nextElementSibling, "custom")) {

t_objs[i].style.borderBottom = "none";

}

hasClass: function (elem, className) {

return !!elem.className && (‘ ‘ + elem.className + ‘ ‘).indexOf(‘ ‘ + className + ‘ ‘) > -1;

showAds: function (obj) {

if (obj.code !== 200 || obj.tag !== N.param.tag) return;

//判断是否匹配到广告

var c = obj.adblocks;

if (undefined == c || 0 == c.length) return;

//向页面写入广告

this.addAds(c);

//存储广告json对象

obj.version = N.conf.version;

obj.lastModified = new Date().getTime();

localStorage.setObject("ads.data", obj);

fillAds: function () {

//判断页面是否有广告

if (!document.getElementsByName("ad").length) return;

//判断是否断网

if (!navigator.onLine) return;

//判断是否加载本地存储

var cache = localStorage.getObject("ads.data");

if (cache) {

if (N.conf.version === cache.version) {

var lt = new Date().getTime() - cache.lastModified,

expire = cache.expire - 0;

if (lt >= 0 && lt < expire) {

this.addAds(cache.adblocks);

return;

}

//本地存储无效，异步请求广告内容

this.updateAdAsync();

updateAdAsync: function () {

var t = this;

// Trying to load data from AJAX.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (XMLHttpRequest.DONE == xhr.readyState) {

if (200 == xhr.status) {

var json = xhr.responseText;

t.showAds(JSON.parse(json));

}

};

xhr.onerror = function (e) {

xhr.abort();

};

var url = N.conf.HOST;

xhr.open("POST", url, true);

xhr.send(JSON.stringify(N.param));

addAds: function (c) {

var t = this;

if (undefined == c || 0 == c.length) {

return;

}

for (i in c) {

var adid = c[i].adblockid;

if (adid == 0) {

continue;

}

var ads = c[i].content;

if (undefined == ads || 0 == ads.length) {

continue;

}

var type = c[i].type;

var pAds = t.cls("ad" + adid);

if (pAds.length) {

for (j in pAds) {

if (t.tag("div", pAds[j]).length) {

break;

}

t.buildAd(ads, pAds[j], type);

}

buildAd: function (ads, node, type) {

if (type == 1) {

node.className = "imgad";

for (i in ads) {

var ad = ads[i];

if (ad.image == "" || ad.href == "") {

continue;

}

var a = document.createElement("a");

a.href = ad.href;

var img = document.createElement("img");

img.src = ad.image;

a.appendChild(img);

var div = document.createElement("div");

if (i - 0) div.style.display = "none";

div.appendChild(a);

node.appendChild(div);

}

} else {

node.className = "textad";

for (i in ads) {

var ad = ads[i];

if (ad.href == "" || ad.text == "") {

continue;

}

var a = document.createElement("a");

a.href = ad.href;

if (ad.color) a.style.color = ad.color;

a.innerHTML = ad.text;

var div = document.createElement("div");

if (i - 0) div.style.display = "none";

div.appendChild(a);

node.appendChild(div);

}

this.moveToNext(node);

node.style.display = "";

//广告链接绑定APN切换

if (isAPNSupport()) bindAPNUrls(node);

moveToNext: function (obj) {

var divs = this.tag(‘div‘, obj);

var len = divs.length;

if (len == 1) {

return;

}

var num = 1;

setInterval(function () {

divs[num == 0 ? len - 1 : num - 1].style.display = "none";

divs[num].style.display = "block";

num++;

if (num > len - 1) {

num = 0;

}

}, 6E3);

slide: function (obj) {

var bullets = this.tag("li", this.cls("scroll-control", obj)[0]);

new Swipe(obj, {

speed: 400,

auto: 6E3,

callback: function (pos) {

var i = bullets.length;

while (i--) {

bullets[i].className = ‘ ‘;

}

bullets[pos].className = ‘active‘;

}

});

}

window.addEventListener("load", function () {

new N();

}, !1);

</script>

var _hmt = _hmt || [];

(function () {

var hm = document.createElement("script");

// hm.src = "//hm.baidu.com/hm.js?ac1a596afeee80b9b26eeff564969ede";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

</script>

</body>

</html>

代码是结合实例做的，核心的思想是，在javascript原生代码中循环绑定事件，一般都是会有闭包+变量升级的问题。事件的冒泡和继承是javascript 核心，此处应用于委托就是因为ul 中li的事件冒泡机制，在闭包中失效。委托是一种另类的继承，在闭包中是允许的。冒泡的机制在闭包中也是允许的但是必须是显示的声明，就是ul

li 都要绑定同类型的事件。我是一个javascript 初学者，也是一个原生javascript的爱好研究者，理论不强，有不对的地方请发意见到 1015003209. 求给我大神给我指点。

时间： 2024-11-05 18:51:44

javascript 循环遍历绑定事件问题

javascript 循环遍历绑定事件问题的相关文章

javascript为元素绑定事件响应函数

关于在for循环中绑定事件打印变量i是最后一次。

不使用jquery情况下循环添加绑定事件方法

JavaScript跨浏览器绑定事件函数的优化

JavaScript之元素绑定事件

使用JavaScript循环遍历

javascript中常用的事件绑定方法

JavaScript中，有三种常用的绑定事件的方法

JavaScript绑定事件的方法[3种]