javascript自学记录：UI事件

13.4 事件

下面封装了一个EventUtil，后面需要用到：

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; } }};

13.4.1 UI事件

可以使用下面的方法来判断浏览器是否支持不同等级的UI事件。

// 检测浏览器是否支持DOM2的UI事件var isSuported = window.document.implementation.hasFeature(“HTMLEvents”,“2.0”);alert(isSuported);// 检测浏览器是否支持DOM3的UI事件var isSuported3 = window.document.implementation.hasFeature(“UIEvent”,“3.0”);alert(isSuported3);

1、load事件

为window对象指定事件：

window.onload = function (event) {alert(“load”);};

也可以为某个元素指定UI事件，比如img.onload，

var img = document.getElementById(“myimg”);img.onload = function (event) {event = EventUtil.getEvent(event);alert(EventUtil.getTarget(event).src);};

2、unload

文档完全卸载后触发。当页面发生切换时也会触发。主要使用是清除引用，避免内在泄漏。

两种定义方式：

window.body.onunload = function (event) {alert(“unload”);};EventUtil.addHandler(window,“unload”,function (event) {alert(“unload”);});

注：网上说unload事件中的alert是无效的。但没找到方法进行证实。

3、resize

当浏览窗品大小发生变化时该事件被激活。

EventUtil.addHandler(window,“resize”,function (event) {console.log(“resize”);});

传入的event对象有一个target属性，他的值为document。

不同浏览器对resize事件处理不同，那么在这里不要添加大量计算代码，防止页面出现卡顿。

4、scroll

当滚动条变化位置时发生。注意由于会频繁触发，所以不要在此有大量的代码。

EventUtil.addHandler(window, “scroll”, function (event) {console.log(“scroll”);});