JavaScript獲取onclick、onchange等事件值的代碼
更新時(shí)間：2013年07月22日 18:22:30 作者：
這里主要是用到了getAttributeNode()這個(gè)方法，它獲取的是屬性節(jié)點(diǎn)，忽略屬性和事件的差別，具體示例如下，感興趣的朋友可以參考下哈希望對大家有所幫助
今天小菜處理下拉菜單級聯(lián)問題時(shí)，想獲取HTML標(biāo)簽中某個(gè)事件的內(nèi)容，也就是值，比如從<select id="city" onchange="javascript:test();"></select>中獲取javascript:test();。
小菜想通過事件中的信息，確定下一級的菜單，但是這個(gè)貌似很簡單的問題，卻讓小菜糾結(jié)了一番。
稍微懂點(diǎn)JQuery的童鞋，可能會嘗試這樣獲?。?
$(document).ready(function(){
var onchangeValue = $("#city").attr("onchange");
alert(onchangeValue);
});
一般情況下，這樣的確可以獲取到，因?yàn)镴Query萬能的attr方法，可以獲取標(biāo)簽中任何的”屬性”，即使是一個(gè)事件，也可以直接獲取內(nèi)容，這里onchange就是事件。
但小菜在實(shí)際開發(fā)環(huán)境中，用這個(gè)方法怎么也獲取不到，得到的均是undefined。
在糾結(jié)之際，發(fā)現(xiàn)了另外一種用純JavaScript實(shí)現(xiàn)獲取的方法。
具體代碼如下：
$(document).ready(function(){
var onchangeValue = document.getElementById("city").getAttributeNode("onchange").nodeValue;
alert(onchangeValue);
});
簡單說一下，這里主要是用到了getAttributeNode()這個(gè)方法，它獲取的是屬性節(jié)點(diǎn)，忽略屬性和事件的差別，類似于對XML的處理，然后再用nodeValue獲得屬性節(jié)點(diǎn)的節(jié)點(diǎn)值。
如果使用getAttribute()方法，由于onchange是一個(gè)事件，因此獲取的是一個(gè)函數(shù)對象，無法當(dāng)成字符串處理。
希望這篇文章能夠幫助需要的童鞋。
小菜想通過事件中的信息，確定下一級的菜單，但是這個(gè)貌似很簡單的問題，卻讓小菜糾結(jié)了一番。
稍微懂點(diǎn)JQuery的童鞋，可能會嘗試這樣獲?。?
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var onchangeValue = $("#city").attr("onchange");
alert(onchangeValue);
});
一般情況下，這樣的確可以獲取到，因?yàn)镴Query萬能的attr方法，可以獲取標(biāo)簽中任何的”屬性”，即使是一個(gè)事件，也可以直接獲取內(nèi)容，這里onchange就是事件。
但小菜在實(shí)際開發(fā)環(huán)境中，用這個(gè)方法怎么也獲取不到，得到的均是undefined。
在糾結(jié)之際，發(fā)現(xiàn)了另外一種用純JavaScript實(shí)現(xiàn)獲取的方法。
具體代碼如下：
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var onchangeValue = document.getElementById("city").getAttributeNode("onchange").nodeValue;
alert(onchangeValue);
});
簡單說一下，這里主要是用到了getAttributeNode()這個(gè)方法，它獲取的是屬性節(jié)點(diǎn)，忽略屬性和事件的差別，類似于對XML的處理，然后再用nodeValue獲得屬性節(jié)點(diǎn)的節(jié)點(diǎn)值。
如果使用getAttribute()方法，由于onchange是一個(gè)事件，因此獲取的是一個(gè)函數(shù)對象，無法當(dāng)成字符串處理。
希望這篇文章能夠幫助需要的童鞋。
您可能感興趣的文章:
- javascript checkbox/radio onchange不能兼容ie8處理辦法
- Radio 單選JS動態(tài)添加的選項(xiàng)onchange事件無效的解決方法
- jsp中select的onchange事件用法實(shí)例
- 純JavaScript實(shí)現(xiàn)獲取onclick、onchange等事件的值
- js 觸發(fā)select onchange事件代碼
- js中的onchange和onpropertychange (onchange無效的解決方法)
- js觸發(fā)onchange事件的方法說明
- javascript開發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
- javascript中的 onchange事件詳解
相關(guān)文章
30個(gè)最佳jQuery Lightbox效果插件分享
Lightbox 應(yīng)該是最流行的圖片瀏覽效果了，常具有功能包括：自動根據(jù)窗口的大小縮放圖片，模式窗口，幻燈片方式播放，內(nèi)容預(yù)加載，漸變等效果。2011-04-04
點(diǎn)擊后可以輸入排序的數(shù)字編號，移開后自動更新數(shù)據(jù)庫。2010-02-02
jQuery使用zTree插件實(shí)現(xiàn)可拖拽的樹示例
本篇文章主要介紹了js使用zTree插件實(shí)現(xiàn)可拖拽的樹示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了jQuery中prevAll()方法用法,實(shí)例分析了prevAll()方法的功能、定義及查找匹配元素集合之前所有同輩元素的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器用法,實(shí)例分析了:contains()、:has()、:empty()、:parent等內(nèi)容過濾選擇器的使用技巧,需要的朋友可以參考下2015-02-02
JQ技術(shù)實(shí)現(xiàn)注冊頁面帶有校驗(yàn)密碼強(qiáng)度
這篇文章主要介紹了JQ技術(shù)實(shí)現(xiàn)注冊頁面帶有校驗(yàn)密碼強(qiáng)度,需要的朋友可以參考下2015-07-07
jQuery插件EasyUI實(shí)現(xiàn)Layout框架頁面中彈出窗體到最頂層效果(穿越iframe)
這篇文章主要介紹了jQuery插件EasyUI實(shí)現(xiàn)Layout框架頁面中彈出窗體到最頂層效果,具有穿越iframe的功能,涉及jQuery的EasyUI插件屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
本篇文章小編為大家介紹，關(guān)于jquery css的使用介紹。需要的朋友參考下2013-04-04
jquery的優(yōu)點(diǎn)比較多，大家可以學(xué)習(xí)下，網(wǎng)上好多效果都是用jquery實(shí)現(xiàn)的。2009-04-04
jQuery.extend 函數(shù)及用法詳細(xì)
Jquery的擴(kuò)展方法extend是我們在寫插件的過程中常用的方法，該方法有一些重載原型，在此，我們一起通過本篇文章學(xué)習(xí)jquery.extend函數(shù)及用法詳解吧2015-09-09