事件绑定方式：将对html元素或窗口的操作绑定给响应函数的方式。共四种方式
Html级别绑定
符合DOM0 级的事件绑定方式
符合DOM2
Html级别绑定
无法设置事件流
符合DOM0 级的事件绑定方式
将响应程序直接赋值给dom元素的事件属性。这是DOM最早版本的事件绑定方式，被所有浏览器兼容
无法设置事件流
1、是用普通函数作为响应程序
document.getElementById("btn1").onclick = sayHellow; 不要带（）, 带着（）表示直接调用·
DOM0级别的绑定方式
2、是用匿名函数作为响应程序
document.getElementById("btn2").onclick = function(){ alert("hi："+this.id) }
或者
document.getElementById("btn2").onclick = _ => console.log("hi123ID："+this); //参考我的博客：JavaScript箭头函数（Lambda表达式）
弹出 ： btn1
特点：
在响应函数中this代表目标元素(当前的button对象)
不符合DOM2标准，无法设定事件流
无法直接传递参数，但可以通过其他方式传递
对同一个事件只能绑定一个响应函数，最后绑定的响应函数会执行
通过 obj.onxx = null 可以解除绑定。
总结：可以使用匿名函数或普通函数作为响应函数
传递参数的方式：
传递参数的方法1 ---将参数 作为属性赋 给事件源
document.getElementById("btn3").onclick = function(){
alert("hi："+this.getAttribute("workerNum"));
}
传递参数方法2
使用绑定函数，专门设置一个函数，实现两重调用（绑定）
//绑定函数
bindEvent(document.getElementById("btn4"),"onclick",onclickWorker,"btn=123");
//响应函数
function onclickWorker(wNum){ alert("工号为："+ wNum); }
//执行事件绑定，将参数传给事件源
function bindEvent(dom, eventType , fun ,args){
dom[eventType] = handleEvent;
function handleEvent(){ //闭包
fun.call(this,args); //给响应函数的 this 指针赋值为 dom
}
}
其实综合起来就是一句话：document.getElementById("btn4")["onclick"]= _ => onclickWorker("99999”);
传递参数方法3
JS中的call、apply、bind方法详解
符合DOM2级别的事件绑定方式：（不兼容）
绑定后可以设定事件流的顺序，顺序为绑定顺序。
格式：addEventListener("eventType",callback,use-capture);
eventTye：事件名称。 click 省略on
callback：事件处理方法
use-capture：false-->冒泡阶段/ture-->捕获阶段。
ps:大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器
//浏览器可以自动传入一个对象 event对象
/*document.getElementById("outerDiv").addEventListener("click" , function(){
//执行语句
})*/ //匿名函数方式
document.getElementById("outerDiv").addEventListener("click" ,handleEvent ); //绑定函数方式
特点 ：
可以使用匿名函数或普通函数
响应函数中this代表目标函数
可以设定事件流
无法传递参数，通过其他方式传递
对同一个事件可以绑定多个形影函数，响应函数执行顺序依据绑定顺序
建议使用jquery 的on方法 解决绑定函数兼容方式
1、可以传递参数
2、实现了事件委托
3、on方法可以实现事件流控制
4、在一般的浏览器都兼容