This (এটি) এবং ইভেন্ট.তারের মধ্যে পার্থক্য?

157

আমি jQuery এ নতুন, এবং জাভাস্ক্রিপ্ট এবং jQuery এর টিউটোরিয়াল অনুসরণ করে ট্যাবড প্যানেলগুলি তৈরি করছিলাম : মিসিং ম্যানুয়াল , লেখক এটি করার পরে সেই প্রথম লাইনটি রয়েছে:

   var target = $(this);

তবে আমি এটি সেভাবে করার চেষ্টা করেছি

   var target = evt.target;

এবং আমি যে ত্রুটি পেয়েছি:

Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr'

এবং যখন আমি evt.targetফিরে $(this)এসেছি, এটি একটি কবজির মতো কাজ করেছিল।

আমি জানতে চাই পার্থক্য কি আপনি চান $(this)এবং evt.target?

আপনার কোড প্রয়োজন হলে আমার কোডটি এখানে:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Tabbed Panel</title>
        <style>
            body {
               width : 100%;
               height: 100%;
            }

            #wrapper {
                margin : auto;
                width : 800px;                
            }

            #tabsContainer {
                overflow: hidden;
            }

            #tabs {                
                padding:0;
                margin:0;
            }                

            #tabs li {
                float : left;
                list-style:none;
            }

            #tabs a {
                text-decoration:none;
                padding : 3px 5px;                
                display : block;                
            }

            #tabs a.active {
                background-color : grey;                
            }            
            #panelsContainer {
                clear: left;
            }            
            #panel1 {
                color : blue;
            }            
            #panel2 {
                color : yellow;
            }
            #panel3 {
                color: green;
            }
            #panel4 {
                color : black;
            }         

        </style>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>        
    </head>

    <body>
        <div id="wrapper">
            <div id="tabsContainer">
                <ul id="tabs">
                    <li><a href="#panel1">Panel1</a></li>
                    <li><a href="#panel2">Panel2</a></li>
                    <li><a href="#panel3">Panel3</a></li>
                    <li><a href="#panel4">Panel4</a></li>
                </ul>
            </div>
            <div id="panelsContainer">
                <div id="panel1" class="panel">
                    this is panel1
                </div>
                <div id="panel2" class="panel">
                    this is panel2
                </div>
                <div id="panel3" class="panel">
                    this is panel3
                </div>
                <div id="panel4" class="panel">
                    this is panel4
                </div>                
            </div>
        </div>

    </body>

</html>

স্ক্রিপ্ট.জেএস:

$(function(){
    $("#tabs a").click(function(evt){
       var target = evt.target,
           targetPanel = target.attr("href");
       $(".panel").hide();
       $("#tabs a.active").removeClass("active");
       target.addClass("active").blur();
       $(targetPanel).fadeIn(300);
       evt.preventDefault();
    });

    $("#tabs a:first").click();
})

javascript-events this jquery

— রাফায়েল আদেল
সূত্র

7

thisজাভাস্ক্রিপ্ট DOM উপাদান একটি রেফারেন্স। $()ডওম উপাদানটিকে jQuery অবজেক্টে রূপান্তর করতে jQuery দ্বারা সরবরাহ করা ফর্ম্যাট। evt.targetআপনি কোনও উপাদানকে রেফারেন্স দিয়ে ব্যবহার করছেন, অন্যদিকে $(this)আপনি যে পরামিতিগুলিতে আমাদের অ্যাক্সেস পেয়েছেন তা দিয়ে কোনও বিষয় উল্লেখ করছেন।

— ওহগোদভি

2

আপনি করতে পারেন $(evt.target)এবং (এই ক্ষেত্রে) একই ফলাফলের সাথে শেষ পর্যন্ত। .attr()পদ্ধতি jQuery এর বস্তু, না উপাদান নিজেই দ্বারা প্রদান করা হয়

— BLSully

294

সেখানে হয় মধ্যে একটি পার্থক্য $(this)এবং event.target, এবং বেশ উল্লেখযোগ্য করুন। যদিও this(বা event.currentTarget, নীচে দেখুন) সর্বদা শ্রোতার সাথে সংযুক্ত DOM উপাদানকে বোঝায়, event.targetএটিই আসল DOM উপাদানটি ক্লিক করা হয়েছিল। মনে রাখবেন ইভেন্ট বুদবুদ করার কারণে, যদি আপনার থাকে

<div class="outer">
  <div class="inner"></div>
</div>

এবং ক্লিক শ্রোতার বাইরের ডিভের সাথে সংযুক্ত করুন

$('.outer').click( handler );

