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知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php自动载入类用法实例分析
2016/06/24 PHP
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
在python中画正态分布图像的实例
2019/07/08 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
自我鉴定模板
2013/10/29 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
六一活动主持词
2015/06/30 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript