JavaScript获取onclick、onchange等事件值的代码


Posted in Javascript onJuly 22, 2013

今天小菜处理下拉菜单级联问题时,想获取HTML标签中某个事件的内容,也就是值,比如从<select id="city" onchange="javascript:test();"></select>中获取javascript:test();。
小菜想通过事件中的信息,确定下一级的菜单,但是这个貌似很简单的问题,却让小菜纠结了一番。
稍微懂点JQuery的童鞋,可能会尝试这样获取:

$(document).ready(function(){ 
var onchangeValue = $("#city").attr("onchange"); 
alert(onchangeValue); 
});

一般情况下,这样的确可以获取到,因为JQuery万能的attr方法,可以获取标签中任何的”属性”,即使是一个事件,也可以直接获取内容,这里onchange就是事件。
但小菜在实际开发环境中,用这个方法怎么也获取不到,得到的均是undefined。
在纠结之际,发现了另外一种用纯JavaScript实现获取的方法。
具体代码如下:
$(document).ready(function(){ 
var onchangeValue = document.getElementById("city").getAttributeNode("onchange").nodeValue; 
alert(onchangeValue); 
});

简单说一下,这里主要是用到了getAttributeNode()这个方法,它获取的是属性节点,忽略属性和事件的差别,类似于对XML的处理,然后再用nodeValue获得属性节点的节点值。
如果使用getAttribute()方法,由于onchange是一个事件,因此获取的是一个函数对象,无法当成字符串处理。
希望这篇文章能够帮助需要的童鞋。
Javascript 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
浅析node.js中close事件
Nov 26 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JS截取字符串实例详解
Nov 24 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
js css+html实现简单的日历
Jul 14 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 #Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 #Javascript
JS 实现图片直接下载示例代码
Jul 22 #Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 #Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 #Javascript
JS判定是否原生方法
Jul 22 #Javascript
js图片延迟加载的实现方法及思路
Jul 22 #Javascript
You might like
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
python批量修改文件名的示例
2020/09/27 Python
五四青年节比赛演讲稿
2015/03/18 职场文书
学校中秋节活动总结
2015/03/23 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js