纯JavaScript获取HTML元素事件属性的方法

获取HTML事件属性的需求背景

在处理下拉菜单级联逻辑时，有时需要提取HTML标签内定义的事件字符串，例如从<select id="city" onchange="javascript:test();"></select>中获取javascript:test();的内容。

虽然通过事件信息确定下一级菜单看似简单，但在实际实现过程中可能会遇到一些意想不到的困难。

jQuery与纯JS实现方式对比

熟悉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在DOM中表现为事件，该方法可能返回一个函数对象而非字符串，导致无法直接作为字符串处理。

希望上述方法能解决大家在实际开发中遇到的类似问题。