js給onclick事件賦值，動(dòng)態(tài)傳參數(shù)實(shí)例解說
更新時(shí)間：2013年03月28日 11:29:14 作者：
js動(dòng)態(tài)給對(duì)象onclick事件賦值,動(dòng)態(tài)傳參數(shù)舉兩個(gè)例子一對(duì)一錯(cuò)，感興趣的朋友可以對(duì)比下，希望可以從中發(fā)現(xiàn)不一樣之處
我們先看看錯(cuò)誤的例子
Html代碼
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>
Javascript代碼
<script>
function show(value)
{
alert(value);
}
btn.onclick = show(certid.value);
<script>
以上代碼執(zhí)行起來是有錯(cuò)誤的,因?yàn)閟how(certid.value)這句,直接就執(zhí)行了show方法,而沒有正確把這個(gè)方法對(duì)象賦給btn.onclick事件.
如果我們改成這樣
btn.onclick = show;
參數(shù)又無法傳遞.
所以正確的代碼應(yīng)該這樣寫,我們加一個(gè)參數(shù)以看得更明白一些:
Html代碼
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>
Javascript代碼
<script>
function show(value1,value2)
{
alert(value1+","+value2);
}
var i = 10;
btn.onclick = function(){
show(certid.value,i);
};
<script>
這樣就實(shí)現(xiàn)了動(dòng)態(tài)給onclick事件句柄賦值,并支持參數(shù)的傳遞.
Html代碼
復(fù)制代碼 代碼如下:
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>
Javascript代碼
復(fù)制代碼 代碼如下:
<script>
function show(value)
{
alert(value);
}
btn.onclick = show(certid.value);
<script>
以上代碼執(zhí)行起來是有錯(cuò)誤的,因?yàn)閟how(certid.value)這句,直接就執(zhí)行了show方法,而沒有正確把這個(gè)方法對(duì)象賦給btn.onclick事件.
如果我們改成這樣
復(fù)制代碼 代碼如下:
btn.onclick = show;
參數(shù)又無法傳遞.
所以正確的代碼應(yīng)該這樣寫,我們加一個(gè)參數(shù)以看得更明白一些:
Html代碼
復(fù)制代碼 代碼如下:
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>
Javascript代碼
復(fù)制代碼 代碼如下:
<script>
function show(value1,value2)
{
alert(value1+","+value2);
}
var i = 10;
btn.onclick = function(){
show(certid.value,i);
};
<script>
這樣就實(shí)現(xiàn)了動(dòng)態(tài)給onclick事件句柄賦值,并支持參數(shù)的傳遞.
相關(guān)文章
JS定時(shí)器用法分析【時(shí)鐘與菜單中的應(yīng)用】
這篇文章主要介紹了JS定時(shí)器用法,結(jié)合時(shí)鐘與菜單中的應(yīng)用分析了JS中setInterval與setTimeout操作時(shí)間的相關(guān)技巧,需要的朋友可以參考下2016-12-12
ElementPlus是一個(gè)基于Vue3的UI組件庫,旨在提供豐富的HTML元素封裝,以簡(jiǎn)化前端開發(fā),主要特點(diǎn)包括預(yù)定義樣式、事件處理、易用性等,為開發(fā)者提供了一致且美觀的用戶界面,同時(shí)支持按需導(dǎo)入,提高項(xiàng)目效率,感興趣的朋友一起看看吧2024-09-09
JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
響應(yīng)一堆相似的事件，但是每個(gè)事件的參數(shù)都不同，在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
用javascript實(shí)現(xiàn)jquery的document.ready功能的實(shí)現(xiàn)代碼
實(shí)現(xiàn)jQuery的document.ready功能js代碼2009-11-11
JavaScript中利用構(gòu)造器函數(shù)模擬類的方法
JavaScript中沒有類的概念，所以其在對(duì)象創(chuàng)建方面與面向?qū)ο笳Z言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類的方法，文中給出了詳細(xì)的示例代碼和介紹，需要的朋友可以參考下，下面一起看看吧。2017-02-02
大型網(wǎng)站往往很矛盾，想用戶在首頁看到更多東西，又不想浪費(fèi)太多服務(wù)器流量。比如一個(gè)有3屏的首頁?？赡?0%的用戶進(jìn)首頁的目的是點(diǎn)擊首頁的連接，到子頁面。2010-05-05
復(fù)制本貼標(biāo)題和地址，發(fā)給QQ|Msn上的好友的代碼，方便利用用戶宣傳的js2008-07-07
這篇文章主要介紹了JS ES6變量的解構(gòu)賦值，對(duì)ES6感興趣的同學(xué)，可以參考下2021-05-05
所謂偽數(shù)組,指的是具有類似數(shù)組結(jié)構(gòu)的對(duì)象,但并非真正的數(shù)組,在本文中,我們將詳細(xì)介紹偽數(shù)組的特點(diǎn)和特征,并提供一些JavaScript代碼示例,感興趣的小伙伴快跟隨小編一起學(xué)習(xí)起來吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)放大鏡組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01