HTML 控件绑定事件

文章摘自  http://www.jb51.net/article/26552.htm

 

1. 第一种添加事件的方式，直接在html的属性中写JS代码 

 

      <div onclick="alert(4);">Div1 Element</div> 
<div onclick="alert(arguments.callee);">Div1 Element</div> 

    

 

 

2. 第二种添加事件的方式，定义一个函数，赋值给html元素的onXXX属性 

      <script type="text/javascript"> 
	function clk(){} 
</script> 
<div onclick="clk()">Div2 Element</div> 

<script type="text/javascript"> 
	function clk(e){alert(e);} 
</script> 
<div onclick="clk(arguments[0])">Div2 Element</div> 

    

 

点击Div，在Firefox中正确弹出了事件对象，支持参数传入的浏览器都可以，如Opera/Safari/Chrome。 

把以上代码中的 arguments[0]改成event，那么所有浏览器都支持 。 

把以上代码中的arguments[0]改成window.event，那么将只有Firefox不支持。 

把以上代码中的arguments[0]改成evt，那么将只有Chrome支持。 

 

 

3. 第三种添加事件方式，使用element.onXXX方式 

      <div id="d3">Div3 Element</div> 
<script type="text/javascript"> 
	var d3 = document.getElementById('d3'); 
	d3.onclick = function(){ } 
</script> 
    

 

4. 第四种添加事件方式，使用addEventListener或IE专有的attachEvent 

      <div id="d4">Div4 Element</div>
<script type="text/javascript">
	var d4 = document.getElementById('d4');
	function clk(){
		alert(4)
	}
	//判断是否是非IE浏览器
	if(d4.addEventListener){
		d4.addEventListener('click',clk,false);
	}
	//判断是否是IE浏览器
	if(d4.attachEvent){
		d4.attachEvent('onclick',clk);
	}
</script>