click无法触发自定义事件

Question

<input type="text">
<button>改变文本框的值</button>

var btn = document.querySelector('button')
var inp = document.querySelector('input')

inp.addEventListener('cval', function (e) {
    this.value = 'hahaha'
})

btn.addEventListener('click', function (e) {
    this.dispatchEvent(new Event('cval'))
})

上面的代码预期是点击按钮后文本框的值改变，但什么也没有发生，请问哪里错了？是不是button不能
派发事件给别的元素？

Answer 1

btn.addEventListener('click', function (e) {
    this.dispatchEvent(new Event('cval'))  //这里的 this 代表 btn 而你是在 inp 上监听的 cval事件，当然没反应啊
})

修改

btn.addEventListener('click', function (e) {
    inp.dispatchEvent(new Event('cval')) 
})