WebAPI--DOM（添加监听事件）

1.添加监听键盘按下事件

首先获取dom对象，需要确认是

可以添加监听事件的标签类型，比如input、button标签

然后打印查看“keydown”事件回调内容，其中“key”属性存放按下键位名称

2.小练习：在输入框输入任务后，按下回车键将事项添加到列表，点击删除按钮后对应代办事项贝删除

<div>
    <h1>Things</h1>
    <input class="txt" type="'text" placeholder="please input your messages"/>
    <ul class="todo-list"></ul>
</div>

方法一：直接给button添加监听事件 

//输入代办事项，按下回车键后。添加事项到列表
var txt = document.getElementsByTagName('input')[0]
var ul =document.querySelector('.todo-list')
console.log('ul',ul)
console.log(txt)
txt.addEventListener('keydown',function (e) {
    console.log(e,'e')
    if(e.key==='Enter'){
        //input为空时，不添加
        if(!this.value.trim()){
            return
        }
        createLi(this.value.trim())
        this.value=''
    }
})
function createLi(content) {
//生成一个li span button删除按钮
    var li=document.createElement('li')
    var span=document.createElement('span')
    var button=document.createElement('button')
    li.appendChild(span)
    li.appendChild(button)
    span.innerText=content
    button.innerText='delete'
    //监听按钮点击事件
    button.addEventListener('click',function () {
        li.remove()
    })
    console.log(li,'li')
    ul.appendChild(li)

}

方法二：使用事件委托的方式完成删除事件

适用于元素动态生成或删除情况，直接在父元素绑定监听事件即可，且代码量小，更加美观

//使用事件委托的方式完成删除事件
var txt = document.getElementsByTagName('input')[0];
var ul = document.querySelector('.todo-list');
console.log('ul', ul);
console.log(txt);
//不想在动态元素注册事件，可以在父元素注册
function createLi(content) {
  //生成一个li span button删除按钮
  ul.innerHTML += '<li><span>' + content + '</span><button>delete</button</li>';
}
//点击删除后，删除对应的待办事项
ul.addEventListener('click', function (e) {
  if (e.target.tagName === 'BUTTON') {
    //删除该button所属父元素dom
    e.target.parentElement.remove();
  }
});

txt.addEventListener('keydown', function (e) {
  console.log(e, 'e');
  if (e.key === 'Enter') {
    //input为空时，不添加
    if (!this.value.trim()) {
      return;
    }
    createLi(this.value.trim());
    this.value = '';
  }
});