【JavaScript】笔记-事件-事件处理

什么是事件？事件是浏览器内触发的信号

事件的触发：浏览器本身发生的事件

客户端中的浏览器负责监听事件，事件触发时，通过事件处理程序进行处理

事件结合dom可提高网页交互性

事件处理的三要素：

（1）事件源：发生事件的元素节点，document，window

（2）事件类型：监听事件源的哪个事件发生

（3）事件处理程序：事件发生时执行的程序代码块

一，事件处理的方式

总共有三种，这里我只说推荐的事件处理方法

事件监听器：

节点.addEventListener('事件'，回调函数，[捕获])

优点：

（1）一个元素的一个事件可绑定多个事件处理程序。

（2）支持事件流的捕获阶段（第三个参数为true）和冒泡阶段（第三个参数为false或省略）

（3）DOM开头的方式只能用这种方式

例：

<a href="#" id="c">刷新</a>
function getIt(){ ; }
function setIt(){ ; }
let el=document.querySelector('a');
el.addEventListener('click',getIt); 
el.addEventListener('click',setIt);

二，事件处理程序

事件处理程序有具名，匿名，箭头函数

事件处理函数若是具名或匿名函数，this表示绑定事件处理函数的元素引用，

                       若是箭头函数，勿用this

匿名或者箭头函数：适用于事件处理程序只在这用一次。

例：

<a href="#" id="c">刷新</a>
let el=document.querySelector('a');
el.addEventListener('blur',function(){
this.innerHTML='你好';
});

三，具名函数（适用于事件处理程序可能被使用多次的情况）

函数无参数时，只能写函数名，否则是立刻调用。

函数有参数时，只能将函数调用写在匿名函数体中。

function getIt(){this; }
function setIt(temp){this; }
el.addEventListener('blur',getIt);//blur是在元素失去焦点的时候触发
el.addEventListener('blur',function(){
setIt(5);
});

四，删除侦听器

节点.removeEventListener('事件',回调函数，[捕获]);

例:

<a href="#" id="c">刷新</a>
let el=document.querySelector('a');
el.addEventListener('click',setIt);
el.addEventListener('click',getIt);
el.removeEventListener('click',getIt);