සිදුවීමක් ගිනි තබන මූලද්‍රව්‍යයේ හැඳුනුම්පත ලබා ගැනීමට ක්‍රමයක් තිබේද?

මම මේ වගේ දෙයක් හිතනවා:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

ඇත්ත වශයෙන්ම var testහි හැඳුනුම්පත අඩංගු විය යුතුය "aaa", සිදුවීම පළමු පෝරමයෙන් ඉවත් කරනු "bbb"ලැබුවහොත් සහ දෙවන පෝරමයෙන් සිදුවීම ඉවත් කරන්නේ නම්.

JQuery හි event.targetසැමවිටම සිදුවීම අවුලුවන මූලද්‍රව්‍යය වේ, එහිදී eventපරාමිතිය ශ්‍රිතයට ලබා දෙනු ලැබේ. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

එය ද thisක්‍රියාත්මක වනු ඇති බව සලකන්න , නමුත් එය jQuery වස්තුවක් නොවන බැවින් ඔබ එය මත jQuery ශ්‍රිතයක් භාවිතා කිරීමට අදහස් කරන්නේ නම්, ඔබ එය යොමු කළ යුත්තේ $(this), උදා:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

යොමු කිරීම සඳහා, මෙය උත්සාහ කරන්න! එය වැඩ කරනවා!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

එය වෙනත් තනතුරු වල සඳහන් වුවද, මට මෙය උච්චාරණය කිරීමට අවශ්‍ය විය:

$(event.target).id නිර්වචනය කර නැත

$(event.target)[0].id හැඳුනුම්පත ලබා දෙයි.

event.target.id හැඳුනුම්පත ද ලබා දෙයි.

this.id හැඳුනුම්පත ලබා දෙයි.

සහ

$(this).id නිර්වචනය කර නැත.

ඇත්ත වශයෙන්ම, වෙනස්කම් jQuery වස්තු සහ DOM වස්තු අතර වේ. "id" යනු DOM දේපලකි, එබැවින් එය භාවිතා කිරීම සඳහා ඔබ DOM මූලද්‍රව්‍ය වස්තුව මත සිටිය යුතුය.

(එය මා පොළඹවා ඇත, එබැවින් එය වෙනත් අයෙකු උසිගැන්වීමට ඉඩ ඇත)

සියලුම සිදුවීම් සඳහා, ඔබට භාවිතා කළ හැකි jQuery වලට පමණක් සීමා නොවේ

var target = event.target || event.srcElement;
var id = target.id

එහිදී event.targetඑය මත නැවත යෙදී අසමත් event.srcElementIE සඳහා. ඉහත කේතය පැහැදිලි කිරීම සඳහා jQuery අවශ්‍ය නොවන අතර jQuery සමඟද ක්‍රියා කරයි.

(this)ශ්‍රිතය ඉවත් කළ වස්තුව යොමු කිරීමට ඔබට භාවිතා කළ හැකිය .

'this'යනු DOM එක් එක්, ඔබ තුළ (jQuery සන්දර්භය තුළ) callback කාර්යය විට, උදාහරණයක් ලෙස, ක්ලික් විසින් කැඳවන අංගයක්, බඳින්න, ආදිය ක්රම.

ඔබට වැඩිදුර ඉගෙන ගත හැකි ස්ථානය මෙන්න: http://remysharp.com/2007/04/12/jquerys-this-demystified/

මම දත්ත සමුදායකින් ගතිකව වගුවක් ජනනය කරමි, JSON හි දත්ත ලබාගෙන එය වගුවකට දමමි. සෑම වගු පේළියකටම අද්විතීය IDවූ අතර එය වැඩිදුර ක්‍රියා සඳහා අවශ්‍ය වේ, එබැවින් DOM වෙනස් වුවහොත් ඔබට වෙනස් ප්‍රවේශයක් අවශ්‍ය වේ:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

සිදුවීම් දේපල තුළ අප සතුව ඇති වෙඩි තැබීමේ සිදුවීම

event.currentTarget

සිදුවීම් හසුරුවන්නා ලෙස සකසා ඇති DOM නෝඩ් වස්තුව අපට ලැබේ .

අප සතුව ඇති බුබුලු දැමීමේ ක්‍රියාවලිය ආරම්භ කළ බොහෝ කැදැලි නෝඩ්

event.target

සිදුවීම් වස්තුව සැමවිටම සිදුවීම් හසුරුවන්නාගේ පළමු ගුණාංගය වේ, උදාහරණයක්:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

සිදුවීම් නියෝජිත කණ්ඩායම පිළිබඳ වැඩි විස්තර http://maciejsikora.com/standard-events-vs-event-delegation/

JQuery වස්තුවක් ලෙස ප්‍රභව මූලද්‍රව්‍යය ලබා ගත යුතුය

var $el = $(event.target);

ක්ලික් කිරීමේ ශ්‍රිතය ද පවරා ඇති මූලද්‍රව්‍යයට වඩා මෙය ක්ලික් කිරීමේ ප්‍රභවය ලබා ගනී. ක්ලික් කිරීමේ සිදුවීම මව් වස්තුවක ඇති විට ප්‍රයෝජනවත් විය හැකිය. EG.a වගු පේළියක සිදුවීමක් ක්ලික් කරන්න, ඔබට ක්ලික් කළ කොටුව අවශ්‍ය වේ

