87,901
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<title>ADS.addEvent </title>
<script type="text/javascript">
debugger;
/**
* document.getElementById(); replacement.
*/
function $() {
var elements = new Array();
// Find all the elements supplied as arguments
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
// If the argument is a string assume it's an id
if (typeof element == 'string') {
element = document.getElementById(element);
}
// If only one argument was supplied, return the element immediately
if (arguments.length == 1) {
return element;
}
// Otherwise add it to the array
elements.push(element);
}
// Return the array of multiple requested elements
return elements;
};
/**
* Register an event listener on an element
*/
function addEvent(node, type, listener ) {
// Check compatibility using the earlier method
// to ensure graceful degradation
if(!(node = $(node))) return false;
if (node.addEventListener) {
// W3C method
node.addEventListener( type, listener, false );
return true;
} else if(node.attachEvent) {
// MSIE method
if(node.id=='windowid'){alert('宿主依然是window')}
else{alert('注意:宿主变成了传入的对象')}
var fn='e'+type+listener;//定义一个新对象
node[fn] = listener;//将参数(clickHandler数)赋值给调用的宿主
alert(node[fn])
node[type+listener] = function(){node[fn]( window.event );}
//注意:第一次执行addEvent(this/*这个this是指window*/,'load', function(){...},
//开始侦听onload事件,准备addEvent($('btnTest'),'click',clickHandler);
node.attachEvent( 'on'+type, node[type+listener] );
return true;
}
// Didn't have either so return false
return false;
};
function clickHandler(){
alert("this.name: "+this.name + "\nthis.type: "+this.type + '\nthis.id: ' + this.id + '\nthis.value: ' + this.value);
}
//这段js执行顺序:
name='clickHandlerName';//1
type='windowtype';//2
id='windowid';//3
value='windowvalue';//4
addEvent(this/*这个this是指window*/,'load', function(){//5
addEvent($('btnTest'),'click',clickHandler);//7!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
//用自定义方法向节点$('btnTest')添加事件
//对象:$('btnTest')按钮1
//事件:click
//通过两次addEvent()将调用对象从window转变为$('btnTest')!
}
);
addEvent(window,'load',function(){//6
$('btnTest1').attachEvent('onclick',clickHandler);
//用IE默认的attachEvent方法添加事件
});
</script>
</head>
<body>
<input name="btnTest" id="btnTest" type="button" value="按钮1" />
<br/>
<input name="btnTest1" id="btnTest1" type="button" value="按钮2" />
</body>
</html>
<html>
<head>
<style>
#p{position:absolute;border:1px solid;width:500px;height:400px;background:blue;}
#c1{position:absolute;border:1px solid;width:100px;height:200px;top:50px;left:10px;background:yellow; float:left}
#c2{position:absolute;border:1px solid;width:100px;height:200px;top:50px;left:150px;background:yellow; float:left}
</style>
</head>
<body>
<div id=p>父节点
<div id=c1>子节点1</div>
<div>
</body>
</html>
<script>
var pNode=document.getElementById("p")
var c1Node=document.getElementById("c1")
var newNode=document.createElement("DIV");
newNode.setAttribute("id","c2")
newNode.setAttribute("innerHTML","子节点2")
pNode.appendChild(newNode)
var c2Node=document.getElementById("c2")
c2Node.innerHTML="子节点2<br><br>点击我"
/*****************THIS*******************/
c2Node.onclick=function(){
alert(this.id)
this.innerHTML ="子节点2<br><br>[this.innerHTML]中的this指的就是我<br><br>现在点击左边的黄色块"
c1Node.onclick=function(){
alert(this.id)
this.innerHTML ="子节点1<br><br>[this.innerHTML]中的this指的就是子节点1,也就是我。因为是对象c1Node(子节点1)调用的onclick";
}
}
</script>