事件javascript的简单介绍

javascript事件处理程序分为哪几类?

Javascript事件处理程序的3种方式

产生了事件，我们就要去处理他，据马海祥了解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

相关问答

Q1: JavaScript中都有些什么事件？事件有什么作用？

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 = "";

}

};

可以到教程网-秒秒学上看下相关课程，夯实下基础，事件的机制其实并不难，希望对你理解事件有所帮助。

Q2: javascript事件是什么意思

JavaScript里的事件有很多， 主要分为两种：

一种是由人触发的，比如鼠标单击、双击、移动鼠标、在输入框输入文本等等都会触发这类事件， Javascript通过监视这些事件，可以知道用户在网页里干什么，好做出不同的交互反馈。

第二种是由浏览器产生的事件， 比如文档加载完毕等事件。

不同的浏览器事件也会有所不同， 比如移动端的浏览器，还会有触摸事件、横竖屏切换事件等。

Q3: js中的"事件"是什么？

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表:

Q4: javascript 常用事件有哪些

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的状态。