ইভেন্ট.টারাগেটের সাথে আমি কী বৈশিষ্ট্যগুলি ব্যবহার করতে পারি?


90

আমার যে উপাদানগুলি থেকে ঘটনাগুলি চালিত হয়েছে সেগুলি সনাক্ত করতে হবে।

ব্যবহার event.target সাথে সম্পর্কিত উপাদান পাওয়া যায়।

সেখান থেকে আমি কোন সম্পত্তি ব্যবহার করতে পারি?

  • href
  • আইডি
  • নোড নেম

আমি এটিতে এমনকি পুরো jQuery পৃষ্ঠাগুলিতে পুরোপুরি তথ্য খুঁজে পাচ্ছি না , সুতরাং কেউ আশা করছেন যে উপরের তালিকাটি সম্পূর্ণ করতে পারে।

সম্পাদনা:

এগুলি সহায়ক হতে পারে: সেল্হ এইচটিএমএল নোড বৈশিষ্ট্য এবং স্বা এইচটিএমএল এইচটিএমএল বৈশিষ্ট্য

উত্তর:


41

event.targetDOM উপাদানটি প্রদান করে, যাতে আপনি কোনও সম্পত্তি / বৈশিষ্ট্য পুনরুদ্ধার করতে পারেন যার একটি মান রয়েছে; তাই হয়, আরো নির্দিষ্টভাবে আপনার প্রশ্নের উত্তর দিতে, আপনি সবসময় পুনরুদ্ধার করতে সক্ষম হবে nodeName, এবং আপনি উদ্ধার করতে পারেন hrefএবং idপ্রদান করা উপাদান রয়েছে একটি hrefএবং idসংজ্ঞায়িত; অন্যথায় undefinedফিরে আসবে।

যাইহোক, কোনও ইভেন্ট হ্যান্ডলারের অভ্যন্তরে, আপনি ব্যবহার করতে পারেন this, এটি ডিওএম উপাদানগুলিতেও সেট করা আছে; আরো সহজ.

$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});

আহ। ধন্যবাদ! আমি লিঙ্কগুলিতে রাখছি, যা উপলব্ধ বৈশিষ্ট্যগুলি দেখায়।
ঘন ঘন

4
"এই" "foo" বা "ইভেন্ট.আরটিজেট" উল্লেখ করবে? আমি যদি নথিতে স্ক্রোলস্টার্ট শুনছি এবং স্ক্রোলস্টার্টটি এইচ 1 উপাদানটিতে ট্রিগার করা হয়েছে, আমি কীভাবে এইচ 1 কে ধরব?
ঘন ঘন

@frequent - শো নিচে রিচার্ডস উত্তরটি আপনাকে event.target.tagName দিকে তাকিয়ে এইচ 1 খুঁজে পাইনি যে
ফ্রেজার Kirkman

140

আপনি যদি event.targetফায়ারব্যাগ বা ক্রোমের বিকাশকারী সরঞ্জামগুলির সাহায্যে পরিদর্শন করতে থাকেন তবে আপনি কোনও স্প্যান উপাদান দেখতে পাবেন (যেমন নীচের বৈশিষ্ট্যগুলি) এতে কোনও উপাদানের যা আছে তার বৈশিষ্ট্য থাকবে। এটি নির্ভর করে লক্ষ্য উপাদানটি কী:

event.target: HTMLSpanElement

attributes: NamedNodeMap
baseURI: "file:///C:/Test.html"
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList
className: ""
clientHeight: 36
clientLeft: 1
clientTop: 1
clientWidth: 1443
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: Text
firstElementChild: null
hidden: false
id: ""
innerHTML: "click"
innerText: "click"
isContentEditable: false
lang: ""
lastChild: Text
lastElementChild: null
localName: "span"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "SPAN"
nodeType: 1
nodeValue: null
offsetHeight: 38
offsetLeft: 26
offsetParent: HTMLBodyElement
offsetTop: 62
offsetWidth: 1445
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
outerHTML: "<span>click</span>"
outerText: "click"
ownerDocument: HTMLDocument
parentElement: HTMLElement
parentNode: HTMLElement
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 36
scrollLeft: 0
scrollTop: 0
scrollWidth: 1443
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "SPAN"
textContent: "click"
title: ""
webkitdropzone: ""
__proto__: HTMLSpanElement

21
যতদূর আমি সচেতন ক্রোম কনসোল.লগ ব্যবহার করার সময় ডোম উপাদানগুলি আর প্রিন্ট করে না। পরিবর্তে আপনাকে কনসোল.ডির ব্যবহার করতে হবে।
অ্যাস্ট্রিড্যাক্স

হ্যাঁ, খুব খারাপ কিছু না!

18
window.onclick = e => {
    console.dir(e.target);  // use this in chrome
    console.log(e.target);  // use this in firefox - click on tag name to view 
}  

এখানে চিত্র বর্ণনা লিখুন

ফিল্টার প্রপেস ব্যবহার করার সুযোগ নিন


e.target.tagName
e.target.className
e.target.style.height  // its not the value applied from the css style sheet, to get that values use `getComputedStyle()`

4
<সাবট্রিবিউট> নাম ... পৃথিবীতে কেন আপনি ছাড়া অন্য কেউ এই সাধারণ উত্তরটি বলেন না?
কর্থিকেয়ন

7

event.targetফাংশন দ্বারা লক্ষ্যযুক্ত নোড প্রদান করে। এর অর্থ আপনি যে কোনও নোডের কাছ থেকে পেতে চাইলে কিছু করতে চানdocument.getElementById

আমি jQuery দিয়ে চেষ্টা করেছি

var _target = e.target;
console.log(_target.attr('href'));

একটি ত্রুটি ফেরান:

.আর কাজ করে না

কিন্তু _target.attributes.href.valueকাজ ছিল।


10
এর কারণ e.targetএটি কোনও jQuery অবজেক্ট নয় এবং .attr()jQuery এর পদ্ধতি। আপনি যদি চেষ্টা __target.getAttribute('href');করে থাকেন তবে এটি ঠিক কাজ করবে।
কানো

2

event.targetফাংশন দ্বারা লক্ষ্যযুক্ত নোড প্রদান করে। এর অর্থ আপনি যে কোনও নোডের সাথে আপনি যা করতে চান তার সাথে আপনি যা কিছু করতে পারেনdocument.getElementById


1

ক্রোমের একটি নির্দিষ্ট ডিওএম নোডের সমস্ত বৈশিষ্ট্যাবলী দেখার একটি সহজ উপায় (আমি ভি 9 on তে আছি) উপাদানটিতে ডান ক্লিক করা, পরিদর্শন নির্বাচন করুন এবং তারপরে "স্টাইল" ট্যাবটি দেখার পরিবর্তে "বৈশিষ্ট্যগুলি" ক্লিক করুন ।

প্রোপার্টি ট্যাবের অভ্যন্তরে আপনি আপনার নির্দিষ্ট উপাদানটির জন্য সমস্ত বৈশিষ্ট্য দেখতে পাবেন।


উল্লেখযোগ্য যে এই প্যানেলটি এখন কনসোল.ডিরের পক্ষে অবমূল্যায়িত হয়েছে। ক্রোম 85
আইভানজি

0
//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}

4
এই প্রশ্নের উত্তর দেওয়া হয়েছে এবং অনেকগুলি উত্তর এই উত্তরগুলির জন্য রাখা হয়েছে। কোনভাবে আপনার উত্তর ভাল? আপনি কি দয়া করে আপনার সমাধানটি ব্যাখ্যা করবেন?
গুণমান অনুঘটক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.