新手指南js添加事件與選取元素方法-js教程-網頁制作

香港交友討論區HkEasyChat

 找回密碼
 新會員註冊
..
喜歡本頁?立即SHARE


香港交友討論區HkEasyChat»論壇forum Hkeasychat電腦網絡 Blog/網頁設計程式區 js添加事件與選取元素方法-js教程-網頁制作
您正在討論區的: js添加事件與選取元素方法-js教程-網頁制作
查看: 61|回復: 0
收起左側

js添加事件與選取元素方法-js教程-網頁制作

[複製鏈接]

簽到天數: 2 天

連續簽到: 1 天

[LV.1]初來乍到

評論頭像

javascript添加事件就像jquery一樣綁定事件給了,而獲取元素我們直接使用getElementById即可,下面我們一起更具體的了解js添加事件與選取元素方法。
今天學習了幾個簡單的小效果,主要就是判斷語句、隨機數、設置元素樣式和鼠標事件的學習,今天就拿來和大家分享一下。
第一個是鼠標移入和移出事件,HTML和JS代碼如下︰
代碼如下復制代碼

兩周內自動登陸
為了您的信息安全,請不要在公共電腦或網吧使用此弁遄I



window.onload=function (){
var oLabel=document.getElementById('tishi');
var oP=document.getElementById('xinxi');

oLabel.onmouseover=function (){
oP.style.display='block';
};
oLabel.onmouseout=function (){
oP.style.display="none";
};
};
從最外層的代碼說起,onload的作用,因為瀏覽器解析代碼的時候是一行一行的依次從上往下來的,所以當解析到var oLabel=document.getElementById('tishi')時,因為下面body里的代碼還沒解析,所以會出現找不到的錯誤,當把代碼放到onload里時,則代表當網頁加載完成之後,再執行onload里的代碼。
獲取元素,這里用的是通過id選擇元素getElementById(),當然相似的還有getElementsByTagName(),這個是通過標簽名選擇一組元素,返回的是節點列表,只可惜沒有通過class選擇元素的方法。
選擇好元素之後,那就是往元素身上添加事件了,當鼠標移入的時候顯示提示框,那就要用到onmouseover事件,表示鼠標移到oLabel身上,就讓下面的提示框顯示,同理onmouseout事件也是這樣,至于顯示隱藏,那就是改變元素的display值啦,隱藏是none,顯示就是除了none的其他值。
第二個是點擊顯示或隱藏︰
代碼如下復制代碼



window.onload=function (){
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function (){
if(oDiv.style.display=="block"){
oDiv.style.display='none';
}else{
oDiv.style.display='block';
}
};
};
判斷語句,因為學的專業就是Java方向的,所以這些基本的語句大部分語言都一樣,但是在上面的JS里這個效果還是有點小問題的,當頁面加載完成後,點擊第一下元素並不會隱藏,這是為什麼呢?因為JS修改樣式修改的是內聯樣式,當然判斷的時候也是依靠內聯樣式判斷的,當頁面加載完成後,div並沒有內聯樣式,所以當第一次點擊的時候,會判斷div的display為一個空字符串,轉為布爾值就是false,這時會執行else後的語句,所以div依然是顯示狀態,解決這個問題也很簡單,只要把判斷條件反過來寫就可以了。代碼如下︰
代碼如下復制代碼
window.onload=function (){
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function (){
if(oDiv.style.display=="none"){
oDiv.style.display='block';
}else{
oDiv.style.display='none';
}
};
};
還有個和這個原理一樣的練習,是播放列表的顯示和隱藏,DEMO在這。
第三個是個比較綜合的練習,涉及的內容有隨機數和隨機顏色。
代碼如下復制代碼










window.onload=function (){
var oWidth=document.getElementById('changeWidth');
var oColor=document.getElementById('changeColor');
var oHeight=document.getElementById('changeHeight');
var oShow=document.getElementById('show');
var oHidden=document.getElementById('hidden');
var oBox=document.getElementById('box');
oWidth.onclick=function (){
var w=parseInt(Math.random()*801);
oBox.style.width=w+'px';
};
oHeight.onclick=function (){
var h=parseInt(Math.random()*601);
oBox.style.height=h+'px';
};
oColor.onclick=function (){
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var bl=parseInt(Math.random()*256);
oBox.style.background='rgb('+r+','+g+','+bl+')';
};
oShow.onclick=function (){
oBox.style.display='block';
};
oHidden.onclick=function (){
oBox.style.display='none';
};
};
隨機數,Math對象里的random()方法,可以產生0-1之間的隨機數,至于包不包含0這個問題各個書上說的都不一樣,但是不包含1是共識。取整,parseInt()將其他類型轉換為整數,好啦,包不包含0反正取整之後肯定會出現0的。改變寬高的效果實現原理是產生一個最大800的隨機數,高是最大600,因為random()產生的數是小于1的,如果乘以800的話,最大只能產生799.xxx的數,取整後最大只能是799,所以這里需要乘以801以便能取到800這個數。下面的高度和顏色同理。隨機顏色用的是RGB表示方法,隨機出3個0-255的數,然後放到rgb()里。這樣就實現了隨機顏色的效果。

