首页 > 代码库 > ECMAScript—事件
ECMAScript—事件
事件
JavaScript和HML之间的交互是通过事件是实现的。就是用户或者浏览器自身执行的某种动作。
即可以为HTML的元素设定事件处理程序来预定事件,以便在事件发生的时执行相应的代码。
事件流
描述的是从页面中接收事件的顺序。
例如当点击一个按钮这样的事件产生的时候,并不只是当前的按钮元素接收到这个点击事件,这个按钮的父级容器甚至整个文档都接收到了这个事件。
事件流要描述的问题就是,这个点击事件它是从父级容器传到按钮本身,还是从按钮本身传到个个父级容器的。
事件流的分歧
1.IE的事件冒泡,事件由最具体的元素开始接收,然后逐级向上传到较为不具体的节点。
2.Netscape 的事件捕获,与IE的顺序相反。
3.DOM事件流
综合了以上两个模型,将事件流分为三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
要对事件进行处理那么就需要注册事件处理程序,为相应的HTML元素设置事件监听器。
设置事件监听器的方法
1.HTML事件处理程序
在html元素上面对相应的事件属性添加JavaScript事件处理代码
<button lang-id="button.login" type="submit" id="login-btn" onclick="doLogin()">登录</button>
缺点:不够灵活,html和JavaScript代码的耦合度太高
2.单纯的用JavaScript指定事件处理程序
(1)DOM0级方法
优点:简单,跨浏览器
缺点:只支持一个事件处理程序
var btn=docment.getElementById("login-btn"); //添加监听器 btn.onclick=function(){ //dealing code......... }; //删除 btn.onclick=null;
(2)DOM2级方法
使用 addEventListener()和 removeEventListener()两个方法来添加和删除
参数:事件名,处理函数(最好写函数名,写匿名函数删除不了监听器),布尔值
布尔值:true 表示在捕获阶段执行处理 false在冒泡阶段执行处理
支持的浏览器:主流的浏览器,IE9+
优点:支持添加多个事件处理程序,按照添加的顺序被执行
btn.addEventListener("click",hander,false); btn.removeEventListener("click",hander,false);
(3)IE事件处理程序
使用:attachEvent() 和 detachEvent()
参数:事件名、 处理函数
btn.attachEvent("click",hander);
btn.detachEvent("click",hander);
支持的浏览器:opera和IE
优点:支持添加多个事件处理程序,按照添加的顺序反向被执行
其他
事件流是在具体发生元素和它的父级元素上传播的,那么注册事件程序并不一定要写在当前元素上。下面是在chrome浏览器下做的一个小的测试。
//======html========= <input type="button" id="btn" value="http://www.mamicode.com/登录" /> <input type="button" id="btn1" value="http://www.mamicode.com/登录1" /> //=======js========= var btn= document.getElementById(‘btn‘); btn.onclick=function(e){ console.log(e.currentTarget); console.log(this); console.log(e.target); }; document.body.onclick=function(e){ console.log(e.currentTarget); console.log(this); console.log(e.target); };
分别点击两按钮,演示效果如下:
ECMAScript—事件