纯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调试说明
Jun 07 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
原生js实现购物车
Sep 23 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中的integer类型使用分析
2010/07/27 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
Javascript Objects详解
2014/09/04 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
原生js实现轮播图
2017/02/27 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python实现简单的socket server实例
2015/04/29 Python
python字符串的方法与操作大全
2018/01/30 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
python-numpy-指数分布实例详解
2019/12/07 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
学校安全检查制度
2014/01/27 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
党员干部公开承诺书
2014/03/26 职场文书
心得体会的写法
2014/09/05 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
研究生导师推荐信
2015/03/25 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
公司备用金管理制度
2015/08/04 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS