纯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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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
用cookies来跟踪识别用户
2006/10/09 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PDO::commit讲解
2019/01/27 PHP
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python 第一步 hello world
2009/09/25 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python+opencv识别图片中的圆形
2020/03/25 Python
python 实现两个线程交替执行
2020/05/02 Python
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
最新党员思想汇报
2014/01/01 职场文书
药品业务员岗位职责
2014/04/17 职场文书
护理工作个人总结
2015/03/03 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
英语导游欢迎词
2015/09/30 职场文书
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技