Javascript 如何将事件侦听器分配给一个div，使其在单击时的宽度和高度增加20%

我已经开始写出来了，我使用了和我在上一个问题中使用的相同大小（100px x 100px）。虽然我计划在将来某个时候使用jQuery，但我现在只尝试使用Javascript。我现在看到的主要问题是（

this.style.width

）行中的“this”尚未定义，因此代码不知道“this”指的是div，我不确定如何使用事件侦听器而不是

childNodes

（我知道如何做）

div{背景色：#999999；宽度：100px；高度：100px；}
/**
*由Mark M.G于2015年4月1日创建。
*n221
*/
函数handleClick（事件）{
this.style.width=（parseInt（this.style.width）*1.2）+px'；
this.style.height=（parseInt（this.style.height）*1.2）+px'；
}

尝试在

onClick

事件中使用

this

而不是

事件，并在事件处理程序中使用不同的参数名称，如“
元素
”，以避免混淆。：）然后将事件处理程序中的
this
替换为参数名（“
element
”），以访问事件处理程序中单击的元素。
这是基于代码的纯JS工作解决方案：

HTML:

Javascript:

var div = document.getElementById('myDiv');
div.addEventListener('click', function (event) {
   this.style.width = ( parseInt( this.offsetWidth ) *1.2 ) + 'px';
   this.style.height = ( parseInt( this.offsetHeight ) *1.2 ) + 'px';
});

现在，
this
指的是实际的div，因为我将click事件监听器直接分配给该div。
在您的代码中，
this
引用窗口对象，因为它位于全局函数中

另一种可能的解决方案是使用event.target。
事件对象通常包含事件目标，您可以提取并使用它，而不是“this”。我确实计划在将来使用jquery。我现在只是尽可能多地学习JavaScript。我刚刚编辑了我的答案，试图解释为什么
这个
指的是您提供的代码和我发布的代码中的不同对象。
<div id="myDiv"></div>

div {background-color: #999999;width: 100px;height: 100px;}

var div = document.getElementById('myDiv');
div.addEventListener('click', function (event) {
   this.style.width = ( parseInt( this.offsetWidth ) *1.2 ) + 'px';
   this.style.height = ( parseInt( this.offsetHeight ) *1.2 ) + 'px';
});