JavaScript 三種不同位置代碼的寫法
更新時間:2009年10月25日 20:23:00 作者:
客戶端腳本JavaScript在寫法上其實(shí)有很多種方法,它們的放置位置也非常之多。
下面列舉在三種不同的地方寫JavaScript代碼,實(shí)現(xiàn)的效果都是點(diǎn)擊按鈕button彈出alert警告框
第一種是最常見的,代碼如下
html代碼
<input type="button" value="按鈕1" id="btn1" onclick="pop()">
js代碼
function pop()
{
alert("在JavaScript函數(shù)處調(diào)用");
}
第二種是最簡單的實(shí)現(xiàn)方式,代碼如下
<input type="button" value="按鈕2" id="btn2" onclick="javascript:alert('直接寫函數(shù)');">
第三種方式相對復(fù)雜,代碼如下
html代碼
<input type="button" value="按鈕3" id="btn3">
js代碼
var obj=document.getElementById("btn3");//以下語句一定要放在定義btn3的下面,否則編譯器是不能識別btn3的。
if(window.addEventListener)// Mozilla, Netscape, Firefox等瀏覽器
{
obj.addEventListener("click",fun,false);//注意這里的false
}
else //IE瀏覽器
{
obj.attachEvent("onclick",fun);
}
function fun()
{
alert("通過在函數(shù)中觸發(fā)事件");
}
總結(jié):三種寫法方式實(shí)現(xiàn)的效果是完全一樣的,應(yīng)該說三種方式都是常用的,而且各有優(yōu)缺點(diǎn)。。。。
第一種是最常見的,代碼如下
html代碼
<input type="button" value="按鈕1" id="btn1" onclick="pop()">
js代碼
function pop()
{
alert("在JavaScript函數(shù)處調(diào)用");
}
第二種是最簡單的實(shí)現(xiàn)方式,代碼如下
<input type="button" value="按鈕2" id="btn2" onclick="javascript:alert('直接寫函數(shù)');">
第三種方式相對復(fù)雜,代碼如下
html代碼
<input type="button" value="按鈕3" id="btn3">
js代碼
var obj=document.getElementById("btn3");//以下語句一定要放在定義btn3的下面,否則編譯器是不能識別btn3的。
if(window.addEventListener)// Mozilla, Netscape, Firefox等瀏覽器
{
obj.addEventListener("click",fun,false);//注意這里的false
}
else //IE瀏覽器
{
obj.attachEvent("onclick",fun);
}
function fun()
{
alert("通過在函數(shù)中觸發(fā)事件");
}
總結(jié):三種寫法方式實(shí)現(xiàn)的效果是完全一樣的,應(yīng)該說三種方式都是常用的,而且各有優(yōu)缺點(diǎn)。。。。
相關(guān)文章
JS,Jquery獲取select,dropdownlist,checkbox下拉列表框的值(示例代碼)
本篇文章主要是對JS,Jquery獲取select,dropdownlist,checkbox下拉列表框的值(示例代碼)進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01微信小程序?qū)崿F(xiàn)3D輪播圖效果(非swiper組件)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)3D輪播圖效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09JavaScript實(shí)現(xiàn)找質(zhì)數(shù)代碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)找質(zhì)數(shù)代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03設(shè)置checkbox為只讀(readOnly)的兩種方式
設(shè)置checkbox為只讀的方法有很多,在本文為大家詳細(xì)介紹下兩種比較實(shí)用的方法,感興趣的朋友不要錯過2013-10-10JS基于遞歸實(shí)現(xiàn)網(wǎng)頁版計算器的方法分析
這篇文章主要介紹了JS基于遞歸實(shí)現(xiàn)網(wǎng)頁版計算器的方法,結(jié)合實(shí)例形式分析了javascript采用遞歸算法實(shí)現(xiàn)網(wǎng)頁版計算器的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12