事件处理程序的绑定
2012-06-10 19:34
459 查看
首先是事件的类型:事件主要分为页面事件(例如 load,unload,resize,scroll,focus,blur),鼠标事件(例如 mousemove,mousedown,mouseup,click,dblclick,mouseover,mouseout)和键盘事件(例如 keydown,keyup,keypress)等类别。
在不同的浏览器中,不同的 DOM 元素能触发的事件各不相同。而 window 对象这个特殊元素也能触发各种页面事件,但是在 IE9 之前的浏览器中不能触发鼠标事件和键盘事件,但我们可以用 document 元素的对应事件。
用 JavaScript 绑定事件处理程序的方法,最简单的方法是用 DOM0 级的方法。例如:
上面的例子将 myelm 元素的 click 事件绑定到 handler 函数,此时 handler 函数是在该元素的作用域内运行的。这种方法各个浏览器都支持,但是有一个缺点,就是不能添加多个事件处理程序。为此我们可以改用 DOM2 级的绑定方法。例如:
在 IE9 之前这种方法不能使用,但是在旧版本 IE 中可以用类似的方法,例如:
用 addEventListener 方法和 attachEvent 方法添加事件处理程序,结果还有两点不同:其一是添加的多个事件处理程序执行顺序相反,在前面的两个例子中,结果分别为先"one"后"two"和先"two"后"one"。其二是前者的事件处理程序在元素的作用域内执行,而后者的处理程序在 window 作用域内执行。
参考资料:
[1] Javascript - Advanced event registration models
[2] element.addEventListener - MDN
[3] element.removeEventListener - MDN
[4] attachEvent method - MSDN
[5] detachEvent method - MSDN
在不同的浏览器中,不同的 DOM 元素能触发的事件各不相同。而 window 对象这个特殊元素也能触发各种页面事件,但是在 IE9 之前的浏览器中不能触发鼠标事件和键盘事件,但我们可以用 document 元素的对应事件。
用 JavaScript 绑定事件处理程序的方法,最简单的方法是用 DOM0 级的方法。例如:
var element = document.getElementById("myelm"); var handler = function() { alert("clicked!"); }; // add event handler element.onclick = handler; // remove event handler element.onclick = null;
上面的例子将 myelm 元素的 click 事件绑定到 handler 函数,此时 handler 函数是在该元素的作用域内运行的。这种方法各个浏览器都支持,但是有一个缺点,就是不能添加多个事件处理程序。为此我们可以改用 DOM2 级的绑定方法。例如:
var element = document.getElementById("myelm"); var handler1 = function() { alert("one!"); }; var handler2 = function() { alert("two!"); }; // add event handler element.addEventListener("click", handler1, false); element.addEventListener("click", handler2, false); // remove event handler element.removeEventListener("click", handler1, false); element.removeEventListener("click", handler2, false);
在 IE9 之前这种方法不能使用,但是在旧版本 IE 中可以用类似的方法,例如:
var element = document.getElementById("myelm"); var handler1 = function() { alert("one!"); }; var handler2 = function() { alert("two!"); }; // add event handler element.attachEvent("onclick", handler1); element.attachEvent("onclick", handler2); // remove event handler element.detachEvent("onclick", handler1); element.detachEvent("onclick", handler2);
用 addEventListener 方法和 attachEvent 方法添加事件处理程序,结果还有两点不同:其一是添加的多个事件处理程序执行顺序相反,在前面的两个例子中,结果分别为先"one"后"two"和先"two"后"one"。其二是前者的事件处理程序在元素的作用域内执行,而后者的处理程序在 window 作用域内执行。
参考资料:
[1] Javascript - Advanced event registration models
[2] element.addEventListener - MDN
[3] element.removeEventListener - MDN
[4] attachEvent method - MSDN
[5] detachEvent method - MSDN
相关文章推荐
- 利用反射绑定事件处理程序(C#)
- 利用反射绑定事件处理程序(C#)
- js使用函数绑定技术改变事件处理程序的作用域
- 如何判断某个事件已经绑定了某个事件处理程序?
- 如何:在 ASP.NET 网页中对事件处理程序进行运行时动态绑定
- 利用反射绑定事件处理程序(C#)
- WPF 获取绑定的事件处理程序绑定全局资源
- jquery之jquery事件处理模型(利用jquery绑定事件处理程序)
- off() 方法 与 unbind() 方法移除绑定事件的处理程序。one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数
- js中事件重复绑定会相应导致多次处理程序的响应
- 如何取得某个菜单所绑定的所有事件处理程序
- 如何取得某个菜单所绑定的所有事件处理程序
- JS事件详解(二) —— 事件处理程序(事件的绑定)
- 利用反射绑定事件处理程序(C#)
- 如何判断某个事件已经绑定了某个事件处理程序?
- JQuery之绑定事件处理程序
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
- objective c 手动创建按钮并绑定事件处理程序
- EA&UML日拱一卒-0基础学习微信小程序(8)-事件处理和数据绑定
- 如何判断某个事件已经绑定了某个事件处理程序?