js事件处理

事件监听

let did = document.getElementById("div-id");

监听函数

Dom0方式
did.onclick = function(e){};

Dom2方式
did.addEventListener("click",(e)=>{});

 元素.addEventListener("事件类型",处理函数,处理阶段bool);
//处理函数可传入 一个唯一的参数事件对象
//处理阶段,缺省false:冒泡阶段处理, true:捕获阶段调用

事件对象event

作为唯一的参数传入事件处理函数,有多种属性

|属性/方法 |说明|
|---------|-----|
|target     |事件发生的对象|
|currentTarget | 发起监听的对象|

this
this等同于event.currentTarget

html中监听

<input type="button" onclick="show()" />       <!-- 单击时,执行show() -->
<input type="button" onclick="show(event)" />  <!-- 传入当前事件对象 -->

js中监听

let did = document.getElementById("div-id")
方式一:
did.addEventListener("click",function(e){})
方式二:
did.onclick= function(e){}

window加载后执行
window.addEventListener("load",(e)=>{})
或 window.onload = function (){};

document加载后执行
document.addEventListener("DOMContentLoaded", function(){} );

解除监听

Dom0
did.onclick=null; //直接赋值为null

Dom2
Dom2中监听用箭头函数作为处理程序的,无法解除,如果需要解除,处理函数需要单独定义
function handle(e){}
did.addEventListener("click",handle) //注册监听
did.removedEventListener("click",handle) //移除监听,括号里的内容要和注册时一模一样

事件类型