纯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数组长度循环数组内所有元素
Dec 27 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
JS实现简易留言板(节点操作)
Mar 16 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中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
javascript中floor使用方法总结
2019/02/02 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python 5个顶级异步框架推荐
2020/09/09 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
网络技术专业推荐信
2014/02/20 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
追悼会家属答谢词
2015/09/29 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python