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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
ECMAScript6--解构
Mar 30 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
layui添加动态菜单与选项卡
Jul 26 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
详解 javascript对象创建模式
Oct 30 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 var_export与var_dump 输出的不同
2013/08/09 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Python函数嵌套实例
2014/09/23 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
什么是反射?如何实现反射?
2016/07/25 面试题
天网工程实施方案
2014/03/26 职场文书
党员民主评议总结
2014/10/20 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
邀请函格式范文
2015/02/02 职场文书
百万英镑观后感
2015/06/09 职场文书
《称赞》教学反思
2016/02/17 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis