事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

事件是文档或者浏览器窗口中发生的，特定的交互瞬间。

事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。

事件是javaScript和DOM之间交互的桥梁。

你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。

典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

事件捕获的思想就是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="myDiv">Click me!</div>

</body>

</html>

上面这段html代码中，单击了页面中的<div>元素，

在冒泡型事件流中click事件传播顺序为<div>—》<body>—》<html>—》document

在捕获型事件流中click事件传播顺序为document—》<html>—》<body>—》<div>

javascript 的事件类型（事件）-LMLPHP

note:

1）、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：

IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。

IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。

javascript 的事件类型（事件）-LMLPHP

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。上图中为1~3.
处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。

note:

1）、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。

2）、并非所有的事件都会经过冒泡阶段。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。

更多详情见：http://www.cnblogs.com/starof/p/4066381.html

JavaScript中常用的事件

1.onclick事件

点击事件（onclick并不是js中的方法，onclick只是浏览器提供js的一个dom接口，让js可以操作dom，所以onclick大小写都是没问题的，比如HTML代码就不用区分大小写）

例：

<%@pagelanguage="Java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

    functionmyFunction(){

       alert("测试onclick点击事件");

    }

    </script>

</head>

<body>

<center>

<buttononclick="myFunction()">点击这里</button>

</center>

</body>

</html>

onclick通常在下列基本对象中产生：

button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)

2.onload事件

可以body执行，<bodyonload="alert(123)"></body>,其中onload后面可以写一个方法，如：onload="test()",然后在JavaScript中写一个test()方法，则在页面一开始加载的时候会先调用这个方法

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

    functiontest(){

       alert("测试onload方法");

    }

    </script>

</head>

<bodyonload="test()">

</body>

</html>

注意：此方法只能写在<body>标签之中

3.onchange事件

事件在内容改变的时候触发，和jQuery中的change()方法一样

当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。

说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

       functionupperCase(){

         varx = document.getElementById("fname").value;

         document.getElementById("fname").value = x.toUpperCase();

        }

     </script>

</head>

<body>

 <p>

 <labelfor="name">用户名：</label>

 <inputtype="text"id="fname"onchange="upperCase()"value=""/>

</p>

</body>

</html>

说明：上例实际效果是，当输入框失去焦点时内容转成大写。出现这种情况是由于input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。

4.onblur事件和onfocus事件

当前元素失去焦点时触发该事件，对应的是onfocus事件：得到焦点事件

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

  functionchkvalue(txt) {

  if(txt.value=="") alert("文本框里必须填写内容!");

  }

 functionsetStyle(x){

      document.getElementById(x).style.background="yellow"

 }

 </script>

</head>

<body>

失去焦点：

 <inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>

得到焦点：

&nbsp;&nbsp;&nbsp;&nbsp;<inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">

</body>

</html>

5.onscroll事件

窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

  functionmove() {

  alert("页面滚动时调用");

  }

 

window.onscroll = move;

 </script>

</head>

<body>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

</body>

</html>

6.onsubmit事件

属于<form>表单元素，写在<form>表单标签内。语法：onsubmit=”return 函数名()”

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

  functionmove() {

  alert("测试onsubmit........"+testForm.name.value);

  }

 

 </script>

</head>

<body>

<formaction=""method="post"name="testForm"onsubmit="returnmove()">

    <inputtype="text"name="name"value="">

    <br>

    <inputtype="submit"name="submit"value="测试onsubmit"/>

</form>

</body>

</html>

2.鼠标相关事件

1.onmousemove和onmouseout和onmouseover事件

Onmouseover:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。

Onmouseout:鼠标离开某对象范围时，触发事件调用函数。

Onmousemove:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

functionbigImg(x)

{

x.style.height="180px";

x.style.width="180px";

}

functionnormalImg(x)

{

x.style.height="128px";

x.style.width="128px";

}

</script>

</head>

<body>

<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="data:images/defaultAvatar.gif"alt="Smiley">

</body>

</html>

2.onmouseup和onmousedown

