답변:
함수 매개 변수로 ID를 보내야합니다. 다음과 같이하십시오 :
<button id="1" onClick="reply_click(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>
<script type="text/javascript">
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>함수에서 사용할 수 있는 ID this.id를 보냅니다 clicked_id. 여기에서 실제로보십시오.
event.target.id(Firefox와 IE 모두가 던지고 있음)에 대해서는이 세 가지 주요 브라우저 모두에서 작동하는 훌륭한 솔루션입니다.
일반적으로 코드와 마크 업을 분리하면 구성하기가 더 쉽습니다. 모든 요소를 정의한 다음 JavaScript 섹션에서 해당 요소에 대해 수행해야하는 다양한 조치를 정의하십시오.
이벤트 핸들러가 호출되면 클릭 된 요소의 컨텍스트 내에서 호출됩니다. 그래서, 식별자 이 당신이 클릭하는 DOM 요소를 참조합니다. 그런 다음 해당 식별자를 통해 요소의 속성에 액세스 할 수 있습니다.
예를 들면 다음과 같습니다.
<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>
<script type="text/javascript">
var reply_click = function()
{
alert("Button clicked, id "+this.id+", text"+this.innerHTML);
}
document.getElementById('1').onclick = reply_click;
document.getElementById('2').onclick = reply_click;
document.getElementById('3').onclick = reply_click;
</script>
순수한 JAVASCRIPT 사용하기 : 늦었지만 미래 사람들에게 도움이 될 수 있음을 알고 있습니다.
HTML 부분에서 :
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
Javascipt Controller에서 :
function reply_click()
{
alert(event.srcElement.id);
}
이 방법으로 자바 스크립트 함수를 호출 할 때 Element의 'id'를 바인딩 할 필요가 없습니다.
this매개 변수 로 전달 onClick하여 문제를 해결 했습니다 (실제로 onClick을 사용하지 않고 onChange를 사용하는 것이 문제입니까?). 나는 또한 조금 둘러 보았고이 event변수 에 대해 많은 혼란이있는 것처럼 보입니다 - "암시 적"매개 변수입니까, 아니면 인수로 명시 적으로 명시해야 function reply_click(event)합니까 (예 : 일부 지역)? addEventListener...을 통해 이벤트 리스너를 할당 할 때만 사용할 수 있습니까? 나는 놀았지만 작동하지 못했습니다.
( id속성이 문자로 시작해야 한다고 생각합니다 . 잘못되었을 수 있습니다.)
이벤트 위임을 위해 갈 수 있습니다 ...
<div onClick="reply_click()">
<button id="1"></button>
<button id="2"></button>
<button id="3"></button>
</div>
function reply_click(e) {
e = e || window.event;
e = e.target || e.srcElement;
if (e.nodeName === 'BUTTON') {
alert(e.id);
}
}
...하지만 괴상한 이벤트 모델에 비교적 익숙해야합니다.
e인수가 자동으로 생성됩니다. 그렇지 않은 경우 IE6-8을 처리해야합니다 .IE6-8은 대신에 유용한 객체를 제공합니다 window.event.
일반적으로 인라인 JavaScript를 피하는 것이 좋지만 수행 방법에 대한 예는 거의 없습니다.
다음은 이벤트를 버튼에 연결하는 방법입니다.
권장 방법이 간단한 onClick속성에 비해 얼마나 더 오래 걸리는지는 완전히 만족스럽지 않습니다 .
<button class="btn">Button</button>
<script>
let OnEvent = (doc) => {
return {
on: (event, className, callback) => {
doc.addEventListener('click', (event)=>{
if(!event.target.classList.contains(className)) return;
callback.call(event.target, event);
}, false);
}
}
};
OnEvent(document).on('click', 'btn', function (e) {
window.console.log(this, e);
});
</script><!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
var hasClass = function(el,className) {
return el.classList.contains(className);
}
doc.addEventListener('click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault();
doSomething.call(e.target, e);
}
});
})(document);
function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}
function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script>
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>
<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">
<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
var cb_addEventListener = function(obj, evt, fnc) {
// W3C model
if (obj.addEventListener) {
obj.addEventListener(evt, fnc, false);
return true;
}
// Microsoft model
else if (obj.attachEvent) {
return obj.attachEvent('on' + evt, fnc);
}
// Browser don't support W3C or MSFT model, go on with traditional
else {
evt = 'on'+evt;
if(typeof obj[evt] === 'function'){
// Object already has a function on traditional
// Let's wrap it with our own function inside another function
fnc = (function(f1,f2){
return function(){
f1.apply(this,arguments);
f2.apply(this,arguments);
}
})(obj[evt], fnc);
}
obj[evt] = fnc;
return true;
}
return false;
};
var hasClass = function(el,className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}
cb_addEventListener(doc, 'click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
doSomething.call(e.target, e);
}
});
})(document);
function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}
function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>
<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">
<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function($){
$(document).on('click', '.click-me', function(e){
doSomething.call(this, e);
});
})(jQuery);
function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}
function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>
<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">
<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html>문서가 준비되기 전에 이것을 실행할 수 있습니다. 이벤트가 문서에 첨부되어 있기 때문에 버튼을 클릭하면 작동합니다.
여기에 jsfiddle이
있습니다. 이상한 이유로 인해 insertHTML모든 브라우저에서 작동하더라도 함수가 작동하지 않습니다.
단점insertHTML 이 document.write있다면 언제든지 교체 할 수 있습니다.
<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>출처 :
onclick 함수에 인수를 전달하지 않으려면 event.targetclicked 요소를 가져 오기 위해 사용 하십시오.
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
function reply_click()
{
// event.target is the element that is clicked (button in this case).
console.log(event.target.id);
}순수한 자바 스크립트로 다음을 수행 할 수 있습니다.
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i < buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
alert(this.id);
};
}JsFiddle에서 확인하십시오.
다음과 같이 간단하게 수행 할 수 있습니다.
<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/>
<script type="text/javascript">
function showId(obj) {
var id=obj;
alert(id);
}id=obj;그냥이alert(obj);
답변이 늦었지만 죄송합니다. 이렇게하면 정말 빠릅니다.
$(document).ready(function() {
$('button').on('click', function() {
alert (this.id);
});
});클릭 한 버튼의 ID를 가져옵니다.
특정 장소에서 클릭 한 버튼의 가치를 얻으려면 컨테이너에 넣습니다.
<div id = "myButtons"> buttons here </div>코드를 다음과 같이 변경하십시오.
$(document).ready(function() {
$('.myButtons button').on('click', function() {
alert (this.id);
});
});이게 도움이 되길 바란다