事件

一、事件三要素

1、事件源

绑定事件的节点

2、事件处理函数

当点击事件触发时，执行的代码（函数）

3、事件类型

（单击，hover，move）

DOM1 写法

let divEle = document.querySelector('div');
divEle.onclick = function () {
    window.alert('AAA')
}

DOM2 写法

书写格式：元素节点.addEventListener(事件类型，事件处理函数，Boolean)

参数3：捕获型（true）、冒泡型（false）

addEventListener：事件监听

let divEle = document.querySelector('div');
divEle.addEventListener('click',function () {
    window.alert('XXX');
});

二、事件对象

事件处理函数的参数

例如 item.addEventListener(‘click’, function (e) {} e 就是事件对象

e.target 触发事件的节点

let liEle = document.querySelectorAll('li');
for (const item of liEle) {
    item.addEventListener('click', function (e) {
        // 提升兼容性
        let event = e || window.event;
        console.log(event.target);
        item.style.textDecorationLine = 'line-through';
        item.style.color = 'red';
    });
}

三、事件代理

（事件委托）适用场景：

1、多个子元素绑定相同事件类型执行同一个事件函数

2、子元素是动态

olEle.addEventListener('click',function (e) {
    // 获取当前节点的标签名 localName 标签名只能大写
    if (e.target.nodeName == 'LI') {
        e.target.classList.toggle('box1');
    }
    // 获取当前节点的标签名 localName 标签名不区分大小写
    if (e.target.localName == 'p') {
        e.target.classList.toggle('box2');
    }
})

四、表单事件

<input type="text">

1、焦点事件 focus

inputEle.addEventListener('focus', function (e) {
    e.target.style.outline = '3px solid red';
    let newSpan = document.createElement('span');
    newSpan.innerText = '请输入电话号码';
    bEle.appendChild(newSpan);
})

2、输入事件 input

(只要输入就触发)

inputEle.addEventListener('input', function (e) {
    let str = e.target.value;
    console.log('A');
    let re = /3/img;
    if (re.test(str)) {
        alert('请勿输入关键字!!!');
        e.target.value = '';
    }
})

3、失去焦点 blur

inputEle.addEventListener('blur', function (e) {
    e.target.style.outline = '';
})

4、内容发生变化 change

(失去焦点后判断内容是否发生变化)

inputEle.addEventListener('change', function (e) {
    console.log('f70');
})

五、键盘事件

1、按键按下时触发 keydown

document.addEventListener('keydown',function (e) {
    console.log('按下时',e.key,e.keyCode);
});

2、keypress 只识别字符键

(数字,字母,标点符号,回车)

document.addEventListener('keypress',function (e) {
    console.log("按下的有效键",e.key);
});

3、按键抬起时触发 keyup

document.addEventListener('keyup',function (e) {
    console.log('抬起时',e.key);
});

六、鼠标事件

1、鼠标点击事件

a、click 单击鼠标

artEle.addEventListener('click',function () {
    console.log('click');
})

b、dblclick 双击鼠标

artEle.addEventListener('dblclick',function () {
    console.log('dblclick');
})

c、mousedown鼠标左键按下

sctEle.addEventListener('mousedown',function () {
    console.log('mousedown,section');
})

d、mouseup鼠标左键抬起

sctEle.addEventListener('mouseup',function () {
    console.log('mouseup,section');
})

2、鼠标移入移出事件

mouseover、mouseout会考虑子元素；

mouseenter、mouseleave不会考虑子元素

不考虑子元素：鼠标移入子元素，不会触发父元素的事件

a、mouseenter 鼠标移入事件

artEle.addEventListener('mouseenter',function () {
    console.log('mouseenter');
    artEle.style.backgroundColor = 'gray';
})

a2、mouseleave 鼠标移出事件

artEle.addEventListener('mouseleave',function () {
    console.log('mouseleave');
    artEle.style.backgroundColor = 'skyblue';
})

b1、mouseover 鼠标移入事件

artEle.addEventListener('mouseover',function () {
    console.log('mouseover');
    artEle.style.backgroundColor = 'blue';
})

b2、mouseout 鼠标移出事件

artEle.addEventListener('mouseout',function () {
    console.log('mouseout');
    artEle.style.backgroundColor = 'skyblue';
})

3、mousemove监听鼠标移动

document.addEventListener('mousemove',move);
function move(e) {
    let event = e || window.event;
    // 鼠标在浏览器的位置
    // event.clientX：在浏览器的水平位置
    // event.clientY：在浏览器的崔志位置
    divEle.style.left = event.clientX + 'px';
    divEle.style.top = event.clientY + 'px';
}

七、事件对象的方法

    <article>
        <section>
            <p>
                <a href="../event.html">点我</a>
            </p>
        </section>
    </article>

1、阻止默认事件

event.preventDefault()

let aEle = document.getElementsByTagName("a")[0];
aEle.addEventListener("click", function(e) {
    let event = e || window.event;
    let state = window.confirm("ccc");
    if (!state) {
        event.preventDefault();
    }
});

2、阻止事件冒泡

event.stopPropagation()

sctEle.addEventListener('click', function (e) {
    let event = e || window.event;
    event.stopPropagation();
    console.log('B', 'sctEle');
},fasle)

3、阻止事件捕获

event.stopImmediatePropagation()

artEle.addEventListener('click', function (e) {
    let event = e || window.event;
    event.stopImmediatePropagation();
    console.log('A', 'artEle');
}, true)