Nhận ID của phần tử được gọi là hàm

Question

Làm cách nào để nhận ID của phần tử được gọi là hàm JS?

body.jpg là hình ảnh con chó khi người dùng trỏ chuột xung quanh màn hình ở các phần khác nhau của cơ thể, hình ảnh phóng to được hiển thị. ID của phần tử khu vực giống với tên tệp hình ảnh trừ đi thư mục và phần mở rộng.

<div> 
    <img src="images/body.jpg" usemap="#anatomy"/> 
</div> 

<map name="anatomy"> 
    <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/> 
</map> 

<script type="text/javascript"> 
function zoom() 
{ 
document.getElementById("preview").src="images/nose.jpg"; 
} 
</script> 

<div> 
<img id="preview"/> 
</div> 

Tôi đã thực hiện nghiên cứu và đã đến SO như một phương sách cuối cùng. Tôi thích một giải pháp không liên quan đến jQuery.

Answer 1

Vượt qua một tham chiếu đến các yếu tố vào chức năng khi nó được gọi là:

<area id="nose" onmouseover="zoom(this);" /> 

<script> 
    function zoom(ele) { 
    var id = ele.id; 

    console.log('area element id = ' + id); 
    } 
</script> 

Answer 2

Bạn có thể mã hóa các thiết lập xử lý như thế này:

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/> 

Sau đó this trong xử lý của bạn sẽ tham khảo các thành phần. Bây giờ, tôi sẽ cung cấp cho báo trước rằng tôi không chắc chắn 100% những gì sẽ xảy ra khi bạn đã có một trình xử lý trong một thẻ <area>, chủ yếu là vì tôi đã không nhìn thấy một thẻ <area> trong một thập kỷ hoặc lâu hơn. Tôi nghĩ rằng nó sẽ cung cấp cho bạn thẻ hình ảnh, nhưng điều đó có thể sai.

chỉnh sửa — có, đó là sai - bạn nhận được thẻ <area>, không phải là <img>. Vì vậy, bạn sẽ phải có được phụ huynh của phần tử đó (bản đồ), và sau đó tìm thấy hình ảnh đang sử dụng nó (có nghĩa là, <img> có thuộc tính "usemap" dùng để chỉ tên của bản đồ).

chỉnh sửa lại — ngoại trừ nó không quan trọng bởi vì bạn muốn của khu vực "id" DURR. Xin lỗi vì đã không đọc chính xác.

Answer 3

Tôi biết bạn không muốn có giải pháp jQuery nhưng bao gồm javascript bên trong HTML là không lớn.

Tôi có nghĩa là bạn có thể làm điều đó nhưng có rất nhiều lý do tại sao bạn không nên (đọc lên trên unobtrusive javascript nếu bạn muốn các chi tiết).

Vì vậy, vì lợi ích của người khác, những người có thể thấy câu hỏi này, đây là giải pháp jQuery:

$(document).ready(function() { 
    $('area').mouseover(function(event) { 
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id')); 
    }); 
}); 

Lợi ích chính là bạn không trộn lẫn mã javascript với HTML. Hơn nữa, bạn chỉ cần viết này một lần và nó sẽ làm việc cho tất cả các thẻ như trái ngược với việc phải chỉ định xử lý cho từng riêng biệt.

Lợi ích bổ sung là mọi trình xử lý jQuery nhận một đối tượng sự kiện chứa rất nhiều dữ liệu hữu ích - chẳng hạn như nguồn của sự kiện, loại sự kiện và như vậy giúp bạn viết mã loại dễ dàng hơn sau.

Cuối cùng vì đó là jQuery, bạn không cần phải suy nghĩ về các công cụ trên nhiều trình duyệt - một lợi ích lớn đặc biệt là khi giao dịch với các sự kiện.

Answer 4

Tôi ngạc nhiên khi không ai đề cập đến việc sử dụng this trong trình xử lý sự kiện. Nó hoạt động tự động trong các trình duyệt hiện đại và có thể được thực hiện để hoạt động trong các trình duyệt khác.Nếu bạn sử dụng addEventListener hoặc attachEvent để cài đặt trình xử lý sự kiện của mình, thì bạn có thể đặt giá trị this tự động được gán cho đối tượng đã tạo sự kiện.

Hơn nữa, người dùng trình xử lý sự kiện được cài đặt theo chương trình cho phép bạn tách mã javascript khỏi HTML thường được coi là một điều tốt.

Đây là cách bạn sẽ làm điều đó trong mã của bạn trong javascript đơn giản:

Tháo onmouseover="zoom()" từ HTML của bạn và cài đặt các xử lý sự kiện trong javascript của bạn như thế này:

// simplified utility function to register an event handler cross-browser 
function setEventHandler(obj, name, fn) { 
    if (typeof obj == "string") { 
     obj = document.getElementById(obj); 
    } 
    if (obj.addEventListener) { 
     return(obj.addEventListener(name, fn)); 
    } else if (obj.attachEvent) { 
     return(obj.attachEvent("on" + name, function() {return(fn.call(obj));})); 
    } 
} 

function zoom() { 
    // you can use "this" here to refer to the object that caused the event 
    // this here will refer to the calling object (which in this case is the <map>) 
    console.log(this.id); 
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg"; 
} 

// register your event handler 
setEventHandler("nose", "mouseover", zoom); 

Answer 5

Bạn có thể sử dụng 'này 'trong xử lý sự kiện:

document.getElementById("preview").onmouseover = function() { 
    alert(this.id); 
} 

Hoặc vượt qua đối tượng sự kiện để xử lý như sau:

document.getElementById("preview").onmouseover = function(evt) { 
    alert(evt.target.id); 
} 

Bạn nên sử dụng attachEvent (dành cho IE < 9)/addEventListener (IE9 và các trình duyệt khác) để đính kèm sự kiện. Ví dụ trên là ngắn gọn.

function myHandler(evt) { 
    alert(evt.target.id); 
} 

var el = document.getElementById("preview"); 
if (el.addEventListener){ 
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){ 
    el.attachEvent('onclick', myHandler); 
}