纯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里使用Dom操作Xml
Sep 20 Javascript
Javascript的闭包详解
Dec 26 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
python实现决策树
2017/12/21 Python
Django开发中的日志输出的方法
2018/07/02 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
电子商务毕业生求职信
2013/11/10 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
司法助理专业自荐书
2014/06/13 职场文书
计算机求职信
2014/07/02 职场文书
法学专业求职信范文
2015/03/19 职场文书
公司聚餐通知
2015/04/22 职场文书
公路施工安全责任书
2015/05/08 职场文书