$("tr").click(function(event){
    var $td = $(event.target);
});

ඔබට භාවිතා කිරීමට උත්සාහ කළ හැකිය:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});

මෙය බොහෝ වර්ගවල මූලද්‍රව්‍ය සමඟ ක්‍රියා කරයි:

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });

පවරා ඇති සිදුවීම් හසුරුවන්නන් සම්බන්ධයෙන්, ඔබට මෙවැනි දෙයක් තිබිය හැකි තැන:

<ul>
    <li data-id="1">
        <span>Item 1</span>
    </li>
    <li data-id="2">
        <span>Item 2</span>
    </li>
    <li data-id="3">
        <span>Item 3</span>
    </li>
    <li data-id="4">
        <span>Item 4</span>
    </li>
    <li data-id="5">
        <span>Item 5</span>
    </li>
</ul>

ඔබේ JS කේතය එසේ ය:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

undefinedLI හි අන්තර්ගතය a වලින් ඔතා ඇති බැවින් <span>, අයිතමය අයිඩී බව ඔබ බොහෝ දුරට සොයා ගනු ඇත , එයින් අදහස් වන්නේ <span>බොහෝ විට සිදුවීම් ඉලක්කය වනු ඇති බවයි. ඔබට කුඩා චෙක්පතක් සමඟ මෙය වටා යා හැකිය, වැනි:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

නැතහොත්, ඔබ කියවීමේ හැකියාව උපරිම කිරීමට කැමති නම් (තවද jQuery එතීමේ ඇමතුම් අනවශ්‍ය ලෙස පුනරාවර්තනය කිරීමෙන් වළකින්න):

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

සිදුවීම් නියෝජිත කණ්ඩායම භාවිතා කරන විට, .is()ඔබේ සිදුවීම් ඉලක්කය (වෙනත් දේ අතර) ඇත්ත වශයෙන්ම ඔබට අවශ්‍ය වන්නේ එයද යන්න තහවුරු කර ගැනීම සඳහා මෙම ක්‍රමය මිල කළ නොහැකිය. .closest(selector)DOM ගස සෙවීමට භාවිතා කරන්න , සහ එය සෙවීමට .find(selector)(සාමාන්‍යයෙන් .first()මෙන් .find(selector).first()) භාවිතා කරන්න. භාවිතා කරන .first()විට ඔබ භාවිතා කිරීමට අවශ්‍ය නැත .closest(), මන්ද එය පළමු ගැලපෙන මුතුන් මිත්තන්ගේ මූලද්‍රව්‍යය පමණක් ලබා දෙන අතර .find()ගැලපෙන සියලු පරම්පරාවන් ආපසු ලබා දෙයි.

භාවිතා කළ හැකිය .on සිදුවීම

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

මෙය z-indexඉහත පිළිතුරු වල සඳහන් සිදුවීම් පරාමිතියට වඩා ඉහළින් ක්‍රියා කරයි :

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

මේ ආකාරයෙන් ඔබට සෑම විටම id(මෙම උදාහරණයේ li) මූලද්‍රව්‍යය ලැබෙනු ඇත . එසේම දෙමව්පියන්ගේ ළමා අංගයක් මත ක්ලික් කළ විට ..

var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

කම්කරු JSFiddle මෙතන .

thisයොමුව භාවිතා කරන්න

$(this).attr("id")

හෝ

$(this).prop("id")

this.element.attr("id") IE8 හි හොඳින් ක්‍රියා කරයි.

$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})

මේ දෙකම වැඩ,

jQuery(this).attr("id");

සහ

alert(this.id);

වෙනස් කළ අයිතමය සඳහා හැඳුනුම්පත සහ වටිනාකම ලබා ගැනීම සඳහා ඔබට ශ්‍රිතය භාවිතා කළ හැකිය (මගේ උදාහරණයේ දී, මම තෝරාගත් ටැගයක් භාවිතා කර ඇත.

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

මම වැඩ කරනවා

jQuery ස්වයං සම්පුර්ණ කිරීම

eventඉහත විස්තර කර ඇති පරිදි මම සෙවීමට උත්සාහ කළෙමි , නමුත් ඉල්ලීම් ශ්‍රිතය ක්‍රියාත්මක වන විට එය ලබා ගත නොහැකි බව පෙනේ. මම this.element.attr("id")ඒ වෙනුවට මූලද්‍රව්‍ය හැඳුනුම්පත ලබා ගැනීමට පුරුදුව සිටි අතර එය හොඳින් ක්‍රියාත්මක වන බව පෙනේ.

කෝණික 7.x හි ඔබට ස්වදේශීය මූලද්‍රව්‍යය සහ එහි හැඳුනුම්පත හෝ ගුණාංග ලබා ගත හැකිය.

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

html:

<div class="list-item" (click)="myClickHandler($event)">...</div>

පිරිසිදු JS සරලයි

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}

<form class="item" id="aaa">
  <input class="title"/>
</form>
<form class="item" id="bbb">
  <input class="title"/>
</form>