事件处理方法(事件处理原则)

导语：4、事件处理

Event

addEventListener:指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

type:表示监听事件类型的字符串。

listener:事件处理函数；

event：当为false的时候是事件冒泡，反之则是事件捕获；

注册/移除事件的两种方式

第一种

无法对一个元素注册多个事件；

var btn=document.querySelector(&39;)

btn.onclick=function(){ // 注册事件

console.log(1)

btn.onclick=null; // 移除事件

}

第二种

有浏览器兼容性的问题；

var btn=document.querySelector(&39;)

var Evenfunc=function() { // 注册事件

console.log(1)

btn.removeEventListener(&39;,Evenfunc)

}

btn.addEventListener(&39;, Evenfunc)

事件委托

将事件委托给父级元素来进行监听，子元素不注册事件；

target：获取正在触发事件的对象；

currentTarget：事件处理函数所属的对象；

type：事件类型；

cleatX：鼠标当前点击的坐标；

cleatY：鼠标当前点击的坐标；

preventDefault：取消默认事件；

stopPropagation：停止冒泡；

keyCode：键盘码；

<div class=&34;>

<div class=&34;></div>

<div class=&34;></div>

<div class=&34;></div>

<div class=&34;></div>

</div>

<script type=&34;>

var box = document.querySelector(&39;)

box.onclick = function(e) {

console.log(e.target)

console.log(e.currentTarget)

e.currentTarget.style.border = &39;

}

</script>

本文内容由快快网络小璎整理编辑！