26.js事件

事件：用户行为

事件三要素:

        事件源  事件类型 事件处理函数

事件绑定

语法1：dom 0级（dom 0级指最原始的，在dom标准被正式定义之前的事件处理方式，事件处理函数通常在<script>标签中或直接在HTML元素的事件属性上）

        事件源.on事件类型=事件处理函数

        一个事件源一个事件类型一次只能绑定一个事件，如：

        

语法2：dom 2级（是w3c文档对象模型(DOM)标准中定义的一个更高级别的事件处理模型，它提供了比DOM0级更丰富的功能和更好的事件控制能力）

        事件源.addEventListener（事件类型，事件处理函数，false(事件冒泡)/true(事件捕获)）

        同一个事件源同一个事件类型可以绑定多个事件处理函数，从上到下依次执行，如：

事件解绑

语法1 dom 0级

        事件源.on事件类型=null

语法2 dom  2级

        事件源.removeEventListener(事件类型，事件处理函数名）

鼠标事件

1.click                    左键单击

2.dbclick                左键双击

3.contextmenu       右键单击

4.mousedown        鼠标按下

5.mouseup             鼠标抬起

6.mousemove         鼠标移动

7.mouseover           鼠标移入

8.mouseout             鼠标移出

9.mouseenter            鼠标移入

10.mouseleave        鼠标移出

7.8是一组  9.10是一组

区别:mouseenter(9.10)不发生事件冒泡，只会在特定元素上触发，mouseover（7.8）会发生事件冒泡，即在子元素上触发的事件会向上传递至父级元素，并触发绑定在父级元素上的相应事件

键盘事件

不是所有的元素都可以触发键盘事件

1.onkeydown   键盘按下

2.onkeyup        键盘抬起

3.onkeypress   键入内容

结合onkeydown获取当前按下的键:

document.onkeydown=function(e){
        console.log(e.key,"按下的键",e.keycode,"对应的keycode"）
        if(e.ctrlKey===true){
             console.log('按下了ctrl键')
        }else if(e.shiftkey===true){
             console.log('按下了shift键')
        }else if(e.alt===true){
             console.log('按下了alt键')
        }
}

表单事件

必须绑定在表单元素上

1.focus         获取焦点

2.blur           失去焦点

3.input          表单键入触发

4.change      内容改变触发

5.sumbit       表单提交 要from绑定

6.reset          表单重置 要form绑定

触摸事件

tochstart         触摸开始

touchmove      正在触摸

touchend         触摸结束

 事件对象

 每个事件都有一个事件对象，存放所有信息

  语法：

        事件源.on事件类型=function(e){

               事件函数的第一个形参永远都是事件对象，此时e就是事件对象

         }