Implicitly pass "this" by utilizing an inline event listener

Question

Implicitly pass "this" by utilizing an inline event listener

var functionVariable = (function() {

  return {
    'initialize': function(className) {
      // Here, I need to access the <a> tag and apply the specified className
    }
  };

}());

<a href="#" onmouseover="functionVariable.initialize('myClass')">Link</a>

Given the code above, is there a way to implicitly pass this to functionVariable.initialize?

I am aware that I could modify the initialize function to function(className, element) and then use

onmouseover="functionVariable.initialize('myClass', this)"

to access the element. However, I am curious if it is possible to achieve this without explicitly passing this in the inline event listener.

javascript

Answer 1

Answer №1

Instead of passing this in an inline event listener, you can use the call method. Another option is to utilize addEventListener and avoid inline events altogether.

var func = (function() {

  return {
    'initialize': function(className) {
      // Utilizing "this" in this function to refer to the <a> element
      this.className = className;
    }
  };

}());

.myClass {
  color: red;
}

<a href="#" onmouseover="func.initialize.call(this, 'myClass')">Link</a>

To attach an event to each <a> element, you can do the following:

var elements = document.getElementsByTagName("a");
for (var i = 0; i < elements.length; ++i) {
  elements[i].addEventListener("click", function() {
    func.initialize.call(this, 'myClass');
  }, false);
}

Alternatively, for modern browsers excluding IE:

var elements = document.getElementsByTagName("a");
for (var i = 0; i < elements.length; ++i) {
  elements[i].addEventListener("click", func.initialize.bind(elements[i], 'myClass'), false);
}

Answer 2

Instead of passing this in an inline event listener, you can use the call method. Another option is to utilize addEventListener and avoid inline events altogether.

var func = (function() {

  return {
    'initialize': function(className) {
      // Utilizing "this" in this function to refer to the <a> element
      this.className = className;
    }
  };

}());

.myClass {
  color: red;
}

<a href="#" onmouseover="func.initialize.call(this, 'myClass')">Link</a>

To attach an event to each <a> element, you can do the following:

var elements = document.getElementsByTagName("a");
for (var i = 0; i < elements.length; ++i) {
  elements[i].addEventListener("click", function() {
    func.initialize.call(this, 'myClass');
  }, false);
}

Alternatively, for modern browsers excluding IE:

var elements = document.getElementsByTagName("a");
for (var i = 0; i < elements.length; ++i) {
  elements[i].addEventListener("click", func.initialize.bind(elements[i], 'myClass'), false);
}

Answer 3

Answer №2

Yes, each time you call a function, a new value of the this keyword is generated.

For example, calling fn.init('myClass') is distinct from calling theElement.onmouseover(event).

Instead of relying on intrinsic event attributes, it is advisable to utilize addEventListener to attach event handlers.

Answer 4

Yes, each time you call a function, a new value of the this keyword is generated.

For example, calling fn.init('myClass') is distinct from calling theElement.onmouseover(event).

Instead of relying on intrinsic event attributes, it is advisable to utilize addEventListener to attach event handlers.

Implicitly pass "this" by utilizing an inline event listener

Answer №1

Answer №2

Similar questions

Encountering errors while attempting to render MUI components in jsdom using react testing library within a mocha test

The essential guide to coding Javascript/Ajax in conjunction with Chart.js

Directive not working on Mozilla Firefox

Understanding variable scopes in the success callback function of a JQuery post request

Leverage the package.json script without relying on any yarn/npm commands

Troubleshooting: Why is my AngularJS Controller not functioning properly

Adjust the size of child divs in relation to their parent divs using jQuery

Using AngularJS to convert a JSON object into an array

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

Guide to Rolling a Set of 5 Dice

Transmit variables to ajax callback function

Encountering issues with SignInWithRedirect feature's functionality

Tips for preventing timeouts when posting data to Heroku servers

Receive immediate updates of the text input in real-time using the onkeydown event handler in Javascript

Creating Tree diagrams with pie charts using D3

Angular 2: Encounter with 504 Error (Gateway Timeout)

What are the consequences of altering the DOM in React?

karma - Plugin not located

Arranging a dictionary by its keys using Ramda

Implementing Window.Open function within a jQuery Modal