事件js进阶

事件js

1.addEventListener() 事件监听

button.addEventListener('click',function(){
	console.log("监听事件---1")
}) 事件监听

2.事件解绑(removeEventListener)

button



<script>
    let fn = function(){
        div.classList.toggle("active");
    }
    add.addEventListener("click", fn)  // 监听事件

    remove.addEventListener('click', function(){
        // not enouth argunments
        // 事件类型 第二个参数， 处理函数
        add.removeEventListener('click', fn)
    })


</script>

DOM事件流

事件发生时在元素之间的传播顺序-----事件流

事件对象

e.target ------》事件对象

e.type -------》事件类型

e.preventDefault() -------》阻止默认事件

e.stopPropagation() -------> 阻止冒泡事件

let link = document.querySelector("a");
let form = document.querySelector("form");

link.addEventListener('click',function(e){
	e.preventDefault();
	console.log("a标签")
})

form.addEventListener('click',function(e){
	e.preventDefault();
	console.log("form标签")
})

事件委托

注意：说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行