তারপরে handlerআপনি যখন বাইরের ডিভের পাশাপাশি অভ্যন্তরীণ একটিতে ক্লিক করবেন তখনই অনুরোধ করা হবে (যদি না আপনার কাছে এমন অন্যান্য কোড থাকে যা অভ্যন্তরীণ ডিভের সাথে ইভেন্টটি পরিচালনা করে এবং প্রচার বন্ধ করে)।

এই উদাহরণস্বরূপ, আপনি যখন অভ্যন্তরীণ ডিভের ভিতরে ক্লিক করেন, তারপরে handler:

this.outerডিওএম উপাদানকে বোঝায় (কারণ এটি হ্যান্ডলারটি সংযুক্ত ছিল the
event.currentTargetএছাড়াও .outerউপাদান বোঝায় (কারণ এটি বর্তমান লক্ষ্য হ'ল উপাদানটি ইভেন্টটি পরিচালনা করছে)
event.target.innerউপাদানটিকে নির্দেশ করে (এটি আপনাকে এমন উপাদান দেয় যেখানে ইভেন্টটি উদ্ভূত হয়েছিল)

JQuery মোড়ক $(this)শুধুমাত্র একটি jQuery অবজেক্টে DOM উপাদান মোড়ক যাতে আপনি এটিতে jQuery ফাংশন কল করতে পারেন। আপনি একই সঙ্গে করতে পারেন $(event.target)।

এছাড়াও মনে রাখবেন যে আপনি যদি প্রসঙ্গটি পুনরায় প্রত্যাবর্তন করেন this(যেমন আপনি যদি ব্যাকবোন ব্যবহার করেন তবে এটি স্বয়ংক্রিয়ভাবে হয়ে যায়), এটি অন্য কোনও কিছুতে নির্দেশ করবে। আপনি সর্বদা থেকে আসল DOM উপাদানটি পেতে পারেন event.currentTarget।

— পেট্রা বেলা
সূত্র

এই উদাহরণের সাহায্যে আপনি যদি অভ্যন্তরীণ উপাদানটি ক্লিক করেন এবং ইভেন্ট ক্রন্টের টার্গেট ব্যবহার করেন তবে আপনি কি অভ্যন্তরীণ উপাদানটি পেয়েছেন বা বাইরের কোনওটি পান?

— মার্লিনপ্যাট

3

currentTargetহ্যান্ডলারের সাথে সর্বদা এক, যেমন। বাইরের এক

— পেত্র বেলা

"এরকম ক্ষেত্রে" দ্বারা আপনার বোঝানো হয়েছে '। অভ্যন্তরীণ', না '.outer' ক্লিক করা হয়েছিল, এবং ইভেন্ট.আরটারেজটি কি তখন অভ্যন্তরীণ উপাদানকে বোঝায়? আপনার উদাহরণটিতে প্রকৃতপক্ষে কী ক্লিক করা হয়েছে তা বর্ণিত হয়নি, তবে আমি সম্পাদনার আগে নিশ্চিত করতে চেয়েছিলাম। :)

— নীল সেনস

@ নীলসেন্স হ্যাঁ, এর অর্থ যখন আপনি 'অভ্যন্তরীণ' ক্লিক করেন। আমি এটা পরিষ্কার করব।

— পেট্রা বেলা

39

thisDOM উপাদানটির জন্য একটি রেফারেন্স, যার জন্য ইভেন্টটি পরিচালনা করা হচ্ছে (বর্তমান লক্ষ্য)। event.targetইভেন্টটি সূচনা করে এমন উপাদানকে বোঝায়। এই ক্ষেত্রে তারা একই ছিল, এবং প্রায়শই হতে পারে তবে তারা অগত্যা সর্বদা তা হয় না।

আপনি jQuery ইভেন্ট ডক্স পর্যালোচনা করে এর একটি ভাল ধারণা পেতে পারেন , তবে সংক্ষেপে:

event.currentTarget

ইভেন্ট বুদবুদ পর্বের মধ্যে বর্তমান ডিওএম উপাদান।

event.delegateTarget

বর্তমানে যে উপাদানটি jQuery ইভেন্ট হ্যান্ডলার নামে পরিচিত তা সংযুক্ত ছিল।

event.relatedTarget

ইভেন্টে জড়িত অন্যান্য ডিওএম উপাদান, যদি থাকে।

event.target

DOM উপাদান যা ইভেন্টটি শুরু করেছিল।

JQuery ব্যবহার করে কাঙ্ক্ষিত কার্যকারিতাটি পেতে, আপনাকে অবশ্যই এটি: $(this)অথবা ব্যবহার করে একটি jQuery অবজেক্টে আবৃত করতে হবে $(evt.target)।

.attr()পদ্ধতিটি কোনও ডম উপাদান হিসাবে নয়, কেবল একটি jQuery অবজেক্টে কাজ করে। $(evt.target).attr('href')অথবা কেবল evt.target.hrefআপনি যা চান তা আপনাকে দেবে।

— nbrooks
সূত্র

এগুলি উভয়ই একই উপাদানটির উল্লেখ নয় ferences পেটরের উত্তর দেখুন।

— kralyk

1

যথেষ্ট সত্য, এটি নির্দেশ করার জন্য ধন্যবাদ। আমার পুরানো উত্তরগুলি পুনরায় পড়া এটি সবসময়ই আকর্ষণীয় ...

— nbrooks

8

JQuery কীভাবে "অন" পদ্ধতিতে এই পরিবর্তনশীলটিকে পরিচালনা করে তার মধ্যে একটি উল্লেখযোগ্য ভিন্নতা রয়েছে

$("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"
})

