事件三要素（事件源、事件、监听器） 事件源：在哪个元素上发生的，p、a、div、form表单 事件：到底发生了什么事件，click、mouSEOver、load、submit、focus 监听器：如何应对事件的发生，如何回应发生的事件，通常以函数的形式来出现
你未必理解的事件概念 事件实际上应该称之为事件模型，事件本身只是一个单纯的行为。 事件不是以 on 开头的那个名称，如onclick不是事件，click才是事件。onclick引用的是一个元素对象的属性，它指向click事件类型绑定的实际处理函数。
通过鼠标、键盘对浏览器页面所做的动作就是事件。 事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任 onclick：鼠标点击 onmouseover：鼠标移入 onmouseout：鼠标移出 onkeyup：键盘按下并抬起 onkeydown：键盘按下 onchange：内容改变 onblur：失去焦点 onfocus：获得焦点 onsubmit：表单提交 …
在DOM中，有如下几种方式： DOM 0级，以属性的方式直接写在行内。一般不推荐。 DOM 1级，给元素添加属性，属性的值就是一个具体的函数。用的比较多，好处就是兼容所有的浏览器，写起来简单。它的功能相对要弱一些，不利于团队开发。 下面介绍下DOM2级操作
1) 主流浏览器方式(包括IE9以上 版本浏览器)： itnode.addEventListener(事件类型，事件处理[，事件流]); //设置 itnode.removeEventListener(事件类型，事件处理[，事件流]); //取消
2) IE浏览器方式(IE6/7/8)： itnode.attachEvent(事件类型，事件处理); //设置 itnode.detachEvent(事件类型，事件处理); //取消
事件类型：就是我们可以设置的具体事件，例如onclick/onmouseover等 主流浏览器方式没有”on标志”，例如addEventListener(‘click’，…); IE浏览器方式有”on”标志，例如attachEvent(‘onclick’)
事件处理：事件驱动，可以是一个有名/匿名 函数 例如addEventListener(‘click’,function(){}/有名函数);
事件流：true捕捉型、[false冒泡型]
事件取消(removeEventListener/detachEvent)操作具体要求： ① 事件处理 必须是有名函数，不可以是匿名函数。 ② 事件取消的参数与绑定的参数完全一致(数量/内容)
特点: ① 可以为同一个对象设置多个同类型事件。 ② 事件取消也非常灵活。 ③ 对事件流也有很好的处理控制。
<h2>事件设置</h2><script>//追加事件 var dv=document.getElementsByTagName('h2')[0]; dv.addEventListener('click',function(){ //事件处理过程 dv.style.backgroundColor='lightblue'; }); dv.addEventListener('click',over); function over(){ console.log("单击事件触发了"); }//事件取消 dv.removeEventListener('click',over); //原来的动作不再触发</script>效果图(图中下面网址是水印): 
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”. 图解: 
事件流分为两种类型： 冒泡型：事件从内部往外部依次执行。false 捕捉型：事件从外部往内部依次执行。ture //addEventListener(类型，处理，事件流true捕捉/[false冒泡]);
效果图: 
如果上面代码后面第三个参数不是true,是默认或者false是这如下结果: 
事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被 触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。
①主流浏览器(IE9以上版本浏览器)： 事件处理函数的第一个形参就是 事件对象 例如： node.onclick = function(evt){evt就是事件对象} addEventListener(类型,function(evt){}/函数名字); function 函数名称(evt){} //evt就是事件对象
② IE(6/7/8)浏览器 node.onclick = function(){window.event事件对象} //全局变量event就是事件对象
全局变量直接上级对象是window。可以通过window访问全局变量信息。 window.document.getElementById();
1) 获得鼠标的坐标信息 event.clientX/clientY; //相对dom区域坐标 event.pageX/pageY; //相对dom区域坐标，给考虑滚动条距离 event.screenX/screenY; //相对屏幕坐标
<div>Today is very good</div><script>var dv=document.getElementsByTagName('div')[0];dv.onclick=function(evt){ //相对于dom区域坐标 console.log(evt.clientX+"---"+evt.clientY); //相对于dom区域坐标,计算滚动条 console.log(evt.pageX+"---"+evt.pageY); //相对于屏幕坐标 console.log(evt.screenX+"---"+evt.screenY);}</script>event.stopPRopagation(); //主流浏览器window.event.cancelBubble = true; // IE(678)浏览器 冒泡型、捕捉型都可以进行阻止,为了阻止比较有意义，只考虑冒泡型即可。
<h2>事件流效果</h2><div> <p> <span>Today is very good</span> </p></div><script>var dv=document.getElementsByTagName('div')[0];var p=document.getElementsByTagName('p')[0];var sp=document.getElementsByTagName('span')[0];dv.addEventListener('click',function(evt){ console.log('I am div'); evt.stopPropagation(); //阻止事件流});p.addEventListener('click',function(){ console.log('I am p'); evt.stopPropagation(); //阻止事件流});sp.addEventListener('click',function(){ console.log('I am sp'); evt.stopPropagation(); //阻止事件流});</script>效果图: 
event.keyCode 获得键盘对应的键值码信息 通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。
<h2>事件对象作用</h2><input type="text" id="username"><script>//感知被触发键子信息var it = document.getElementById('username');it.addEventListener('keydown',function(evt){ //alert(evt); //[object KeyboardEvent] var num=evt.keyCode; //获得被触发键子的"数值码" console.log(num);});</script>浏览器默认动作，注册form表单页面，提交表单的时候，浏览器的页面会根据action属性值进行跳转，这个动作称为“浏览器默认动作”。
form表单提交的时候，需要对各个表单域进行验证，如果验证失败则禁止浏览器跳转。
event.preventDefault(); //主流浏览器(dom1和dom2级事件都起作用) event.returnValue = false; //IE(678)浏览器 return false; //dom1级事件设置起作用
<form method='post' action='./1.php'> 密码:<input type="passWord" name="pwd"><br /> <input type="submit" value="注册"></form><script>var fm=document.getElementsByTagName('form')[0];fm.addEventListener('submit',function(evt){ alert('密码不对!'); evt.preventDefault();});</script>js代码执行时候，需要html&CSS的支持，就让html代码先执行(先进入内存)，js代码后执行 js代码在最后执行的过程就是“加载过程”，通常通过“加载事件”实现加载过程
加载事件onload可以保证js代码后于html&css执行，其要在最后执行。 具体设置：
<body onload=”加载函数()”>window.onload = 匿名/有名 函数; //推荐如果使用dom1级操作要注意如下2点:
<h2 id='h'>today is good</h2><script> var obj=document.getElementById("h"); function f1(){ console.log("事件被触发了!"); } //这里函数传地址不带括号就写函数名字 h.onclick=f1; </script><!--这里函数传地址带括号带引号--><h2 id='h' onclick="f1()">today is good</h2><script> var obj=document.getElementById("h"); function f1(){ console.log("事件被触发了!"); } </script>新闻热点
疑难解答
