事件处理函数的this

最新推荐文章于 2022-01-24 21:54:47 发布

yxc_gdut

最新推荐文章于 2022-01-24 21:54:47 发布

阅读量146

点赞数

分类专栏： javascript 文章标签： js event this 事件 scope

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

浏览器有三种添加事件监听的方式。

第一种：直接在标签内写 οnclick=“fn”

第二种：在js中 οnclick=fn

第三种：在js中用el.attachEvent或者el.addEventListener()

三种方式添加的事件处理函数运行的scope是不同的，不同浏览器也不尽相同。

js: el.onclick = fn ,fn的this->el
在div标签中 onclick = "fn()" ,fn的this->window
js: el.attachEvent('onclick',fn); ,fn的this->window

Firefox、Chrome、Opera

js: el.onclick = fn ,fn的this->el
在标签中 onclick = "fn()" ,fn的this->window (相当于执行eval())
js: el.addEventListener('onclick',fn); ,fn的this->el

可以下载附件或者直接复制一下代码来测试。

<!DOCTYPE HTML>
<html>
  <head>
    <title>MyHtml.html</title>
    <meta http-equiv="content-type" content="text/html; charset=GB2312">
  	<style type="text/css">
  		.conclusion{height:200px;}
  		.highlight{color:#fe6c00}
  		.experiment{width:200px;height:100px;color:#3164ac;float:left;margin:20px 0px 0px 30px;border:1px solid #eee}
  	</style>
  	<script type="text/javascript">
  		window.id = 'window';
  		var clickFn = function(){
  			alert("this指向 "+this.id); 
  		}
  		window.onload = function(){
 			document.getElementById("div2").οnclick=clickFn; //alert 弹出 div
  			if(navigator.appName == "Microsoft Internet Explorer"){
  				document.getElementById("div3").attachEvent('onclick',clickFn); //alert 弹出 window
  			}else{
  				document.getElementById("div3").addEventListener('click',clickFn,true);//alert 弹出 div
  			}
  		}
  	</script>
  </head>
  <body>
	  	<h2>给div添加事件触发程序。请点击下面三个div</h2>
	  	<div class="conclusion">
	  		<p><strong>IE</strong></p>
	  		<ul>
	  			<li>js: el.onclick = fn ,fn的this->el </li>
	  			<li>在div标签中 onclick = "fn()" ,fn的this->window </li>
	  			<li>js: el.attachEvent('onclick',fn); ,fn的this-><i class="highlight">window</i></li>
	  		</ul>
	  		<p><strong>Firefox、Chrome、Opera</strong></p>
	  		<ul>
	  			<li>js: el.onclick = fn ,fn的this->el </li>
	  			<li>在标签中 onclick = "fn()" ,fn的this->window (相当于执行eval())</li>
	  			<li>js: el.addEventListener('onclick',fn); ,fn的this-><i class="highlight">el</i></li>
	  		</ul>
	  	</div>
	  	
	  	<div id="div1" class="experiment" οnclick="clickFn();">div1 οnclick="clickFn();"</div>
	  	<div id="div2" class="experiment">div2 js: onclick = fn</div>
	  	<div id="div3" class="experiment">div3 js: attachEvent/addEventListener</div>
  </body>

</html>

请不要吝啬您的意见，谢谢。

yxc_gdut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件处理函数的this

浏览器有三种添加事件监听的方式。第一种：直接在标签内写 onclick=“fn” 第二种：在js中 onclick=fn第三种：在js中用el.attachEvent或者el.addEventListener() 三种方式添加的事件处理函数运行的scope是不同的，不同浏览器也不尽相同。 IEjs: el.onclick = fn ,fn的this...
复制链接

扫一扫