Onmouseup:当鼠标松开时触发事件

Onmousedown:当鼠标按下键时触发事件

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

functionmouseDown(){

    document.getElementById("p1").style.color="red";

}

functionmouseUp(){

    document.getElementById("p1").style.color="green";

}

</script>

</head>

<body>

<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">

请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。

</p>

</body>

</html>

常用的事件主要有:
    (1)单击事件:onclick。用户单击鼠标按键时产生的事件，同时。nclick指定的事件处理程序或代码将被调用执行.
    (2)改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。
    (3)选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:
<ipnut type="text" value="默认信息”onselect=alert(”您选中T文本框中的文字”)>
    (4)获得焦点事件:onfocus。用户单击text或textarea以及select对象，即光标落在文本框或选择框时会产生该事件。如:
    <select name= "zhengjian" onfocus=alert(”我成为焦点”)>
    (5)失去焦点事件:onblur.失去焦点事件正好与获得焦点事件相对，当text或textarea以及select对象不再拥有焦点而退出后台时，引发该事件。

(6)载人文件事件:onload,’当页面文件载人时产生该事件。onload的一个作用就是在首次载人一个页面文件时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用，本事件是window的事件，但是在HTML中指定事件处理程序时，一般把它写在<body>标记中。如:
    <body onload=alert(”正在加载页面，请等待一”)>
    (7)卸载文件事件:onunload。与载人文件事件。nload正好相反，当Web页面退出时引发的事件，并可更新。ookie的状态。如:
    <body onunload=confirm(”你确定要离开本页?”)>
    (8)鼠标镇盖事件:onmouseover, onmouseover是当鼠标位于元素上方时所引发的事件。如:
    <input type= "boutton" value=”按钮”onmouseover= "window. status=‘请您注意下面的状态栏·;return true">
    (9)鼠标离开事件:onmouseout, onmouseout是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用，可以创建动态按钮的效果。
    (10)一般事件。
   ondbclick:鼠标双击事件。
   onkeypress:当键盘上的某个键被按下并且释放时触发的事件，要求页面内必须有激活的对象。
    onkeydown:当键盘上某个键被按下时触发的事件，要求页面内必须有激活的对象。
    onkeyup:当键盘上某个键被放开时触发的事件，要求页面内必须有激活的对象。
    (11)页面相关事件。
    onabort:图片在下载时被用户中断时触发的事件。
    onbeforeunload:当前页面的内容将要被改变时触发的事件。

DOM事件流

事件处理程序

HTML 事件处理程序

简单来讲，HTML 事件处理程序是直接在HTML中绑定事件，如下

<input type="button" value="Click Me" onclick="alert(&quot;Clicked&quot;)" />

注意事项：

不能在其中使用未经转义的HTML语法字符，如&、“”、<、>，因为这是在HTML中绑定的，会造成浏览器解析DOM结构错误。

扩展函数作用域，来看下面的代码：

<!-- 输出 "Click Me、lzh" -->

<form method="post">

  <input type="text" name="username" value="lzh">

  <input type="button" value="Click Me" onclick="alert(value);alert(username.value);">

</form>

如果当前元素是一个表单输入元素，浏览器内部大概是这样实现的：

function () {

with (document) {

    with (this.form) {

        with (this) {

            //元素属性值

        }

    }

}

}

如果没有form元素，调用username会报错，所以不论是服务端渲染还是Ajax请求回来数据再渲染，最好还是把form结构写完整。
扩展作用域有三个缺点：

函数被调用时还没定义会报错，只好try{}catch(ex){}，分离的写法可以在DOMContentLoaded之后再绑定。
扩展的作用域链在不同浏览器中会导致不同的结果。
HTML 与 JavaScript 代码紧密耦合，如果要更换事件处理程序，需要改动 HTML 代码和 JavaScript代码。

DOM0级事件处理程序

var btn = document.getElementById("myBtn");

btn.onclick = function () {

    alert(this.id); //"myBtn"

};

DOM2级事件处理程序

var btn = document.getElementById("myBtn");

var handler = function () {

    alert(this.id);

};

btn.addEventListener("click", handler, false);

//这里省略了其他代码

btn.removeEventListener("click", handler, false); // 有效！

IE事件处理程序

跨浏览器的事件处理程序

var EventUtil = {

    addHandler: function(element, type, handler){

        if (element.addEventListener){

            element.addEventListener(type, handler, false);

        } else if (element.attachEvent){

            element.attachEvent("on" + type, handler);

        } else {

            element["on" + type] = handler;

        }

    },

    removeHandler: function(element, type, handler){

        if (element.removeEventListener){

            element.removeEventListener(type, handler, false);

        } else if (element.detachEvent){

            element.detachEvent("on" + type, handler);

        } else {

            element["on" + type] = null;

        }

    }

};

事件对象

DOM 中的事件对象

document.body.onclick = function(event){

    alert(event.currentTarget === document.body); //true

    alert(this === document.body); //true

    alert(event.target === document.getElementById("myBtn")); //true

};

IE 中的事件对象

跨浏览器的事件对象

var EventUtil = {

    getEvent: function(event){

        return event ? event : window.event; // window.event DOM0级时IE

    },

    getTarget: function(event){

        return event.target || event.srcElement; // event.srcElement for IE

    },

    preventDefault: function(event){

        if (event.preventDefault){

            event.preventDefault();

        } else {

            event.returnValue = false; // IE

        }

    },

    stopPropagation: function(event){

        if (event.stopPropagation){

            event.stopPropagation();

        } else {

            event.cancelBubble = true; // IE

        }

    }

};

事件类型

这里只总结一些常见的事件类型

UI事件类型

EventUtil.addHandler(window, "load", function(){

    var image = document.createElement("img");

    EventUtil.addHandler(image, "load", function(event){

        event = EventUtil.getEvent(event);

        alert(EventUtil.getTarget(event).src);

    });

    document.body.appendChild(image);

    image.src = "smile.gif"; //在此之前要先指定事件处理程序

});

焦点事件

鼠标与滚轮事件

用代码说明一下 mouseenter、mouseleave 和 mouseover、mouseout 的区别：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <title>test1</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="test1.css">

</head>

<body>

    <div class="mouseover">

        <div class="sub-mouseover">

        </div>

    </div>

    <div class="mouseenter">

        <div class="sub-mouseenter">

        </div>

    </div>

    <script src="test1.js"></script>

</body>

</html>

.wrap {

    width: 200px;

    height: 100px;

}

.mouseover {

    background: pink;

}

.mouseenter {

    margin-top: 30px;

    background: gray;

}

.sub-mouseover,

.sub-mouseenter {

    width: 100px;

    height: 50px;

    background: #AE81FF;

}

var div1 = document.querySelector(".mouseover"),

    div2 = document.querySelector(".mouseenter");

div1.addEventListener("mouseover", function(){

    console.log("div1 mouseover");

});

div1.addEventListener("mouseout", function(){

    console.log("div1 mouseout");

})

div2.addEventListener("mouseenter", function(){

    console.log("div2 mouseenter");

})

div2.addEventListener("mouseleave", function(){

    console.log("div2 mouseleave");

})

效果图
鼠标由左侧从上到下依次经过所有 div 的情况，输出 div1 mouseover div1 mouseout div1 mouseover div1 mouseout div2 mouseenter div2 mouseleave

var div = document.getElementById("myDiv");

EventUtil.addHandler(div, "click", function(event){

    event = EventUtil.getEvent(event);

    var pageX = event.pageX,

        pageY = event.pageY;

    if (pageX === undefined){

        pageX = event.clientX + (document.body.scrollLeft ||

            document.documentElement.scrollLeft);

    }

    if (pageY === undefined){

        pageY = event.clientY + (document.body.scrollTop ||

            document.documentElement.scrollTop);

    }

    alert("Page coordinates: " + pageX + "," + pageY);

});

var div = document.getElementById("myDiv");

