纯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 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
js中for in的用法示例解析
Dec 25 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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
javascript 获取图片颜色
2009/04/05 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python continue语句用法实例
2014/03/11 Python
Python写入CSV文件的方法
2015/07/08 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
2014年党员创先争优承诺书
2014/05/29 职场文书
工会工作先进事迹
2014/08/18 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android