js事件总结

EventTarget 接口

1. EventTarget 接口
   主要这三个方法

    addEventListener：绑定事件的监听函数
    removeEventListener：移除事件的监听函数
    dispatchEvent：触发事件
   

addEventListener

第二个参数除了监听函数，还可以是一个具有handleEvent方法的对象。
第三个参数除了布尔值useCapture，还可以是一个属性配置对象。

  capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
  once：布尔值，表示监听函数是否只触发一次，然后就自动移除。
   passive：布尔值，表示监听函数不会调用事件的preventDefault方法。如果监听函数调用了，浏览器将忽略这个要求，并在监控台输出一行警告。

addEventListener方法可以为针对当前对象的同一个事件，添加多个不同的监听函数。这些函数按照添加顺序触发，即先添加先触发。如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除（不必使用removeEventListener方法手动去除）。

dispatchEvent
EventTarget.dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。

表单事件

input 事件

该事件跟change事件很像，不同之处在于input事件在元素的值发生变化后立即发生，而change在元素失去焦点时发生，而内容此时可能已经变化多次。也就是说，如果有连续变化，input事件会触发多次，而change事件只在失去焦点时触发一次。

select 事件
select事件当在<input>、<textarea>里面选中文本时触发
change 事件
change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面input事件必然伴随change事件。具体来说，分成以下几种情况。

激活单选框（radio）或复选框（checkbox）时触发。
用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
当文本框或<textarea>元素的值发生改变，并且丧失焦点时触发。

鼠标的事件属性。

onclick
ondblclick
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onwheel
键盘的事件属性。

onkeydown
onkeypress
onkeyup
焦点的事件属性。

onblur
onfocus
表单的事件属性。

oninput
onchange
onsubmit
onreset
oninvalid
onselect
触摸的事件属性。

ontouchcancel
ontouchend
ontouchmove
ontouchstart
拖动的事件属性分成两类：一类与被拖动元素相关，另一类与接收被拖动元素的容器元素相关。

被拖动元素的事件属性。

ondragstart：拖动开始
ondrag：拖动过程中，每隔几百毫秒触发一次
ondragend：拖动结束
接收被拖动元素的容器元素的事件属性。

ondragenter：被拖动元素进入容器元素。
ondragleave：被拖动元素离开容器元素。
ondragover：被拖动元素在容器元素上方，每隔几百毫秒触发一次。
ondrop：松开鼠标后，被拖动元素放入容器元素。