EventUtil.addHandler(div, "click", function(event){

    event = EventUtil.getEvent(event);

    var keys = new Array();

    if (event.shiftKey){

        keys.push("shift");

    }

    if (event.ctrlKey){

        keys.push("ctrl");

    }

    if (event.altKey){

        keys.push("alt");

    }

    if (event.metaKey){

        keys.push("meta");

    }

    alert("Keys: " + keys.join(","));

});

键盘与文本事件

变动事件

DOM2 级的变动(mutation)事件能在 DOM 中的某一部分发生变化时给出提示，比如 DOM 节点的插入、移除、特性被修改等等

HTML5 事件

EventUtil.addHandler(window, "load", function(event){

    var div = document.getElementById("myDiv");

    EventUtil.addHandler(div, "contextmenu", function(event){

        event = EventUtil.getEvent(event);

        EventUtil.preventDefault(event);

        var menu = document.getElementById("myMenu");

        menu.style.left = event.clientX + "px";

        menu.style.top = event.clientY + "px";

        menu.style.visibility = "visible";

    });

    EventUtil.addHandler(document, "click", function(event){

        document.getElementById("myMenu").style.visibility = "hidden";

    });

});

EventUtil.addHandler(window, "beforeunload", function(event){

        event = EventUtil.getEvent(event);

        var message = "I'm really going to miss you if you go.";

        event.returnValue = message;

        return message;

});

EventUtil.addHandler(window, "DOMContentLoaded", function(event){

        alert("Content loaded.");

});

EventUtil.addHandler(window, "load", function(event){

        alert("Window loaded.");

});

EventUtil.addHandler(window, "hashchange", function(event){

        console.log(location.hash);

})

设备事件

触摸与手势事件

function handleTouchEvent(event) {

    //only for one touch

    if (event.touches.length == 1) {

        var output = document.getElementById("output");

        switch (event.type) {

            case "touchstart":

                output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";

                break;

            case "touchend":

                output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";

                break;

            case "touchmove":

                event.preventDefault();  //prevent scrolling

                output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";

                break;

        }

    }

}

内存和性能

事件委托

<body>

    <ul id="myLinks">

        <li id="goSomewhere">Go somewhere</li>

        <li id="doSomething">Do something</li>

        <li id="sayHi">Say hi</li>

    </ul>

    <script type="text/javascript">

    (function(){

        var list = document.getElementById("myLinks");

        EventUtil.addHandler(list, "click", function(event){

            event = EventUtil.getEvent(event);

            var target = EventUtil.getTarget(event);

            switch(target.id){

                case "doSomething":

                    document.title = "I changed the document's title";

                    break;

                case "goSomewhere":

                    location.href = "http://www.wrox.com";

                    break;

                case "sayHi":

                    alert("hi");

                    break;

            }

        });

    })();

    </script>

</body>

移除事件处理程序

模拟事件

DOM 中的事件模拟

模拟鼠标事件

<body>

    <input type="button" value="Click me" id="myBtn" />

    <input type="button" value="Send click to the other button" id="myBtn2" />

    <p>This example works in DOM-compliant browsers (not IE).</p>

    <script type="text/javascript">

    (function(){

        var btn = document.getElementById("myBtn");

        var btn2 = document.getElementById("myBtn2");

        EventUtil.addHandler(btn, "click", function(event){

            alert("Clicked!");

            alert(event.screenX);   //100

        });

        EventUtil.addHandler(btn2, "click", function(event){

            //create event object

            var event = document.createEvent("MouseEvents");

            //initialize the event object

            event.initMouseEvent("click", true, true, document.defaultView, 0, 100, 0, 0, 0, false,

                                 false, false, false, 0, btn2);

            //fire the event

            btn.dispatchEvent(event);

        });

    })();

    </script>

</body>

模拟键盘事件

IE 中的事件模拟

第一步：document.createEventObject()
第二步: 通过赋值的方式初始化事件对象，就是 event.screenX = 0 这些
第三步：btn.fireEvent("onclick", event);

事件

javascript 的 事件类型（事件）