onmouseover - How to know the sender of a javascript function? - Stack Overflow

admin管理员组

文章数量:1279176

In HTML, I have some images and a javascript function.

<img onmouseover="repl()" class="EN" ... />
<img onmouseover="repl()" class="FR" ... />
...

When user is on an image. I want to change my header text according to the language selected.

I need a way to have a "reference" to the sender of my function in javascript. But I have no idea because I have not used javascript for years. Please Help me !

function repl() {

    // Missing Solution 
    // var lang = sender.attr("class"); <= Please correct me

    var headerText = "";
    if (lang == 'FR') {
        headerText = "Cliquez sur le drapeau"
    } else {
        headerText = "Click on flag"
    }

In HTML, I have some images and a javascript function.

<img onmouseover="repl()" class="EN" ... />
<img onmouseover="repl()" class="FR" ... />
...

When user is on an image. I want to change my header text according to the language selected.

I need a way to have a "reference" to the sender of my function in javascript. But I have no idea because I have not used javascript for years. Please Help me !

function repl() {

    // Missing Solution 
    // var lang = sender.attr("class"); <= Please correct me

    var headerText = "";
    if (lang == 'FR') {
        headerText = "Cliquez sur le drapeau"
    } else {
        headerText = "Click on flag"
    }

• javascript
• onmouseover

Share Improve this question Follow asked Sep 4, 2013 at 15:17 user1056113user1056113

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

The best solution would be to bind the event using addEventListener. Give all your images the same class, select them, then add events. I also suggest using data-* attributes to store the language.

<img class="repl" data-lang="EN" ... />
<img class="repl" data-lang="FR" ... />

Then in your JavaScript:

window.onload = function(){// Make sure DOM is ready
    // Get the images
    var imgs = document.getElementsByClassName('repl');

    // Loop over them
    for(var i = 0, len = imgs.length; i < len; i++){
        // Add the event
        imgs[i].addEventListener('mouseover', function(){
            // Get the language. "this" is the element we hovered over
            var lang = this.getAttribute('data-lang');

            var headerText = "";
            if (lang == 'FR') {
                headerText = "Cliquez sur le drapeau"
            } else {
                headerText = "Click on flag"
            }
        });
    }
};

DEMO: http://jsfiddle/cT7Tj/1/

First you need to send the sender to your function:

<img onmouseover="repl(this)" class="EN" ...

Then:

function repl(sender) {
//you have the element that sent the event
    var lang = sender.getAttribute('data-lang');
    var headerText = "";
    if (lang == 'FR') {
        headerText = "Cliquez sur le drapeau"
    } else {
        headerText = "Click on flag"
    }
}

var lang = this.getAttribute('class');

You should rather use a "data-lang" attribute.

    function repl() {

   var lang = navigator.language || navigator.userLanguage; //this will fetch the current browser language   
   var headerText = "";

   switch (lang) {
       case 'fr':
           document.getElementById('your_id').innerHTML = "Cliquez sur le drapeau";
           break;
       default:
           document.getElementById('your_id').innerHTML = "Click on flag"
   }

本文标签： onmouseoverHow to know the sender of a javascript functionStack Overflow