189 8069 5689
Javascript事件处理程序的3种方式
坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都人造雾小微创业公司专业提供企业网站制作营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。
产生了事件，我们就要去处理他，据马海祥了解Javascript事件处理程序主要有3种方式：
1、HTML事件处理程序
即我们直接在HTML代码中添加事件处理程序，如下面这段代码：
input id="btn1" value="按钮" type="button" onclick="showmsg();"
script
function showmsg(){
alert("HTML添加事件处理");
}
/script
从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个毛病：就是html代码和js的耦合性太强，如果哪一天我想要改变js中showmsg，那么我不但要再js中修改，我还需要到html中修改，一两处的修改我们能接受，但是当你的代码达到万行级别的时候，修改起来就需要劳民伤财了，所以，这个方式我们并不推荐使用。
2、DOM0级事件处理程序
即为指定对象添加事件处理，看下面的一段代码
input id="btn2" value="按钮" type="button"
script
var btn2= document.getElementById("btn2");
btn2.onclick=function(){
alert("DOM0级添加事件处理");
}
btn.onclick=null;//如果想要删除btn2的点击事件，将其置为null即可
/script
从上面的代码中，我们能看出，相对于HTML事件处理程序，DOM0级事件，html代码和js代码的耦合性已经大大降低。但是，聪明的程序员还是不太满足，期望寻找更简便的处理方式，下面马海祥就来说说第三种处理方法。
3、DOM2级事件处理程序
DOM2也是对特定的对象添加事件处理程序（具体可查看马海祥博客的《JavaScript对象属性的基础教程指南》相关介绍），但是主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。
它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件），看下面的一段代码：
input id="btn3" value="按钮" type="button"
script
var btn3=document.getElementById("btn3");
btn3.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处理在各浏览器中兼容性较好
function showmsg(){
alert("DOM2级添加事件处理程序");
}
btn3.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
/script
JavaScript中主要的事件有如下这些：
事件的作用：
事件在HTML中扮演着相当重要的作用，要了解他的作用，首先我们了解下事件的概念：
“事件指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。”
从事件的概念可看出，事件可以大大提高网页的交互性。在上面表格中列出来的事件，我们都可以通过事件处理程序(侦听器)捕捉到。比如当用户点击某个 HTML 元素时启动一段 JavaScript。
为了更通俗的描述事件的作用，下面我列举了几个事件使用的例子：
1、 监听按钮的点击事件onclick，当该事件发生后可以执行JavaScript进行提醒；
alertBtn.onclick = function() {
alert("你在网页中执行了点击操作！");
};
2、 监听页面的加载事件onload，进行一些初始化操作。
window.onload = function() {
prepareEventHandlers(); //prepareEventHandlers函数中进行了初始化操作。
};
3、监听表单的onblur事件，当输入框失去焦点时是否显示提示信息。如下面的邮箱输入框：
emailField.onblur = function() {
if ( emailField.value == "") {
emailField.value = "输入邮箱";
}
};
4、监听表单的onfocus事件，当输入框获取焦点时执行一些操作，如清除提示信息。
emailField.onfocus = function() {
if ( emailField.value == "输入邮箱") {
emailField.value = "";
}
};
可以到教程网-秒秒学上看下相关课程，夯实下基础，事件的机制其实并不难，希望对你理解事件有所帮助。
JavaScript里的事件有很多， 主要分为两种：
一种是由人触发的，比如鼠标单击、双击、移动鼠标、在输入框输入文本等等都会触发这类事件， Javascript通过监视这些事件，可以知道用户在网页里干什么，好做出不同的交互反馈。
第二种是由浏览器产生的事件， 比如文档加载完毕等事件。
不同的浏览器事件也会有所不同， 比如移动端的浏览器，还会有触摸事件、横竖屏切换事件等。
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表:
1、onClick单击事件，常用于button\radio\checkbox\reset buttons\submit buttons对象上面。
2、onChange改变事件，常用于textbox \textarea对象上面，当输入的字符值改变时执行对应的事件代码。
3、onSelect选中事件，当text或textarea对像中的文字被加亮后，引发该事件。
4、onFocus获得焦点事件，当用户单击Text对像以及select对象时，产生该事件。
5、失去焦点onBlur，当不在拥有焦点而退到后台时，引发该事件。
6、载入文件onLoad事件，当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。
7、制裁文件onUnload事件，当WEB页退出时引发onUnload事件，并可更新Cookie的状态。