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是一个事件，因此获取的是一个函数对象，无法当成字符串处理。
希望这篇文章能够帮助需要的童鞋。

赞 (0)

相关推荐

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • js给onclick事件赋值，动态传参数实例解说

    我们先看看错误的例子 Html代码 复制代码 代码如下: <body> <input id="certid" type="text" value="123456" > <input id="btn" type="button" value="button" onclick=""> </body> Javascript代码

  • 为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)

    下面的例子将展示其结果是没有重载显示提交. 当用户选择一个选项上面,一个函数叫做"getVote()"执行.该功能所引发的"的OnClick"事件 复制代码 代码如下: <html> <head> <script type="text/javascript"> function getVote(int) { if (window.XMLHttpRequest) {// code for IE7+, Firefo

  • JS在onclientclick里如何控制onclick的执行

    OnClientClick是客户端脚本,一般使用JavaScript,在客户端,也就是IE中运行,点击后马上执行 OnClick是服务器端事件处理函数,使用C#或者vb.net,在服务器端,也就是IIS中运行,点击按钮后,执行postback,之后再运行. 若想先调用了OnClientClick后就不在调用OnClick事件,应在OnClientClick事件里返回false.若不返回false,在执行了OnClientClick后,会继续调用OnClick事件! 实现方法如下: <asp:Bu

  • js给onclick赋值传参数的两种方法

    1)当方法没有参数时,赋值可以直接用onclick = 方法名 复制代码 代码如下: window.onload = function() {        $('btnTest').onclick = test;     }  function test() {        alert(val);  } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() 复制代码 代码如下: window.onload = function() {  

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • js动态添加onclick事件可传参数与不传参数

    1)当方法没有参数时,赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() window.onload = function() { $('btnTest').onclick= function() { test(1)

  • javascript 动态改变onclick事件触发函数代码

    javascript 动态改变onclick事件触发函数代码 function oc() { alert("原本的方法"); } function od() { alert("我改变方法了."); } function of() { document.getElementById('name').onclick = function(){ od(); }; } 原来的方法 通过点击,改变原来的方法的执行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js onclick事件传参讲解

    1.在页面中给方法传参数有两种方法 第一:onclick=cancel(id,patientId); 在js文件中定义cancel方法 如果要把当前对象传过去用onclick="cancel(this,id,patientId)" js中cancel(obj,id,patientId) 第二:在js中用jquery$(function(){ var patientId=$("a").attr("patientId"); }),在页面中<tr

  • js触发asp.net的Button的Onclick事件应用

    在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制的麻烦. asp.net带来便利的同时,也带来一个问题.在实际应用中一个页面存在多个按钮的情况并不多.用户习惯于在输入框输入内容之后,直接按回车就提交表单了.由于asp.net采用的是事件驱动模式,所以默认用户按回车并没有触发按钮的onclick事件.用户按回车也不是没有提交表单,通过httpwath可以看到,实际上页面表单是提交到了form下的action页

随机推荐