資訊專欄INFORMATION COLUMN
摘要：前言在編程藝術(shù)中初步實現(xiàn)的圖片庫的總結(jié)一中，有很多不足之處比如事件處理嵌套在中，顯得如此笨重和屌絲沒有對函數(shù)進行相應(yīng)的安全檢查等，本篇文章對上述問題做了全面的升級。
前言：在《DOM編程藝術(shù)》中初步實現(xiàn)的圖片庫的總結(jié)（一）中，有很多不足之處：比如事件處理嵌套在HTML中，顯得如此笨重和屌絲；沒有對showPic函數(shù)進行相應(yīng)的安全檢查等，本篇文章對上述問題做了全面的升級。
－－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－
去掉嵌套在HTML中的事件處理代碼，并且為了js能操作標簽，需要對
標簽添加ID屬性值
電影天堂
選擇一張圖片
2.獲取
function prepareFilm(){
if(!document.getElementsByTagName){
return false;
}
if(!document.getElementById){
return false;
}
if(!document.getElementById("filmlist")){
return false;
}
var list = document.getElementById("filmlist");
var links = list.getElementsByTagName("a");
for(var i = 0; i
3.本例非必需：共享onload事件
本例中必須執(zhí)行prepareFilm函數(shù)才能對onclick事件進行綁定，但是這個函數(shù)又不能在HTML文檔加載之前執(zhí)行，網(wǎng)頁加載完畢時會觸發(fā)一個onload事件，但是需要執(zhí)行的函數(shù)有多個逐一添加又麻煩，而且后續(xù)的函數(shù)會覆蓋上一個，所以就有必要封裝一個addLoadEvent函數(shù)把將要執(zhí)行的函數(shù)作為參數(shù)傳進去，
//共享onlond事件，封裝成一個函數(shù),@func是頁面加載時需要執(zhí)行的那個函數(shù)。
//如果window.onload在頁面加載時還沒有綁定任何函數(shù)，就把需要執(zhí)行的函數(shù)添加給它、
//如果這個處理函數(shù)已經(jīng)綁定了函數(shù)，就把新函數(shù)追加到現(xiàn)有指令的末尾
function addLoadEvent(func){
//把現(xiàn)有的window.onload存入變量oldonload
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
但是這個時候還有一些bug，就是沒有對showPic函數(shù)進行必要的安全檢查，而showPic函數(shù)要被prepareFilm函數(shù)調(diào)用，假如它獲取不到圖片呢？
4.對showPic函數(shù)進行安全檢查
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src" , source);
if(document.getElementById("description")){
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
return true;
}
但是還是有問題，就是此時prepareFilm函數(shù)做了一個假設(shè)：showPic函數(shù)肯定會正常返回，基于這一假設(shè)，prepareFilm函數(shù)在執(zhí)行showPic函數(shù)時就會提前返回一個true，從而取消了onclick事件的默認行為。所以是否要返回一個false值取消onclick默認行為，應(yīng)該由showPic函數(shù)決定，圖片切換成功返回true，圖片切換失敗，返回false。
所以此時應(yīng)該把prepareFilm函數(shù)最后兩句改為：return !showPic(this);
5.添加更多的檢查
（1）假設(shè)每個鏈接都有title屬性，假如不存在把text值設(shè)置為空；
（2）placeholder是否存在？假設(shè)那是一張圖片（本例中它確實是圖片），為了驗證這個情況，可以用nodeName屬性增加這一項測試。
下面是添加更多的檢查之后的showPic函數(shù)代碼：
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src" , source);
if(document.getElementById("description")){
var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
}
return true;
}
6.調(diào)用addLoadEvent函數(shù)
//在頁面加載完成后調(diào)用prepareFilm函數(shù)
addLoadEvent(prepareFilm);
7.完整代碼
老規(guī)矩，上完整源碼
example
電影天堂
選擇一張圖片
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79684.html
摘要：灰姑娘灰姑娘灰姑娘不足點擊事件綁定在代碼中，很笨重，下一篇中將做升級。 前言：在《DOM編程藝術(shù)》一書中，作者給出了一個實例：創(chuàng)建一個圖片庫，其實功能很簡單，就是點擊某個列表項時，下方出現(xiàn)相應(yīng)的圖片以及圖片說明（圖片說明事先以title的形式寫在HTML中），雖然是一個簡單的例子，當時作者在書中循序漸進，不斷的改善圖片庫中間引入各種知識點，真的是一本好書，在此對這個實例進行一些總結(jié)。 ...
摘要：三級事件處理程序級事件定義了兩個方法，分別用于處理指定和刪除事件處理程序的操作和，他們都接收三個參數(shù)要處理的事件名作為事件處理程序的函數(shù)一個布爾值。布爾值如果是表示在捕獲階段調(diào)用事件處理程序，如果是表示在冒泡階段調(diào)用事件處理程序。 前言：擼完CSS－DOM緊接著來擼DOM事件，事件總結(jié)完成后我要開始總結(jié)動畫，然后用純JS實現(xiàn)一個輪播圖，前路漫漫，還有各種框架等著我～～～本篇主要內(nèi)容有：...
摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術(shù)中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。 前言：接上篇，本篇有兩個內(nèi)容：一個是Demo：當鼠標hover到表格的一行上時這行表格字體加粗。。。好了，廢話少說，開始?。?！ －－－－－－－－－－－－－－－－－－嚴肅的分割線－－－－－－－－－－－－－－－－－－ 1....
摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術(shù)中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。 前言：接上篇，本篇有兩個內(nèi)容：一個是Demo：當鼠標hover到表格的一行上時這行表格字體加粗。。。好了，廢話少說，開始?。。?－－－－－－－－－－－－－－－－－－嚴肅的分割線－－－－－－－－－－－－－－－－－－ 1....
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
閱讀 3182·2021-11-22 15:25
閱讀 3860·2021-11-17 09:33
閱讀 3375·2021-11-08 13:15
閱讀 3054·2021-09-22 10:56
閱讀 546·2021-08-31 09:45
閱讀 2758·2019-08-30 13:49
閱讀 3085·2019-08-30 12:52
閱讀 1149·2019-08-29 17:05
