js_事件处理

<ul>
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
			<li>ddd</li>
			<li>eee</li>
</ul>
<input type="button" id="btn" value="test"/>
window.onload=init;
function init(){
	var btn=document.getElementById("btn");
    btn.onclick=clickEvent;
	var lis=document.getElementsByTagName("li");
	for(var i=0;i<lis.length;i++){
		lis[i].onmouseover=changeColor;
		lis[i].onmouseout=reColor;
	}
}
function clickEvent(event){
	    event=event||window.event;
    	alert(this.value+"|"+event.type);
}
function changeColor(){
	this.style.color="#f00";
}
function reColor(){
	this.style.color="#000";
}

注意:(1).window.load可以等加载完所以的页面标签后再执行init方法,可以在init方法里面写绑定事件,这样就不会出现找不到节点的错误了。

(2).有多个li,要通过循环,获取每一个节点,然后再与事件绑定

(3).每次写事件函数,加入一个event,调用会自动传参数进去,我们可以通过event获取事件的信息

猜你喜欢

转载自blog.csdn.net/HZPHYT/article/details/81146237