附一些實例

元素添加事件是最簡單和向後兼容性最好的Javascript事件添加方法,例如︰
這時鼠標點擊文本字段,則會彈出該文本字段屬性value的值"Happy everyday!"。
往往事件處理不僅有 alert(this.value) ,會包含很多行代碼,所以通常會把代碼寫入事件處理函數中,用onclick屬性調用處理函數。

例一︰www.111cn.net
代碼如下復制代碼


點擊鼠標後,結果卻輸出 undefined ,我們先接著看下面的實例︰
例二︰
代碼如下復制代碼


可以發現輸出為"Happy New Year!",根據以上兩個實例,可以得出this指向的是window對象,或者說函數myFunc無法找到其調用對象,所以輸出的是window對象value屬性的值"Happy New Year!"。為什麼this指向window對象呢?請接著看實例︰
例三︰
代碼如下復制代碼


這次終于得到我們期望的結果"Happy everyday!",根據例二、例三,我得出非官方的結論︰
在每一個事件處理函數外部都會初始化的被加入一個匿名函數,所以函數myFunc找不到其調用對象,根據js作用域機制,this只能指向window對象,下面舉個不恰當但能解釋此結論的例子︰
例四︰
代碼如下復制代碼


至此,元素添加事件分析完畢,還望指教!
現今國內互聯網環境,在html元素上添加事件還很常見,但大多是較為復雜的前端交互中用到,最典型的是郵箱;在各個js框架中,則清一色的選擇addEventListener || attachEvent,這也是w3c與前端大佬們都推薦的;而我圖省事,在沒有框架的小的項目中,會選擇對象添加事件。
每一種添加事件的方式都有利弊吧,根據實際情況選擇就ok。除了元素添加事件外,還有下面4種常見添加事件方法︰
對象添加事件︰
代碼如下復制代碼


注︰由于此方法最早由微軟提出,至今未被w3c組織采納,所以只適用于ie瀏覽器。如果采用這種添加方式,就意味著您必須為每一個要添加事件的元素創建一個
[/td] [/tr]        [/table]注︰此方法也為ie專屬,其它瀏覽器用 addEventListener 方法,由于attachEvent原生的未能將this綁定到調用對象,所以輸出undefined,John Resig 和 Dean Edwards 都已很好的解決此問題,可以自行搜索!
addEventListener 方法添加事件︰
代碼如下復制代碼


注︰此方法是W3C DOM標準定義的。

對于增加動態正事件我們可看看下面例子
Javascript為元素動態的添加事件包括兩種情況︰
不帶參數的事件和帶參數的事件。
一、不帶參數的事件︰
兩種方式︰直接給對象添加事件,節點添加事件
例如給一個id為tab1的添加onclick事件
第一種情況︰
代碼如下復制代碼
var t = document.getElementById("NewTitle");
t.onclick = function showmsg(){
alert('Hello!World');
}
第二種情況 這種情況更加動態,更為實用,而且還能添加多個函數(添加的事件的順序即執行順序),呵呵
代碼如下復制代碼

var tb = document.getElementById("NewTitle");
if(window.addEventListener){ // Mozilla, Netscape, Firefox
td_value.addEventListener('click', alert('cc'), false);
td_value.addEventListener('click', alert('cc'), false);
} else { // IE
td_value.attachEvent('onclick', function(){alert('changchang');});
td_value.attachEvent('onclick', function(){alert('changchang');});
}
二、帶參數的事件
這里的functionName就是事件處理函數,如果是帶參數的那該怎麼辦,
有人說是這樣:
代碼如下復制代碼
element.onclick=function(sb){
alert(sb);
}
是不是上面的那種寫法呢?答案是不正確的。
解決方法︰匿名函數︰
代碼如下復制代碼
element.onclick=function() {
functionName(param);
};
這樣就巧妙的通過匿名方法實現了!
付出最大努力,追求最高成就。
[/td] [/tr]        [/table]





系統自動相關推薦tag:forum,交友,alexa



上一篇︰JavaScript中函數的參數學習筆記-js教程-網頁制作
下一篇︰支持跨域iframe高度隨內容動態縮放自適應-js教程-網頁制作
+10
如您覺得" js添加事件與選取元素方法-js教程-網頁制作 "很膠,請share出去
您正在回覆: js添加事件與選取元素方法-js教程-網頁制作
您需要登錄後才可以回帖 登錄 | 新會員註冊

本版積分規則

回post預設係匿名,如唔想匿名回post請會員自己勾走

閱讀版|閱讀版大量|純文字網頁|香港交友討論區

Copyright © 香港交友討論區HKEASYCHAT Co. All Rights Reserved
香港廣告銷售No.1

手機版|論壇聯絡
HK ADVERTISEMENT 2015 GOLDEN REWARDS

GMT+8, 27-5-2018 03:40 AM

快速回復 返回頂部 返回列表
保持討論區活躍高登錄一齊討論啦~ hkeasychat