响应事件而调用的函数称为事件处理程序（函数）或 事件监听器

HTML事件处理程序

特定的元素支持的每个事件都可以使用事件处理程序的名字以HTML属性的形式来指定。属性的值必须是能够执行的JavaScript代码

<input type="button" value="Click Me" onclick="console.log('Clicked')"/> 
<script> 
 function showMessage() { 
 console.log("Hello world!"); 
 } 
</script> 
<input type="button" value="Click Me" onclick="showMessage()"/>

DOM0 事件处理程序

事件句柄的形式

let btn = document.getElementById("myBtn"); 
btn.onclick = function() { 
 console.log("Clicked"); 
};

• this等于元素
• 注册在事件流的冒泡阶段
• 把事件处理程序属性设置为null，可以移除DOM0方式添加的事件处理程序
  • 也能清除在HTML事件处理程序
  • 所以DOM0事件处理程序优先于HTML事件处理程序

• DOM0事件处理程序只能设置一个处理函数，最后一次设置会覆盖上一次

  DOM2 事件处理程序

  可以设置多个事件处理程序，按照绑定的先后顺序触发。

• addEventListener() 为事件处理程序赋值

• removeEventListener() 为事件处理程序移除

  • 同样都有 3个参数
    • 事件名
    • 事件处理函数（引用）
    • 布尔值 true捕获阶段调用事件处理；false（默认值）表示在冒泡阶段调用事件处理

      IE 事件处理程序

      IE实现了与DOM类似的方法

• attachEvent()

• detachEvent(
  • 同样都有 2个参数
    • 事件处理程序的名字
    • 事件处理函数
  • 只支持事件冒泡

    跨浏览器事件处理程序

    function addEvent(el, type, fn){
    if(el.addEventListener){
     el.addEventListener(type, fn, false);
    }else if(el.attachEvent){
     el.attachEvent('on' + type, function(){
     /*
      * 事件运行时this指向
            * 事件谁触发this就指向触发对象。
            * 而attachEvent，this只会指向window。可以用call/apply解决this指向。
      */
     fn.call(el);
    }
    }else{
     el['on' + type] = fn;
    }
    }

    语雀内容