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 相关文章推荐
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 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与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP中设置时区方法小结
2012/06/03 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
js实现磁性吸附的示例
2020/10/26 Javascript
python self,cls,decorator的理解
2009/07/13 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python实现调度算法代码详解
2017/12/01 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
python将unicode和str互相转化的实现
2020/05/11 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
优秀部门获奖感言
2014/02/14 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
财务会计专业自荐书
2014/06/30 职场文书
龙猫观后感
2015/06/09 职场文书
《颐和园》教学反思
2016/02/19 职场文书