我如何将事件侦听器分配给 div 以允许 div 的宽度和高度在单击时增长 20%

Question

我已经开始写出来了，我使用了与我在上一个问题中使用的相同大小（100px x 100px）。尽管我计划在将来的某个时间使用 jQuery，但我现在尝试只使用 Javascript。我现在看到的主要问题是在线 (this.style.width) 'this' 尚未定义，因此代码不知道 'this' 指的是 div 而我是不确定如何使用事件侦听器而不是 childNodes（我知道该怎么做）来完成此操作。

 <!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8">
 <style>
    div {background-color: #999999;width: 100px;height: 100px;}
</style>
<title></title>
</head>
<body>
<div id="myDiv" onClick="handleClick(event)"></div>
<script src="js/main.js"></script>

</body>
</html>

/**
* Created by Mark M.G on 4/1/2015.
* n221
*/


function handleClick(event){

this.style.width = ( parseInt( this.style.width ) *1.2 ) + 'px';
this.style.height = ( parseInt( this.style.height ) *1.2 ) + 'px';
}

Answer 1

尝试在 onClick 事件中使用 this 而不是 event，并在事件处理程序中使用不同的参数名称，例如“element”以避免混淆. :) 然后将事件处理程序中的this替换为参数名称（'element'）以访问事件处理程序中单击的元素。

Answer 2

这是基于您的代码的纯 JS 工作解决方案：http://jsfiddle.net/oco94wrs/1/

HTML:

<div id="myDiv"></div>

CSS:

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

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，因为我将点击事件侦听器直接分配给了 div。在您的代码中，this 指的是 window 对象，因为它在全局函数中。

另一个可能的解决方案是使用 event.target.

我如何将事件侦听器分配给 div 以允许 div 的宽度和高度在单击时增长 20%

How would I assign an event-listener to a div that allows the width and height of the div to grow 20% when clicked

javascript

events

onclick

event-listener

dom-events