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静态的动态
Sep 18 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
js实现日历与定时器
Feb 22 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
javascript Canvas动态粒子连线
Jan 01 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
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
微信小程序时间轴实现方法示例
2019/01/14 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python绘制多个曲线的折线图
2020/03/23 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python批量下载抖音视频
2019/06/17 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
献爱心活动总结
2014/05/07 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
nginx常用命令放入shell脚本详解
2021/03/31 Servers
python绘制箱型图
2021/04/27 Python
Vue全家桶入门基础教程
2021/05/14 Vue.js
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL