Js獲取事件對(duì)象代碼
更新時(shí)間：2010年08月05日 03:30:31 作者：
js下比較實(shí)用的事件綁定代碼，學(xué)習(xí)js 的朋友一定要學(xué)習(xí)的，為你的頁(yè)面增加更好的交互。
一般做法：
<input type="button" id="test" value="點(diǎn)我測(cè)試" />
<script type="text/javascript">
var testBtn = document.getElementById('test');
testBtn.onclick = testFun;
function testFun(e)
{
var evt = e || window.event;
alert(evt);
}
</script>
或者：
<input type="button" id="test" value="點(diǎn)我測(cè)試" />
<script type="text/javascript">
var testBtn = document.getElementById('test');
if(window.addEventListener)
{
testBtn.addEventListener('click', testFun, false);
}
else if(window.attachEvent)
{
testBtn.attachEvent('onclick', testFun);
}
function testFun(e)
{
var evt = e || window.event;
alert(evt);
}
</script>
返回的值都是 “[object Event]“。
但如果是這種方式呢？
<input type="button" id="test_1" value="點(diǎn)我測(cè)試" onclick="testFun_1()" />
<script type="text/javascript">
function testFun_1()
{
//此處如何獲得？
}
</script>
“內(nèi)事不決問(wèn)百度，外事不決問(wèn)谷歌”， 此言不虛。搜索了下，答案還真不少，不過(guò)大多數(shù)雷同（可能是巧合）。
http://m.fzitv.net/article/19408.htm
http://www.cnblogs.com/cuixiping/archive/2008/04/13/1150847.html
愚公 的這個(gè)文章（貌似轉(zhuǎn)帖）還是頗有見解的。
<input type="button" id="test_1" value="點(diǎn)我測(cè)試" onclick="testFun_1()" />
<script type="text/javascript">
function testFun_1()
{
var evt = getEvent();
alert(evt);
}
function getEvent(){
if(window.event) return window.event; //這里用對(duì)象檢測(cè)更為妥當(dāng)
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
</script>
一般來(lái)說(shuō)，很少用到這種嵌入式的寫法（js寫在html標(biāo)簽中 onclick="testFun_1()"），也不推薦使用這種方法，會(huì)造成維護(hù)和開發(fā)的麻煩。
復(fù)制代碼 代碼如下:
<input type="button" id="test" value="點(diǎn)我測(cè)試" />
<script type="text/javascript">
var testBtn = document.getElementById('test');
testBtn.onclick = testFun;
function testFun(e)
{
var evt = e || window.event;
alert(evt);
}
</script>
或者：
復(fù)制代碼 代碼如下:
<input type="button" id="test" value="點(diǎn)我測(cè)試" />
<script type="text/javascript">
var testBtn = document.getElementById('test');
if(window.addEventListener)
{
testBtn.addEventListener('click', testFun, false);
}
else if(window.attachEvent)
{
testBtn.attachEvent('onclick', testFun);
}
function testFun(e)
{
var evt = e || window.event;
alert(evt);
}
</script>
返回的值都是 “[object Event]“。
但如果是這種方式呢？
復(fù)制代碼 代碼如下:
<input type="button" id="test_1" value="點(diǎn)我測(cè)試" onclick="testFun_1()" />
<script type="text/javascript">
function testFun_1()
{
//此處如何獲得？
}
</script>
“內(nèi)事不決問(wèn)百度，外事不決問(wèn)谷歌”， 此言不虛。搜索了下，答案還真不少，不過(guò)大多數(shù)雷同（可能是巧合）。
http://m.fzitv.net/article/19408.htm
http://www.cnblogs.com/cuixiping/archive/2008/04/13/1150847.html
愚公 的這個(gè)文章（貌似轉(zhuǎn)帖）還是頗有見解的。
復(fù)制代碼 代碼如下:
<input type="button" id="test_1" value="點(diǎn)我測(cè)試" onclick="testFun_1()" />
<script type="text/javascript">
function testFun_1()
{
var evt = getEvent();
alert(evt);
}
function getEvent(){
if(window.event) return window.event; //這里用對(duì)象檢測(cè)更為妥當(dāng)
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
</script>
一般來(lái)說(shuō)，很少用到這種嵌入式的寫法（js寫在html標(biāo)簽中 onclick="testFun_1()"），也不推薦使用這種方法，會(huì)造成維護(hù)和開發(fā)的麻煩。
您可能感興趣的文章:
- javascript的offset、client、scroll使用方法詳解
- js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細(xì)說(shuō)明版
- js中的scroll和offset 使用比較的實(shí)例與分析
- javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解
- javascript中offset、client、scroll的屬性總結(jié)
- js之事件冒泡和事件捕獲詳細(xì)介紹
- 阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）
- javascript事件冒泡詳解和捕獲、阻止方法
- js中獲取事件對(duì)象的方法小結(jié)
- JS的Event事件對(duì)象使用方法
- JS前端知識(shí)點(diǎn)offset，scroll，client，冒泡，事件對(duì)象的應(yīng)用整理總結(jié)
相關(guān)文章
解析Javascript中難以理解的11個(gè)問(wèn)題
這篇文章主要是對(duì)Javascript中難以理解的11個(gè)問(wèn)題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了詳解用async/await來(lái)處理異步，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了深入了解JavaScript代碼覆蓋 ,代碼覆蓋提供有關(guān)是否以及可選地應(yīng)用程序的某些部分被執(zhí)行的頻率的信息。它通常用于判定一個(gè)測(cè)試套件執(zhí)行特定代碼庫(kù)的全面程度。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript中文件上傳API，介紹了上傳文件API的使用方法，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義底部導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了微信小程序拍照和攝像功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了微信小程序拍照與攝影功能的原理、相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要介紹了JS sort排序詳細(xì)使用方法示例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)的幾種方式總結(jié)（推薦）
這篇文章主要介紹了微信小程序跳轉(zhuǎn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問(wèn)題探討及解決
Array沒(méi)有indexOf方法，這樣在一個(gè)數(shù)組中查找某個(gè)元素的索引時(shí)比較麻煩，于是通過(guò)prototype原型擴(kuò)展了Array.prototype.indexOf(),在對(duì)數(shù)組進(jìn)行遍歷的時(shí)候卻出現(xiàn)了問(wèn)題2013-04-04
js 剪切板的用法(clipboardData.setData)與js match函數(shù)介紹
這篇文章主要是對(duì)js中剪切板的使用方法(clipboardData.setData)與js中的match函數(shù)進(jìn)行了介紹。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11