js事件监听简介

1.什么是事件监听？

　　就是让计算机监视一个事件是否发生。

2.事件和事件处理程序

　　事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（也叫事件处理函数、事件句柄）。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

　　总之，事件就是一个动作瞬间，如鼠标点击，事件处理程序是一个过程，处理事件发生时的函数的函数。

3.事件监听器

　　监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象，当被监视的对象发生情况时，立即采取相应的行动，即当被监听对象发生上述事件后，监听器某个方法立即被执行。

　　事件监听器，就是当某事件被出发时执行某个事件处理程序，而事件监听器就是用来监听某事件是否被触发。

4.怎么制作事件监听即事件处理？

　　要想让 JavaScript 对用户的操作作出响应，即对用户的操作进行监听并处理，首先要对 DOM 元素绑定事件处理函数。

       在JavaScript中，有三种常用的绑定事件的方法：

  1. 在DOM元素中直接绑定；
  2. 在JavaScript代码中绑定；
  3. 绑定事件监听函数

 

1）在DOM中直接绑定事件

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看， DOM事件 。

 
1
2
3
4
5
6
7
<input type="button" value="click me" onclick="hello()">
 
<script>
function hello(){
 alert("hello world!");
}
</script>

2）在JavaScript代码中绑定事件

在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

 
1
2
3
4
5
6
7
<input type="button" value="click me" id="btn">
 
<script>
document.getElementById("btn").onclick = function(){
 alert("hello world!");
}
</script>

 

上面两种方法一个属性便解决了事件监听和处理，如.onclick = function(){},onclick本身便有事件监听器的功能，右边的函数便是事件处理函数。

在js中还有，自己添加监听器的方法。

3）使用事件监听绑定事件

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来添加监听器，在绑定事件与事件处理函数及处理阶段。

这两个方法都需要3个参数：事件名，事件处理函数，布尔值。

这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
    myBtn.addEventListener("click",function(){
        alert("world");
    },false);
</script>

 

详细请看转载。

转载：http://www.cnblogs.com/starof/p/4067121.html，https://www.jb51.net/article/93752.htm

posted on 2018-11-12 13:36  莉艾尔·雷冯德  阅读(555)  评论(0)  编辑  收藏  举报

导航