纯JavaScript实现获取onclick、onchange等事件的值


Posted in Javascript onDecember 29, 2014

今天小菜处理下拉菜单级联问题时,想获取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中Object和Function的关系小结
Sep 26 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
js读取本地文件的实例
Dec 22 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 #Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 #Javascript
jQuery中:header选择器用法实例
Dec 29 #Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 #Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 #Javascript
JavaScript中的数学运算介绍
Dec 29 #Javascript
jQuery中:lt选择器用法实例
Dec 29 #Javascript
You might like
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
使用python加密自己的密码
2015/08/04 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
优乐美广告词
2014/03/14 职场文书
六一亲子活动总结
2014/07/01 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
求职自我评价参考范文
2019/05/16 职场文书