因为都是些简单的逻辑代码,所以不作解说。

只是期间用到自定义获取元素的函数get(),和做了浏览器之间的兼容而已。

//为元素添加事件函数
//node --> 需要添加事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要添加的函数
H.DOM.addEvent = function(node,type,handle){
	var node = H.DOM.get(node);
	if(node.addEventListener){
		node.addEventListener(type,handle,false);
	}
	else if(document.attachEvent){
		node.attachEvent("on" + type,handle);
	}
}
//为元素移除事件函数
//node --> 需要移除事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要移除的函数
H.DOM.removeEvent = function(node,type,handle){
	var node = H.DOM.get(node);
	if(node.removeEventListener){
		node.removeEventListener(type,handle,false);
	}
	else if(document.detachEvent){
		node.detachEvent("on" + type,handle);
	}
}

 

 

 

在前面,我们自定义了一个getElementsByClassName()的函数,现在由该函数,我们可以引伸到一个根据类名和id获取元素的函数。

只需要做个判断就是了。因为仅供自己使用,且节省代码,所以并没有兼容所有css选择器,只是根据“.”和“#”这两个条件。

//获取元素
//str --> id , className or object		格式: "#id" , ".className" or 需要获取的对象
H.DOM.get = function(node){
	if(typeof node == "string"){
		var nodestr = node.toString().substr(1);
		if(node.match(/^#/)){
			node = document.getElementById(nodestr);
		}else{
			node = H.DOM.getElementsByClassName(nodestr);
		}
	}
	return node;
}
 
javascript 在事件监听方面的兼容性总结,注意是由于多个浏览器的不一致,导致大家在js书写时需要考虑多个浏览器的兼容性。
1、IE使用attachEvent/detachEvent方法来添加和删除事件监听器;
w3c使用addEventListener/removeEventListener方法。
例一:
//为元素添加事件函数
//node --> 需要添加事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要添加的函数
H.DOM.addEvent = function(node,type,handle){
	var node = H.DOM.get(node);//获取元素
	if(node.addEventListener){
		node.addEventListener(type,handle,false);
	}
	else if(document.attachEvent){
		node.attachEvent("on" + type,handle);
	}
}

2、IE对其事件使用onevent的命名方式,而w3c的是event的命名方式。(见例一)

3、IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器。

例二:
//获取触发事件的元素
// e --> 作为参数,表示事件本身
H.Event.getEventTarget = function(e){
	e = window.event || e;
	return e.srcElement || e.target;
}

4、为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行preventDefault方法。

5、IE没有提供对事件捕获阶段的支持。

6、要停止事件的传递,IE的做法是设置event对象的cancelBubble为true,而w3c的做法是设置执行stopPropagation方法。

7、IE将事件监听器当做一个独立的函数来调用,而w3c中它是作为对象的方法来调用的,这表示在ie中事件监听器中的this关键字指向的不是事件发生对象而是一个没用的全局对象(window对象)。(见例二)

8、IE在使用事件监听器方面存在内存泄露问题。在IE浏览器中,如果要为某个元素创建一个事件监听器,并且在监听器中使用该元素,则在用户进入其他页面之前,该监听器以及相关的DOM节点作占据的内存空间不会被释放。

 

今天写了一个getNextSibling()函数,不单只适合通过id来获取,而且还可以通过class来获取,不过前提是要再写一个getElementsByClassName(),因为原生的js是没有getElementsByClassName()。

HTML代码

<div class="a" id="aa"><p id="p">1</p></div>
<div id="b">2</div>
<div id="c" onclick="check()">3</div>

javascript代码

function getElementsByClassName(str,root,tag){//自定义封装getElementsByClassName()函数
	if(root){
		root = typeof root == "string" ? document.getElementById(root) : root;
	}else{
		root = document.body;
	}
	var tag = tag || "*";
	var ele = root.getElementsByTagName(tag) , arr=new Array();
	for(var i = 0 , k = ele.length ; i < k ; i++ ){
		for(var j = 0 , l = ele[i].className.split(" ") ; j < l.length ; j++){
			if(str == l[j]){
				arr.push(ele[i]);
				break;
			}
		}
	}
	return arr;
}
function getNextSibling(node){/*自定义封装getNextSibling()函数,
                                输入参数node必须带"."的className或带"#"的id*/
	if(typeof node == "string"){
		if(node.match(/^#/)){
			var nodestr = node.toString().substr(1);
			node = document.getElementById(nodestr);
		}else{
			var nodestr = node.toString().substr(1);
			node = getElementsByClassName(nodestr)[0];
		}
	}
	var nextNode = node.nextSibling;
	if(!nextNode) return null;
	if((nextNode.nodeType != 1) && (nextNode.nextSibling)){
		nextNode = nextNode.nextSibling;
	}
	return nextNode;
}
function check(){
	alert(getNextSibling("#aa").id)
}
 

通过className来获取html元素是很方便的,所以基本上任何js库都会有getElementsByClassName()函数。

但是原生的js并不支持getElementsByClassName(),那当我们不使用任何js库的时候怎么办呢?唯有自己写一个getElementsByClassName()函数出来。注意:自定义的getElementsByClassName()函数不能用document

function getElementsByClassName(str,root,tag){//自定义封装getElementsByClassName()函数
	if(root){
		root = typeof root == "string" ? document.getElementById(root) : root;
	}else{
		root = document.body;
	}
	var tag = tag || "*";
	var ele = root.getElementsByTagName(tag) , arr=new Array();
	for(var i = 0 , k = ele.length ; i < k ; i++ ){
		for(var j = 0 , l = ele[i].className.split(" ") ; j < l.length ; j++){
			if(str == l[j]){
				arr.push(ele[i]);
				break;
			}
		}
	}
	return arr;
}
© 2012 Hedgehog Suffusion theme by Sayontan Sinha