一.dom两种注册事件语法

1.点语法注册事件

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

例:box.onclick=function(){}

特点:不能注册'同名事件',否则会覆盖

addEventListener注册事件

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

例: box.addEventListener('click',function(){})

特点:可以注册'同名事件',依次触发.

二.移除事件

1.点语法移除事件

box.onclick=null

2.removeEventListener移除事件

事件源.removeEventListener('事件类型',具名函数)

 let box = document.querySelector('#box')
        box.addEventListener('click', function () {
            alert('你是不是有点傻')
        })

        function fn() {
            alert('你是真的傻')
        }
        box.addEventListener('click', fn)

        box.removeEventListener('click', fn)

注意:移除事件必须是具名函数

三.阻止默认事件

1.html中有部分标签自带点击事件: form表单,a标签

2.如果给这些标签注册点击事件,会跳转无效(1)先执行注册的点击(2)后自动执行默认的点击跳转页面

3.阻止默认事件:执行自己注册的事件

(1)方式一: e.preventDefault()

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

(2)方式二: 设置a标签的href

<a href="javascript:;"></a>

四.事件对象

事件对象是存储与事件相关的对象(当用户触发事件的时候,浏览器会自动捕捉触发时(鼠标坐标和键盘按键)的信息,自动存入对象中.这个对象称之为事件对象.)

如何获取事件对象 : 给事件处理函数添加形参 event 、 ev、e

1.事件对象常用属性

e.pageX / e.pageY: 获取鼠标触发点到页面左上角距离

document.querySelector('#box').onclick = function (e) {
      console.log(e)
      console.log(e.pageX, e.pageY)
    }

2.键盘事件与获取按键

1.键盘事件总结

    oninput: 键盘输入(一般用于实时获取输入框'内容)
    onfocus: 键盘成为焦点
    onblur: 键盘失去焦点
    onkeydown: 键盘按下(一般用于获取按键)
    onkeyup : 键盘松开

2.如何获取用户按键

    e.key :按键字符串
    e.keyCode : 键盘ASCII码(键盘上的每一个按键对应一个数字,称之为ASCII码)

document.querySelector('input').onkeydown = function (e) {
      console.log(e)
      console.log(e.key)
    }

五.事件流与事件委托

1.事件冒泡 : 当触发子元素的事件时候，所有的父级元素‘同名事件’会被依次触发

    子元素->父元素->body->html->document->window

2.事件委托(重点) :

给'动态新增'元素注册事件

给父元素注册事件.委托给子元素处理

        (1)什么叫事件委托:给父元素注册事件.委托给子元素处理
        (2)事件委托原理:事件冒泡
        (3)事件委托注意点: this不能使用,this指向父元素.
           e.target:推荐使用,事件目标指向触发冒泡的子元素

3.事件捕获(了解即可)

(1)事件捕获 : 当触发子元素的事件时候，先从最顶级父元素，一级一级往里触发

     规则：  window->document->html->body->父元素->子元素

(2)默认情况下,所有的注册事件都是冒泡事件。只有唯一一种方式可以注册捕获事件：

    元素.addEventListener('事件类型',事件处理函数,true)

4.事件流三个阶段： e.eventPhase

    1-捕获阶段
    2-目标阶段
    3-冒泡阶段

5.阻止事件流动

 e.stopPropagation

写在哪个事件处理函数中,就从哪里开始阻止.

DOM中事件语法讲解