JavaScript点击事件绑定函数获取DOM元素value值返回undefined如何解决

问题原因 #

ul 属于非表单类DOM元素，HTML标准中仅<input>、<button>、<select>等表单相关元素内置了value IDL属性，你直接写在ul标签上的value是自定义的Attribute，没有被映射为DOM实例的属性，所以直接通过ele.value访问会返回undefined。
你在控制台打印元素时看到的value是标签的原始属性列表，不等于DOM实例上可直接点访问的属性。

解决方案 #

方案1：直接获取自定义Attribute

修改事件函数，用getAttribute方法读取自定义属性值：

function knowbe4campaignspecific(ele){
    console.log(ele.getAttribute('value'))
}

方案2（更符合规范）：使用标准data-*自定义属性

首先修改属性定义，把自定义属性改为data-value格式：

// 绑定时设置符合标准的自定义属性
listcontainer.setAttribute('data-value', '183085')
listcontainer.setAttribute('onmousedown',"knowbe4campaignspecific(this)")

事件函数中通过dataset读取：

function knowbe4campaignspecific(ele){
    console.log(ele.dataset.value)
}

这种方式符合HTML自定义属性规范，不会和原生属性产生命名冲突，更推荐使用。

内容的提问来源于stack exchange，提问作者user16953756