纯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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
微信小程序实现星级评价效果
2018/12/28 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python编写分类决策树的代码
2017/12/21 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python 求10个数的平均数实例
2019/12/16 Python
Python虚拟环境venv用法详解
2020/05/25 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
假面舞会策划方案
2014/05/29 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
售后客服个人自我评价
2014/09/14 职场文书
承诺函范文
2015/01/21 职场文书
研讨会通知
2015/04/27 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
处理canvas绘制图片模糊问题
2022/05/11 Javascript