纯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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
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
星际争霸任务指南——神族
2020/03/04 星际争霸
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
用Python中的字典来处理索引统计的方法
2015/05/05 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python如何对XML 解析
2020/06/28 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
服装行业创业计划书范文
2014/02/05 职场文书
公司委托书格式
2014/08/01 职场文书
心得体会的写法
2014/09/05 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
工程技术员岗位职责
2015/04/11 职场文书
入党介绍人意见2015
2015/06/01 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