javascript 事件监听是什么？

JavaScript011

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内核的浏览器，其事件监听是先绑定先触发，后绑定的后触发

直接用js实现比较麻烦，不同版本的浏览器（主要是低版本的）支持的方法会不一样。

建议使用jquery实现：

添加事件例：

$("button").on("click", function(){

    console.log("clicked")

})

移除事件例：

$("button").off("click")

文档链接：http://api.jquery.com/on/

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>menu</title>

<style type="text/css">

</style>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<script type="text/javascript">

$ (function ()

    {

var sum = 5

    var funny = function (x)

    {

    $ ("#id" + x).on ('click', function ()

    {

    alert ($ (this).attr ("id"))

    })

    }

    $ ("div").on ("keyup", function ()

    {

    for ( var x = 1 x <= sum x++)

    {

    funny (x)

    }

    })

    })

// 绑定事件只能是在页面初始化的时候绑定，

// 只要绑定一次就可以，而且必须绑定一次，正常需求下。

// 如上：每次div键盘谈起，就绑定事件，事件累加绑定，导致效率低下，结果很大概率出错。

// jquery选择器，包括 以id开头的id的dom元素的获取方法

// $("*[id^=id]").each (function (i, dom){

// var me = $(this), idx = me.attr ("id").replace(/[^\d]/g,'')

// if (idx >= 1 && idx <= sum)

    //      {

//            // TODO

   //       }

//})

// 无论如何都不需你那样做。好自为之

</script>

</head>

<body>

<div>ddddddddddddd</div>

<span id="id1">aaaaaaaaaaaa</span>

<span id="id2">aaaaaaaaaaaa</span>

<span id="id3">aaaaaaaaaaaa</span>

<span id="id4">aaaaaaaaaaaa</span>

<span id="id5">aaaaaaaaaaaa</span>

</body>

</html>