Event target value jquery.jpg

Event target value jquery

Event Target Value jquery is a built-in property of jQuery. Used to find out which DOM element will start the event. Event.target parameter It does not accept any parameters. Because it’s not a feature. A function returns a value. Any DOM element even triggered by returning it. The target object of the event object matches the DOM element that fired the event.

The target property is the element on which the event handler is set. Or his descendants. This property may be useful in dedicated events. When the event is in the bubble stage to determine which element fired the event.

Event target value jquery Ex 01

The name may be the name of the element that registered the event. Or the name of a child element. To determine if the event was captured by the handler due to bubbles. This method is useful for comparison with event.target. This property is also effective when submitting an event in the event of a bubble.

<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
 
<script>
$( "body" ).click(function( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>

Event target value jquery Ex 02

A typical example of an event delegation is a click event handler added to a numberless list. Whose li children are hidden using the hide () method. However, when you click on one of them, they are displayed using the toggle function (see Toggle method).

"jQuery"
function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
     $target.children().toggle();
  }
}
$("ul").click(handler).find("ul").hide();
<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>  
</ul>

Event target value jquery Ex 03

When Event target value jquery calls a handler. This keyword is then a reference to the element where the event is being distributed. For linked events this is the element where the events linked. And remember it is a component matching selector for dedicated events. If the events bubbled from the hereditary element. Then it may not be equal to event.target.

In order to create a jQuery object from the material. It can be used with the jQuery method, use $ (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>
function handler( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();

Make notes to create jQuery objects. I use “$” to wrap the dome material which we always do. You will see that in the first case it is, event.currentTarget, event.target all. Mentioned in the same material. In the second case. when the event representative of some wrapping material triggered. Then event.target will be specified in the triggered element. Where this and event.currentTarget is where the event was delivered. There are mentions. For this and event.currentTarget, they are exactly the same thing.

Event target value jquery Ex 03

In this example, we put three elements in a block. (One element, one element, and one element). In the element, jQuery uses the .click () method. We created a live event handler. Which is when the left mouse button is clicked on the element. Then calls a function that prints the value of the current target. And the target properties of the event object on the console. Note that the value of the property will be different The current target will always have the element since it triggered the event. (Event handler shot in this element) and a specific element in the target. There will be a reference inside the element (the element that triggered the event).

<script>
	$( document ).ready(function(){
	  // устанавливаем прямой обработчик события "click" и передаем объект события в качестве параметра функции
	  $( "div" ).click(function( event ) {
	    console.log( "div currentTarget", event.currentTarget); // выводим в консоль значение свойства currentTarget
	    console.log( "div target", event.target); // выводим в консоль значение свойства target
	  })
	});
		</script>
<div>
<span>Span element</span>
<p>Paragraph</p>
<button>Button</button>
</div>

Leave a Reply

Your email address will not be published.