纯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获取和设置CheckBox状态的简单方法
Jul 05 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
微信小程序用户信息encryptedData详解
Aug 24 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 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函数解决SQL injection
2006/10/09 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php查询操作实现投票功能
2016/05/09 PHP
jquery text()要注意啦
2009/10/30 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
.net软件工程师面试题
2015/03/31 面试题
个性婚礼策划方案
2014/05/17 职场文书
银行自荐信怎么写
2015/03/05 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android