纯JavaScript实现获取onclick、onchange等事件的值

 更新时间:2014年12月29日 15:01:03   投稿:hebedich  
这篇文章主要介绍了JavaScript获取onclick、onchange等事件的值的方法,需要的朋友可以参考下

今天小菜处理下拉菜单级联问题时,想获取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是一个事件,因此获取的是一个函数对象,无法当成字符串处理。

         希望这篇文章能够帮助需要的童鞋。。。。。

相关文章

  • js严格模式总结(分享)

    js严格模式总结(分享)

    下面小编就为大家带来一篇js严格模式总结(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • vite添加环境变量import.meta.env的方法

    vite添加环境变量import.meta.env的方法

    在不同的文件里面配置不同的环境变量,可以让我们的配置更加容易维护和使用,这里我们说下vite配置环境变量和模式是怎么配置的,对vite环境变量相关知识感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 微信小程序环境下将文件上传到OSS的方法步骤

    微信小程序环境下将文件上传到OSS的方法步骤

    这篇文章主要介绍了微信小程序环境下将文件上传到OSS的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JS图片定时翻滚效果实现方法

    JS图片定时翻滚效果实现方法

    这篇文章主要介绍了JS图片定时翻滚效果实现方法,涉及javascript结合时间函数实现页面元素动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js实现键盘控制DIV移动的方法

    js实现键盘控制DIV移动的方法

    这篇文章主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
    2015-01-01
  • layui实现显示数据表格、搜索和修改功能示例

    layui实现显示数据表格、搜索和修改功能示例

    这篇文章主要介绍了layui实现显示数据表格、搜索和修改功能,结合实例形式分析了layui显示数据表格、搜索和修改功能具体界面布局、功能实现相关操作技巧,需要的朋友可以参考下
    2020-06-06
  • 微信小程序class封装http代码实例

    微信小程序class封装http代码实例

    这篇文章主要介绍了微信小程序class封装http,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 一文详解Canvas实现打飞字游戏过程示例

    一文详解Canvas实现打飞字游戏过程示例

    这篇文章主要为大家介绍了Canvas实现打飞字游戏示例过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • JS面试之对事件循环的理解

    JS面试之对事件循环的理解

    这篇文章主要为大家介绍了JS面试之对事件循环的理解分析详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JavaScript数组方法总结分析

    JavaScript数组方法总结分析

    下面小编就为大家带来一篇JavaScript数组方法总结分析。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-05-05

最新评论