Разница между $(this) и событием.цель?

this - Это ссылка на элемент DOM, для которого обрабатывается событие (текущая цель). event.target относится к элементу, который инициировал событие. Они были одинаковыми в этом случае, и часто могут быть, но они не всегда таковы.

вы можете получить хорошее представление об этом, просмотрев jQuery event docs, но вкратце:

событие.currentTarget

текущий элемент DOM в рамках мероприятия пузырится фаза.

событие.delegateTarget

элемент, где в настоящее время называется jQuery обработчик событий прилагается.

событие.relatedTarget

другой элемент DOM, участвующий в событии, если таковые имеются.

событие.элемент

элемент DOM, который инициировал событие.

чтобы получить желаемый функциональность с помощью jQuery, вы должны обернуть его в объект jQuery, используя либо: $(this) или $(evt.target).

The .attr() метод работает только на объекте jQuery, а не на элементе DOM. $(evt.target).attr('href') или просто evt.target.href даст вам то, чего вы хотите.

существует значительное различие в том, как jQuery обрабатывает эту переменную с помощью метода "on"

$("outer DOM element").on('click',"inner DOM element",function(){
  $(this) // refers to the "inner DOM element"
})

Если сравнить это с: -

$("outer DOM element").click(function(){
  $(this) // refers to the "outer DOM element"
})

http://api.jquery.com/on/ состояния:

когда jQuery вызывает обработчик, то this ключевое слово является ссылкой на элемент куда доставляется событие; для непосредственно связанных событий this является элементом, к которому было присоединено событие и для делегирования события this - селектор соответствия элементов. (Обратите внимание, что this не может будьте равны event.target если событие произошло от потомка элемент.)

чтобы создать объект jQuery из элемента, чтобы он мог быть используется с методами jQuery, используйте $ (this).

если у нас есть

<input type="button" class="btn" value ="btn1">
<input type="button" class="btn" value ="btn2">
<input type="button" class="btn" value ="btn3">

<div id="outer">
    <input type="button"  value ="OuterB" id ="OuterB">
    <div id="inner">
        <input type="button" class="btn" value ="InnerB" id ="InnerB">
    </div>
</div>

Проверьте вывод ниже:

<script>
    $(function(){
        $(".btn").on("click",function(event){
            console.log($(this));
            console.log($(event.currentTarget));
            console.log($(event.target));
        });


        $("#outer").on("click",function(event){
            console.log($(this));
            console.log($(event.currentTarget));
            console.log($(event.target));
        })
    })
</script>

обратите внимание, что я использую $ чтобы обернуть элемент dom для создания объекта jQuery, что мы всегда делаем.

вы бы нашли, что для первого случая, this,event.currentTarget,event.target все ссылки на то же самое элемент.

в то время как во втором случае, когда делегат события в некоторых обернутый элемент срабатывает, event.target будет ссылаться на элемент срабатывает, в то время как this и event.currentTarget ссылаются на место доставки события.

на this и event.currentTarget, они точно то же самое в соответствии сhttp://api.jquery.com/event.currenttarget/

здесь есть проблемы с кросс-браузером.

типичный обработчик событий не-jQuery будет выглядеть примерно так:

function doSomething(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

библиотека jQuery нормализует evt и делает цель доступной как this в обработчиках событий, поэтому типичный обработчик событий jQuery будет выглядеть примерно так:

function doSomething(evt) {
    var $target = $(this);
    //do stuff here
}

гибридный обработчик событий, который использует нормализованный jQuery evt и цель POJS будет что-то вроде этого :

function doSomething(evt) {
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

в функции обработчика событий или методе объекта одним из способов доступа к свойствам "содержащего элемента" является использование специального ключевого слова this. Ключевое слово this представляет владельца функции или метода, обрабатываемого в данный момент. Итак:

• для глобальной функции это представляет окно.

• для метода объекта это представляет экземпляр объекта.

• и в обработчике событий, это представляет элемент, который получил событие.

например:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown() {
            alert(this);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown();alert(this);">Hi</p>
    </body>
</html>

содержание окон оповещения после рендеринга этого html соответственно являются:

object Window
object HTMLParagraphElement

объект события связан со всеми событиями. Он имеет свойства, которые содержат информацию "о событии", такие как расположение мыши на веб-странице.

например:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown(event) {
            var theEvent = event ? event : window.event;
            var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
            alert(event);
                    alert(locString);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown(event);">Hi</p>
    </body>
</html>

содержимое окон предупреждений после рендеринга этого html соответственно являются:

object MouseEvent
X = 982 Y = 329