如何解决event.value和event.target.value之间的区别
在JavaScript事件处理程序中,event
和event.target
有什么区别?什么时候使用它们?
这是两个示例:(提琴:https://jsfiddle.net/nszp342t/)
HTML:
<select id="test1">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="test2" onchange="handleSelect(this)">
<option value="c">c</option>
<option value="d">d</option>
</select>
JS:
document.getElementById("test1").onchange = (e) => {
console.log(e.value); // undefined
console.log(e.target.value); // works
}
let handleSelect = (e) => {
console.log(e.value); // works
console.log(e.target.value); // Error: e.target is undefined
}
我还尝试了addEventListener()
,其结果与第一次测试相同。除了this之外,我找不到任何文档,该文档没有为我澄清。
是否有推荐的方法来处理事件?我的例子之一被认为是“不良做法”吗?如果两种方法都正确,是否有经验法则/方式记住要使用哪种方法?
解决方法
使用嵌入式HTML on {Event}属性时,事件传递的方式有所不同。参见MDN Docs here.
将事件处理程序指定为HTML属性时,指定的代码将包装到具有以下参数的函数中:
- event —适用于onerror以外的所有事件处理程序。
您可以认为这是您的代码在已经可以访问事件对象的函数中执行。
function (event) {
handleSelect(this) // this is your script that's executing where 'this' is the DOM elem
}
您可以更改handleSelect逻辑,以使用event
对象而不是传入的参数(在本例中为DOM元素)。
let handleSelect = (e) => { // e === this
console.log(event.target.value) // event !== this
}
,
event 提供了一组可以访问的属性。对象属性通过使用点符号访问,例如 event.target
var dog = {
legs: 4,name: 'doggie'
}
console.log(dog.name) // -> doggie
event.target.value 被称为链接,因为它结合了两个属性。它基本上检索它被调用的任何输入的值
查看更多DOM API
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。