JavaScript获取onclick、onchange等事件值的代码


Posted in Javascript onJuly 22, 2013

今天小菜处理下拉菜单级联问题时,想获取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陷阱清单
May 31 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
offsetHeight在OnLoad中获取为0的现象
Jul 22 #Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 #Javascript
JS 实现图片直接下载示例代码
Jul 22 #Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 #Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 #Javascript
JS判定是否原生方法
Jul 22 #Javascript
js图片延迟加载的实现方法及思路
Jul 22 #Javascript
You might like
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
AngularJS语法详解
2015/01/23 Javascript
JS hashMap实例详解
2016/05/26 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
Vue.js实现立体计算器
2020/02/22 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
独特的python循环语句
2016/11/20 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
对python生成业务报表的实例详解
2019/02/03 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python实现海螺图片的方法示例
2019/05/12 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
测试工程师程序员求职信范文
2014/02/20 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
关于学习的决心书
2015/02/05 职场文书
2015毕业寄语大全
2015/02/26 职场文书
会议营销主持词
2015/07/03 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB