'onclick'이벤트를 트리거하는 요소의 ID를 이벤트 처리 함수에 전달하는 방법
onclick이벤트를 트리거하는 요소의 ID를 이벤트 처리 함수에 어떻게 전달합니까?
나는 이런 일을하고있다.
<link onclick="doWithThisElement(id_of_this_element)" />
ID를 전달하는 대신 요소 자체를 전달할 수 있습니다.
<link onclick="doWithThisElement(this)" />
또는 신분증 전달을 고집하는 경우 :
<link id="foo" onclick="doWithThisElement(this.id)" />
다음은 JSFiddle 데모입니다. http://jsfiddle.net/dRkuv/
이벤트를 트리거 한 요소는 이벤트가 DOM 트리에서 버블 링 되기 때문에 핸들러를 바인딩 한 요소와 다를 수 있습니다 .
따라서 이벤트 핸들러가 바인딩 된 요소의 ID를 얻으려면 this.id( this요소 참조)를 사용하여 쉽게 수행 할 수 있습니다 .
그러나 이벤트가 시작된 요소를 얻으려면 event.targetW3C 호환 브라우저 및 event.srcElementIE 8 이하에서 액세스해야 합니다.
onXXXXHTML 속성 에 많은 JavaScript를 작성하는 것을 피할 것 입니다. event개체를 전달하고 처리기 (또는 추가 함수)에서 요소를 추출하는 코드 만 넣습니다.
<div onlick="doWithThisElement(event)">
그러면 핸들러는 다음과 같습니다.
function doWithThisElement(event) {
event = event || window.event; // IE
var target = event.target || event.srcElement; // IE
var id = target.id;
//...
}
quirksmode.org에서 이벤트 핸들링에 대한 훌륭한 기사 를 읽을 것을 제안합니다 .
Btw
<link onclick="doWithThisElement(id_of_this_element)" />
거의 의미가 없습니다 ( <link>에만 나타날 수있는 요소 <head>이며 이벤트 핸들러를 바인딩해도 효과가 없습니다).
다음은 인수를 전달하지 않으려는 경우 유용 할 수있는 비표준 이지만 브라우저 간 방법입니다.
HTML :
<div onclick=myHandler() id="my element's id">→ Click Here! ←</div>
스크립트:
function myHandler(){
alert(myHandler.caller.arguments[0].target.id)
}
데모 : http://codepen.io/mrmoje/pen/ouJtk
jquery mate 사용을 제안합니다.
jQuery를 사용하면 다음을 통해이 요소의 ID를 얻을 수 있습니다.
$ (this) .attr ( 'id');
jquery없이, 내가 올바르게 기억한다면 우리는
this.id
도움이되기를 바랍니다 :)
이것을 사용하십시오 :
<link onclick='doWithThisElement(this.attributes["id"].value)' />
onclick을 자바 스크립트의 맥락에서, 이는 (이 경우 전체 HTML 요소 인 현재 요소를 지칭 링크 ).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE
console.log(target);
console.log(target.id);
var img = document.createElement('img');
img.setAttribute('src', target.src);
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img id="muID1" src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img id="myID2" src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
</body>
</html>
'programing' 카테고리의 다른 글
| 여러 인수가있는 xargs (0) | 2021.01.17 |
|---|---|
| Chrome이 빈 필드에 "Please Fill Out this Field"툴팁을 표시하는 이유는 무엇입니까? (0) | 2021.01.17 |
| 문자열에서 마지막 점과 일치하는 정규식 (0) | 2021.01.17 |
| rake db : create가 postgresql에서 "데이터베이스가 존재하지 않음"오류를 발생시킵니다. (0) | 2021.01.17 |
| NLTK 및 불용어 실패 #lookuperror (0) | 2021.01.17 |