javascript - 概念 - `this` 在 addEventListener 回调中指的是什么？

Question

此功能不起作用..无法弄清楚为什么...没有错误...但是当我单击它时图像不会缩小。

image_element.addEventListener( "click", function( )
{ 
    this.style.width = ( parseInt( this.style.width ) - 1 ) + 'px';
    this.style.height = ( parseInt( this.style.height ) - 1 ) + 'px';
}, false );

Answer 1

this，在 eventListener 的上下文中，是[引发事件的]元素。您可能遇到的一个问题是this.style.width可能尚未指定...

记录/提醒价值this.style.width并首先查看其中的内容。

Answer 2

image_element.addEventListener( "click", function( )
{ 
    var iWidth  = parseInt(this.style.width.substr(0, this.style.width.length-2), 10);
    var iHeight = parseInt(this.style.height.substr(0, this.style.height.length-2), 10);

    this.style.width  = (parseInt(iWidth  - 1, 10)) + 'px';
    this.style.height = (parseInt(iHeight - 1, 10)) + 'px';
}, false );

Answer 3

关键字this是指谁触发了事件，在这种情况下是DOM Element

但是您的问题是因为样式是undefined在您没有初始化它的时候。所以你应该使用“ComputedStyle”来获取当前值，即使你没有初始化它。

image_element.addEventListener( "click", function( )
{ 
    this.style.width = ( getStyle(this,'width',true) - 1 ) + 'px';
    this.style.height = ( getStyle(this,'height',true) - 1  ) + 'px';
}, false );

将此功能附加到您的文档：

/** Get the current computed style of an element */
function getStyle(element, strCssRule, returnInt){
    if(typeof element==="string"){element=document.getElementById(element);}
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(element, "").getPropertyValue(strCssRule);
    }
    else if(element.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ return p1.toUpperCase(); });
        strValue = element.currentStyle[strCssRule];
    }
    if(returnInt===true){ strValue=parseInt(strValue); }
    return strValue;
}

Answer 4

使用 jQuery：

function initOrbs()
{
    var image_element = document.createElement( 'img' );
        $(image_element).addClass("orb");
        image_element.id = icon_array[ initOrbs.index ];
        image_element.speed = icon_array[ initOrbs.index + 1 ];
        if(image_element.speed  > 10000 )
        {
            image_element.speed  = image_element.speed / 10;
            $(image_element).width(20);
            $(image_element).height(20);
        }
        image_element.src = '/develop/foo/favicons/' + icon_array[ initOrbs.index ];  
        image_element.style.top = '-80px';
        image_element.style.left = random( 100, 800) + 'px';
        sky.appendChild( image_element );
        $(image_element).click( function()
        { 
            $(this).width( parseInt( $(this).width() ) - 1 );
            $(this).height( parseInt( $(this).height() ) - 1 );
        });
        moveLinear( image_element );
        initOrbs.index += 2;
}