纯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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
Javascript的闭包详解
Dec 26 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
jquery实现提示语淡入效果
May 05 jQuery
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
vuex实现的简单购物车功能示例
Feb 13 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 session机制
2011/07/17 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php动态生成函数示例
2014/03/21 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
自己的js工具 Event封装
2009/08/21 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python实现静态服务器
2019/09/05 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
关于环保的活动方案
2014/08/25 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
邀请函模板
2015/02/02 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js