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

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

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

时间: 2024-10-22 01:21:54

纯JavaScript实现获取onclick、onchange等事件的值_javascript技巧的相关文章

纯JavaScript基于notie.js插件实现消息提示特效_javascript技巧

本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下 效果图: 实现的代码: html代码: <br><br><br><br><br><br> <article class="zzsc"> <div class="div-ext"> <div cl

javascript动态获取登录时间和在线时长_javascript技巧

本文实例介绍了javascript动态获取登录时间和在线时长的相应代码,分享给大家供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <title>online</title> <script language=javaScript> ///这里是获得登录时候的时间,用来和动态的时间做差来求时长 var s = new Date(); function clockon() { var thistime = new Date

JavaScript简单获取页面图片原始尺寸的方法_javascript技巧

本文实例讲述了JavaScript简单获取页面图片原始尺寸的方法.分享给大家供大家参考,具体如下: 这里通过Image()对象获取原始宽高 这种方式就没有那么麻烦,直接new一个Image()对象,然后把img的src赋值给他即可获取. var img = new Image(); img.src = $("#target").attr("src"); if(img.complete){ alert('width:'+img.width+',height'+img.

JavaScript中使用stopPropagation函数停止事件传播例子_javascript技巧

JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播.如以下例子: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button&

分享JavaScript监听全部Ajax请求事件的方法_javascript技巧

若Ajax请求是由jQuery的$.ajax发起的,默认情况下可以使用 jQuery的Global Ajax Event Handlers监听到Ajax事件,然而我遇到的却是用原生JavaScript发起的Ajax请求,所以这种方法行不通. 然后呢,还有其他方法,比如说 Pub/Sub,但是这个发起请求的 js 代码我是无法改动的,也就不存在向代码里添加 publish 的问题.同理,jQuery 的 .bind 和 .trigger 也无法使用. 最后,决定使用直接 override XMLH

javascript移动开发中touch触摸事件详解_javascript技巧

事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将事件对象作为window对象的一个属性(相当于全局变量) originalEvent对象 在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象.经查阅发现

JavaScript中停止执行setInterval和setTimeout事件的方法_javascript技巧

js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作. (1)setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,停止该方法可使用 clearInterval 方法.具体示例如下: 复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="t

Javascript获取background属性中url的值_javascript技巧

前言 最近在做项目的时候遇到一个问题,需要获取一个动态预览的图片的地址,这其实不是什么问题,主要是该图片的路径是写在css的background-img属性中的,于是决定要用js获取它的url中的内容,下面给大家分享解决的方法,有需要的朋友们下面来看看. var avatar = $("#image-preview").css("backgroundImage"); alert(avatar); 获取的是包含url("xxx.jpg")形式的值,

JavaScript和JQuery的鼠标mouse事件冒泡处理_javascript技巧

简单的鼠标移动事件: 进入 复制代码 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 复制代码 代码如下: mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题