纯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+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
js读写json文件实例代码
Oct 21 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
Angular实现表单验证功能
Nov 13 Javascript
js+css实现红包雨效果
Jul 12 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
微信小程序开发技巧汇总
Jul 15 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程序?
2006/12/08 PHP
php的sso单点登录实现方法
2015/01/08 PHP
语义化 H1 标签
2008/01/14 Javascript
javascript不同页面传值的改进版
2008/09/30 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
layui使用label标签的方法
2019/09/14 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Django中使用Celery的教程详解
2018/08/24 Python
Python函数中不定长参数的写法
2019/02/13 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
python中操作文件的模块的方法总结
2021/02/04 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
本科毕业生应聘自荐信范文
2014/06/26 职场文书
不错的求职信范文
2014/07/20 职场文书
环卫工人节活动总结
2014/08/29 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书