纯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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
jquery 模板的应用示例
Nov 12 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
Angularjs过滤器使用详解
May 25 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python实现SOM算法
2018/02/23 Python
Python shelve模块实现解析
2019/08/28 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
2014教师研修学习体会
2014/07/08 职场文书
驾驶员安全责任书
2014/07/22 职场文书
干部年终考核评语
2015/01/04 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android