— natureshop
সূত্র

4

http://api.jquery.com/on/ এ বলেছে:

যখন jQuery কোনও হ্যান্ডলারকে কল করে, thisকীওয়ার্ডটি সেই উপাদানটির একটি রেফারেন্স যেখানে ইভেন্টটি বিতরণ করা হচ্ছে ; সরাসরি আবদ্ধ ইভেন্টগুলির thisজন্য ইভেন্টটি সংযুক্ত ছিল এমন উপাদান এবং প্রতিনিধিদের ইভেন্টগুলির thisজন্য একটি উপাদান বাছাইকারী নির্বাচক। (দ্রষ্টব্য যে ঘটনাটি যদি কোনও বংশজাত উপাদান থেকে বুদ্বুদ thisহয় event.targetতবে তার সমান নাও হতে পারে ))

উপাদান থেকে একটি jQuery অবজেক্ট তৈরি করতে যাতে এটি jQuery পদ্ধতিগুলির সাথে ব্যবহার করা যায়, $ (এটি) ব্যবহার করুন।

যদি আমাদের থাকে

<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>

নোট করুন যে আমি $jQuery অবজেক্ট তৈরি করতে ডোম উপাদানটি মোড়ানোর জন্য ব্যবহার করি যা আমরা সর্বদা এইভাবে করি।

আপনি খুঁজে পেতে হবে যে প্রথম মামলা, this, event.currentTarget, event.targetসব একই উপাদানে রেফারেন্সড হয়।

দ্বিতীয় ক্ষেত্রে, যখন কিছু মোড়কের উপাদান ইভেন্টের প্রতিনিধি ট্রিগার করা হয়, event.targetতখন ট্রিগার উপাদান হিসাবে উল্লেখ করা হবে, যখনthisevent.currentTarget সাথে উল্লেখ করা হবে এবং ইভেন্টটি বিতরণ করা হয় সেখানে রেফারেন্স দেওয়া হবে।

জন্য thisএবং event.currentTargetতারা ঠিক হয় অনুযায়ী একই জিনিস http://api.jquery.com/event.currenttarget/

— Jaskey
সূত্র

3

এখানে ক্রস ব্রাউজার সংক্রান্ত সমস্যা রয়েছে।

একটি সাধারণ নন-জিক্যুয়ারি ইভেন্ট হ্যান্ডলারটি এরকম কিছু হবে:

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
}

ইভেন্টের হ্যান্ডলারের evtমতো জিকুয়েরিটি স্বাভাবিক করে তোলে এবং লক্ষ্যটিকে উপলভ্য করে তোলে this, তাই একটি সাধারণ জিকুয়েরি ইভেন্ট হ্যান্ডলারটি এরকম কিছু হবে:

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
}

— বীটরুট-বীটরুট
সূত্র

0

কোনও ইভেন্ট হ্যান্ডলার ফাংশন বা অবজেক্ট পদ্ধতির মধ্যে "ধারণকারী উপাদান" এর বৈশিষ্ট্যগুলিতে অ্যাক্সেসের একটি উপায় হল এই কীওয়ার্ডটি বিশেষভাবে ব্যবহার করা। এই কীওয়ার্ডটি বর্তমানে প্রক্রিয়াজাত ফাংশন বা পদ্ধতির মালিককে উপস্থাপন করে। তাই:

একটি বৈশ্বিক ফাংশনের জন্য, এটি উইন্ডোটি উপস্থাপন করে।
কোনও অবজেক্ট পদ্ধতির জন্য এটি অবজেক্টের উদাহরণটি উপস্থাপন করে।
এবং একটি ইভেন্ট হ্যান্ডলারটিতে, এটি ইভেন্টটি প্রাপ্ত উপাদানটির প্রতিনিধিত্ব করে।

উদাহরণ স্বরূপ:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown() {
            alert(this);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown();alert(this);">Hi</p>
    </body>
</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>

যথাক্রমে এই এইচটিএমএল সরবরাহ করার পরে সতর্কতা উইন্ডোগুলির সামগ্রী:

object MouseEvent
X = 982 Y = 329

— MMKarami
সূত্র