JavaScript中有哪些常见的事件处理程序，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联公司是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：响应式网站设计、品牌网站制作、全网营销推广。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。成都做网站、网站建设、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。
1 HTML 事件处理程序
如果某个元素支持某个事件，那么它都有一个与相应的事件处理程序同名的 HTML 属性，我们可以通过这个属性来指定 JS：
因为这里的脚本是嵌入在 HTML 元素的属性中，所以使用了单引号！
也可以调用在页面的其他地方定义的脚本：
function showMessage() {
console.log("Hello World!");
}
事件处理程序的代码在执行时，可以访问到全局作用域中的任何代码！
这样指定的事件处理程序，会创建一个封装着元素属性值的函数，它有一个局部变量 event，就是事件对象：
通过 event 变量，可以直接访问事件对象。在这个函数内部，this 值等于事件的目标元素：
可以通过这个动态创建的函数，来扩展它的作用域。在这个函数内部，可以访问 document 以及该元素本身的成员，这个函数是像这样使用 with 来扩展作用域的：
function(){
with(document){
with(this){
//元素属性值
}
}
}所以，在事件处理程序中，要访问自己的属性就变得很容易啦 O(∩_∩)O~：
如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口，所以这个函数应该是这样的：
function(){
with(document){
with(this.form){
with(this){
//元素属性值
}
}
}
}这样事件处理程序就无需引用表单元素，就可以直接访问到表单中的其他字段啦O(∩_∩)O~：
在 HTML 中直接指定事件处理程序会有这些缺点：
2 DOM0 级事件处理程序
它是通过将一个函数赋值给事件处理程序的属性，来指定事件处理程序的。要使用这种方法，必须先取得一个要操作的对象的引用。
每个元素（包括 window 和 document） 都有自己的事件处理程序属性，它们通常是小写，比如 onclick。将属性的值设置为函数，就指定了事件处理程序。
DOM0 级事件处理程序是元素的方法，它是在元素的作用域内运行的，因此程序中的 this 引用的是当前元素：
点我
var btn = document.getElementById("myBtn");
btn.onclick = function () {
console.log(this.id);//myBtn
}
可以通过 this 访问元素的任何属性和方法。DOM0 级事件处理程序会在事件流的冒泡阶段被处理。
也可以像这样删除这样指定的事件处理程序：
btn.onclick = null; //删除指定的事件处理程序
注意：如果使用的是 HTML 指定的事件处理程序，那么 onclick 属性的值就是一个包含着在同名 HTML 特性中指定的代码函数。将相应的属性设置为 null，也可以删除以这种方式指定的事件处理程序。
3 DOM2 级事件处理程序
所有的 DOM 节点都包含这两个方法。它们都接受 3 个参数：要处理的事件名、事件处理程序函数、布尔值。最后一个参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
DOM2 级事件处理程序可以很方便地添加多个事件处理程序：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
console.log(this.id);
}, false);
btn.addEventListener("click", function () {
console.log("Hello world!");
}, false);这些事件处理程序会按照添加它们的顺序依序触发。
通过 addEventListener() 添加的事件处理程序只能使用 removeEventListener() 移除！移除时传入的参数必须与添加时的参数相同。这也就意味着通过 addEventListener() 添加的匿名函数将无法被移除：
var handler = function () {
console.log("Hi deniro");
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);//移除成功大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容浏览器。所以如果不是特别需要，请不要在事件捕获阶段注册事件处理程序。
注意：IE9、Firefox、Safari、Chrome 和 Opera 支持 DOM2 级事件处理程序。
4 IE 事件处理程序
IE 实现了与 DOM 类似的方法：attachEvent() 和 detachEvent()。它们接受两个参数：事件处理程序名称和事件处理程序函数。因为 IE8 及早期版本只支持事件冒泡，所以使用 attachEvent() 添加的事件处理程序会被添加到冒泡阶段。
这样为按钮添加一个事件处理程序：
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
});IE 的 attachEvent() 与 DOM0 级方法的区别是事件处理程序的作用域不同。 DOM0 级方法中，事件处理程序会在其所属元素的作用域内运行；而使用 attachEvent() ，事件处理程序会在全局作用域中运行，所以 this 等于 window：
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
console.log("Clicked");
console.log(this === window);//true;this 为全局作用域
});也可以为一个元素添加多个事件处理程序：
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
console.log("Clicked");
console.log(this === window);//true;this 为全局作用域
});
//IE10 中多个事件是按照事件定义的顺序执行
btn.attachEvent("onclick", function () {
console.log("Hello world!");
});IE8 及之前的版本，是以添加它们的相反顺序进行，IE9 修复了这个问题。
可以通过 detachEvent() 来移除添加的事件处理程序，但必须提供相同的参数。所以它也不能移除之前通过匿名函数添加的事件处理程序。只要能够将对相同函数的引用作为参数，就可以移除添加的事件处理程序咯：
点我
var btn = document.getElementById("myBtn");
var handler = function () {
console.log("Clicked");
}
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);
注意：IE 和 Opera 支持 IE 事件处理程序。
5 跨浏览器的事件处理程序
只要恰当地运用能力检测，就能写出跨浏览器的事件处理程序。
var EventUtil = {
/**
* 添加事件
* @param element 要操作的元素
* @param type 事件名称
* @param handler 事件处理函数
*/
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
/**
* 移除事件
* @param element 要操作的元素
* @param type 事件名称
* @param handler 事件处理函数
*/
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}这样使用：
点我
var btn = document.getElementById("myBtn");
var handler = function () {
console.log("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn, "click", handler);
关于JavaScript中有哪些常见的事件处理程序问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
标题名称：JavaScript中有哪些常见的事件处理程序
网站网址：
http://bzwzjz.com/article/ijhpdg.html
