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

原文地址：https://www.cnblogs.com/ReLRayford/p/9945973.html

时间： 2024-08-01 05:19:05

js事件监听简介的相关文章

js事件监听机制(事件捕获)总结

在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

js 事件监听封装

var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler){  if(element.addEventListener){   element.addEventListener(type,handler,false);   }else if(elemnt.attachEvent){//对ie进行判断   element.attachEvent('on'+

js事件监听-addEventListener (w3c标准) 和 attachEvent（ie）

研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv"); //找到对象 oDiv.onclick = function(){ //设置事件监听函数 alert("click"); }} 缺点:1.添加单一事件 2.不能删除事件 第二:IE中监听函数 var oDiv; function fnClick(){ alert("click

js事件监听

通过添加事件监听进一步实现业务处理.可以对同一个元素添加相同的事件监听,执行会从上到下的原则,也可以添加多个事件监听针对同一元素. 针对元素监听: document.getElementById("idName").addEventListener("eventType",functionName);//注意:前面不加on 如click事件 针对window对象监听: window.addEventListener(“resize”,function(){ aler

JS事件监听手机屏幕触摸事件 Touch

JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取

JS事件监听 JS:attachEvent和addEventListener 使用方法

attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListener方法    按钮click 两者使用的原理:可对执行的优先级不一样的事件进行操作:attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Js代码 document.getElementByI

js 事件监听

addEventListener() 方法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数. 第三个参数是个布尔值用于描述事件是冒泡还是捕获.该参数是可选的. 注意:不要使用 "on" 前缀. 例如,使用 "click" ,而不是使用 "oncl

JS事件监听的添加方法

一. 我们一般在的事件添加时是这样做的: elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器,但是存在一个问题,当同一个elm绑定多个事件时,只有最后一个事件会被添加 如:elm.onclick = handler1; elm.onclick = handler2; elm.onclick = hander3; 只有handler3会被添加执行,所以我们使用另外一种方法添加事件: 二. IE:attachEvent elm.attachEv

js事件监听的兼容写法

1 addEvent:function(el,type,fn,capture) { 2 if (window.addEventListener) { 3 if (type === "mousewheel" && document.mozHidden !== undefined) { 4 type = "DOMMouseScroll"; 5 } 6 el.addEventListener(type, fn, !!capture); 7 } else i