将每个元素包装到当前对象的属性中,一) 事件名称不相同

2019-11-26 作者:美高梅-服务器   |   浏览(123)

下面四个函数就是其中的一部分。 首先我们要添加一段浏览器检测脚本: 复制代码 代码如下: /************************************ * 检测浏览器 ***********************************/ var user = navigator.userAgent; var browser = {}; browser.opera = user.indexOf > -1 && typeof window.opera == "object"; browser.khtml = > -1 || user.indexOf > -1 || user.indexOf && !browser.opera;browser.ie = user.indexOf > -1 && !browser.opera; browser.gecko = user.indexOf > -1 && !browser.khtml; if { var ie_reg = /MSIE ;/; ie_reg.test; var v = parseFloat; browser.ie55 = v <= 5.5; browser.ie6 = v <= 6; } 一) 添加事件绑定 bind() 这个想必大家都已知道。IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。下面进行封装。 复制代码 代码如下: /************************************ * 添加事件绑定 * @param obj : 要绑定事件的元素 * @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick". * @param fn : 事件处理函数 ************************************/ function bind { if { obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn];} obj.attachEvent( 'on'+type, obj[type+fn] ); } else obj.addEventListener; } 例如添加一个页面点击事件: bind(document, "click", function() { alert; 二) 删除事件绑定 unbind 函数参数相同,功能相反。 复制代码 代码如下: /************************************ * 删除事件绑定 * @param obj : 要删除事件的元素 * @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick" * @param fn : 事件处理函数 ************************************/ function unbind { if { obj.detachEvent( 'on'+type, obj[type+fn] ); obj[type+fn] = null; } else obj.removeEventListener; } 三) 获取元素的计算样式 计算样式也叫最终样式,也就是元素最终呈现出来的样式。IE 用的是元素的 currentStyle 属性,而其他浏览器则是标准的 document.defaultView.getComputedStyle() 方法。 复制代码 代码如下: /************************************ * 返回元素的计算样式 * @param element : 元素 * @param key : 样式名称 ************************************/ function getStyle { // 参数不正确 if ( typeof element != "object" || typeof key != "string" || key == "" ) return false; // 不透明度 if { if { var f = element.filters; if(f && f.length > 0 && f.alpha) { return (f.alpha.opacity / 100); } return 1.0; } return document.defaultView.getComputedStyle["opacity"]; } // 浮动 if { key = (browser.ie ? "styleFloat" : "cssFloat"); } if ( typeof element.currentStyle != "undefined" ){ return element.currentStyle[key]; } else { return document.defaultView.getComputedStyle[key]; } } IE 和其他浏览器的透明度机制不一样,这里统一用 opacity 表示透明度。还有,由于 float 是 JavaScript 的保留字,所以浏览器对其进行了转义,IE 用的是 styleFloat,其他则为 cssFloat。这里统一为 float。 例如:获取透明度 复制代码 代码如下: var a = document.getElementById; var opacity = getStyle; 四) DOM 加载完毕事件绑定 domready() domready 和 window.onload 有所不同,window.onload 是页面所有元素全部加载完毕,包括图像,视频等一些东西。而一般情况下我们不需要等那么久,而只需要 DOM 可用即可。 复制代码 代码如下: /************************************ * domready * @param fn: 要执行的函数 ************************************/ function domready { // 参数不正确 if(typeof fn != "function") return false; if(typeof document.addEventListener == "function") { // 非 IE 浏览器 document.addEventListener("DOMContentLoaded", fn, false); return; } var _this = arguments.callee; if // 如果 DOM 已经加载完毕, 则直接执行 return fn // 创建一个待执行函数数组 _this.list = []; _this.list.push return; // 正在循环检测则返回 { // 循环检测 _this.done = true; try { document.documentElement.doScroll; } catch { setTimeout; return; } // DOM 加载完毕, 执行所有待执行函数 _this.ready = true; for (var i=0, l=_this.list.length; i复制代码 代码如下: domready{ alert;

不过遗憾的是各浏览器都不尽相同。

面向对象的方法封装函数

一) 事件名称不相同
IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel"。而 Gecko(Firefox, Netscape) 对应的事件名称是 "DOMMouseScroll"。

;

二) 事件对象的属性不一样
有时我们需要知道用户是向上滚了还是向下滚了。例如我们有一个响应滚动事件的函数:

(function(){

复制代码 代码如下:

"use strict";

function wheelHandle(e) {
if(e.wheelDelta) {// IE, KHTML, Opera
alert(e.wheelDelta > 0 ? '向上滚' : '向下滚');
} else { // Gecko
alert(e.detail < 0 ? '向上滚' : '向下滚');
}
}

var xQuery = function(selector){

IE, KHTML 支持 e.wheelDelta ,大于 0 为向上滚动,小于 0 为向下滚动。Gecko 支持 e.detail,小于 0 为向上滚动,大于 0 为向上滚动,跟前面的相反。而 Opera 比较牛,两种都支持。
下面给出一个注册滚轮事件的函数做参考:

return new xQuery.prototype.init(selector);

复制代码 代码如下:

}

/**
* 注册滚轮事件函数
* @param element : 注册的事件对象
* @param wheelHandle : 注册事件函数
*/
function addScrollListener(element, wheelHandle) {
if(typeof element != 'object') return;
if(typeof wheelHandle != 'function') return;
// 监测浏览器
if(typeof arguments.callee.browser == 'undefined') {
var user = navigator.userAgent;
var b = {};
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera;
b.ie = user.indexOf("MSIE") > -1 && !b.opera;
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml;
arguments.callee.browser = b;
}
if(element == window)
element = document;
if(arguments.callee.browser.ie)
element.attachEvent('onmousewheel', wheelHandle);
else
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false);
}

xQuery.fn = xQuery.prototype = {

注册一个监听事件:

constructor : xQuery,

复制代码 代码如下:

length : 0, // 长度

var display = document.getElementById('display');
function wheelHandle(e) {
if(e.wheelDelta) {// IE, KHTML, Opera
display.innerHTML = (e.wheelDelta > 0 ? '上' : '下');
} else { // Gecko
display.innerHTML = (e.detail < 0 ? '上' : '下');
}
}
addScrollListener(window, wheelHandle);

/*

一) 事件名称不相同 IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel"。而 Gecko(Firefox, Netscape) 对应...

* 初始化

* @param selector 选择器

* @return

*/

init : function(selector){

if (typeof selector === "string") {

// 根据选择器查找所有元素节点列表

var nodeList = document.querySelectorAll(selector);

// 遍历所有元素,将每个元素包装到当前对象的属性中

for (var i = 0, len = nodeList.length; i < len; i++) {

this[i] = nodeList[i];

}

// 设置当前对象的 length

this.length = len;

} else if(typeof selector === "object") {

this[0] = selector;

this.length = 1;

}

},

/*

* 获取/设置CSS样式

* @param attrName 属性名

* @param attrValue 属性值

*/

css : function(attrName, attrValue){

if (this.length <= 0) // 当前xQuery对象中没有包装的DOM元素

return this;

// 获取

if (typeof attrName === "string" && typeof attrValue === "undefined") {

return getComputedStyle(this[0])[attrName];

}

// 设置

if (typeof attrName === "object") { // 将对象传递的数据作为CSS属性设置

for (var prop in attrName) {

for (var i = 0, len = this.length; i < len; i++) {

本文由美高梅赌堵59599发布于美高梅-服务器,转载请注明出处:将每个元素包装到当前对象的属性中,一) 事件名称不相同

关键词: