纯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 一道字符串分解的题目
Aug 03 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
JS实现简易留言板特效
Dec 23 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
动态新闻发布的实现及其技巧
2006/10/09 PHP
php中对2个数组相加的函数
2011/06/24 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
理解javascript模块化
2016/03/28 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python 日期操作类代码
2018/05/05 Python
Python列表切片操作实例总结
2019/02/19 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
Final类有什么特点
2012/04/25 面试题
奥利奥广告词
2014/03/20 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
获奖感言怎么写
2015/07/31 职场文书
python实现自定义日志的具体方法
2021/05/28 Python