javascript 事件监听是什么?

JavaScript019

javascript 事件监听是什么?,第1张

1、事件监听的定义

在Javascript中,浏览器一般分为两大类:

① 基于IE内核的浏览器(版本号小于9的IE浏览器)

② 基于W3C内核的浏览器(版本号大于9的IE浏览器、Firefox、Google等浏览器)

1)基本语法:基于IE内核浏览器

dom对象.attachEvent(type,callback,capture) :为元素绑定事件监听程序

参数说明:

type:绑定的事件类型,如onclick、onmouseover、onmouseout

callback:事件的处理程序,通常是一个匿名函数

capture:使用的浏览器模型,冒泡模型与捕获模型,默认IE8以下的浏览器只支持冒泡模型!

2)基本语法:基于W3C内核的事件监听

dom对象.addEventListener(type,callback) :为W3C内核浏览器绑定事件监听

参数说明:

type:绑定事件类型,不带’on’前缀,如click,mouseover,mouseout

callback:事件的处理程序,通常是一个匿名函数

3、总结事件监听的区别

IE内核的监听方式与W3C内核的监听方式:

①方式不同

IE内核的浏览器使用attachEvent进行绑定

W3C内核的浏览器使用addEventListener进行绑定

②参数不同

IE内核浏览器,其绑定方式一共有三个参数type,callback,capture(使用的浏览器模型)

W3C内核浏览器,其绑定方式一共有二个参数,type和callback

③type参数不同

IE内核的浏览器,type是需要添加’on’前缀的,如onclick

W3C内核浏览器,type是不需要添加’on’前缀的,如click

④触发顺序不同

IE内核的浏览器,其事件监听是先绑定后触发,后绑定的先触发

W3C内核的浏览器,其事件监听是先绑定先触发,后绑定的后触发

语法

element.addEventListener(event, function, useCapture)

第一个参数是事件的类型(比如 "click" 或 "mousedown")。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。

注意:请勿对事件使用 "on" 前缀;请使用 "click" 代替 "onclick"。

addEventListener可以对一个dom添加多个监听器,并且会顺序执行。

开发中,会遇到多个js文件都使用window.onload,然而只有最后一个绑定的生效,如下:

window.onload = func1()

window.onload = func2()

这时可以用addEventListener来解决:

window.addEventListener('load', func1)

window.addEventListener('load', func2)

js的监听事件就是相当于注册一个监听器,随时检测对应事件有没有发生,如果发生了自动调用定义好的函数来处理。

一般情况下 监听事件是对应于dom元素而言的,同时也需要声明所监听事件种类。

比如可以为一个按钮设置监听事件,点击之后自动调用相应函数处理。

同时可以在用函数处理时使用事件对象(event object)来获得关于触发这个事件的对象的信息。