WebAip---(事件）

                               1.DOM中注册事件有两种语法

                     点语法：只能注册一个'同名'事件

                     addEventListener语法：可以注册多个'同名'事件

2.点语法：不能注册'同名'事件

 2.1 注册： 事件源.事件类型 = 事件处理函数

2.2 移除： 事件源.事件类型 = null

3.addEventListener语法：可以注册多个'同名'事件

 3.1 事件源.addEventListener('事件类型',事件处理函数)

  3.2 事件源.removeEventListener('事件类型',事件处理函数)

                * 只能移除具名事件

 //1.点语法
        let box = document.querySelector('#box')

        // box.onclick = function(){
        //     alert('1-好好学习')
        // }

        //点语法赋值会先销毁旧值
        // box.onclick = function(){
        //     alert('2-天天向上')
        // }

        //2. addEventListener
        /**
        * @description: 注册事件
        * @param {string} 事件类型   不要on,例如 click, mouseenter 
        * @param {function} 事件处理函数
        * @return: 
        */
        box.addEventListener('click',function(){
            alert('1-好好学习')
        })

        box.addEventListener('click',function(){
            alert('2-天天向上')
        })

             阻止默认事件

1默认事件：再html中，有少部分标签自带点击事件（a标签，from表单）

        a标签点机会默认跳转到href属性对应的链接from表单里面的按钮点击默认跳转到action属性对应的链接

2.如果我们自己也要注册点击事件，那么就要阻止默认事件

                e.preventDafult

 a.onclick = function(e){
            e.preventDefault()
            console.log('11111')
        }

                拓展------找bug的思路 

1js所有的bug分为两种

        1.1语法错误：Syntax   Error

        1.2数据错误：Type   Error

                *TypeError：一般是你某个数据是undefined或者null导致

                *null：获取元素选择器写错

                *undefined：

                *Reference  Error：声明变量和使用不是同一个单词（变量声明）

原因：CPU解析代码做两件事：识别语法，处理（运算和储存）数据

2不报错bug

        *主要原因是因为：  js中的引用类型可以动态新增数据

        *给自己心里大方向案列：绝对是单词写错

               事件对象

1事件对象：存储与事件相关的数据。 当我们触发事件的时候，浏览器会自动捕捉触发时的鼠标（坐标点）和键盘信息（按键），存入一个对象中，称之为使劲按对像。

        *事件对象：存储与事件触发相关的数据

        *事件对象是浏览器自动存储的，我们只需要获取即可

2.获取事件对象：给时间处理函数添加形参  event  |  ev  |  e

 3.事件对象e常用属性和方法总结 :

        3.1 阻止默认事件(a和form)  :   e.preventDefault()

        3.2 获取鼠标触发点         :  e.pageX / e.pageY

document.querySelector('#box').onclick = function(e){
        //鼠标触发点到屏幕左上角距离
        console.log( e.pageX , e.pageY )

鼠标跟随移动

 1.复习鼠标事件

onclick:鼠标单击

ondblclick:鼠标双击

onmouseenter:鼠标移入

onmouseleave：鼠标移出

onmousemove：鼠标移动

2.页面鼠标移动：window.onmousemove

                 键盘事件 与获取按键

1.复习键盘事件

oninput：键盘输入（文本框内容有输入，实时获取输入框文本）

onfocus：键盘成为焦点

onblur：键盘失去焦点

onkeydown：键盘按下（监听enter键）

onkeyup：键盘松开

2.获取键盘按键：有两种方式

e.key:获取案件字符串

‘Enter’

e.keyCode：获取按键ASCII码（每一个按键对应一个数字）

let input = document.querySelector('input')

      //键盘按下
      input.onkeydown = function(e){
        console.log('按下键盘');
        console.log(e.key,e.keyCode);
        if( e.keyCode == 13 ){
          alert('按了enter键,执行搜索功能')
        }
      }
//键盘松开
      input.onkeyup = function(){
        console.log('松开键盘');  
      }