Login/Register
event: "Deprecated symbol used, consult docs for better alternative"
Asked Answered
javascripthtmlpycharmdom-eventsevent-listener
B

3

46

It's been a while that PyCharm (I suppose it's the same with WebStorm and other JetBrains IDEs) raise a weak warning on the event variables I use in my code.

For instance in the following code

<div id="my-div" onclick="event.preventDefault();">...</div>

PyCharm displays this message "Deprecated symbol used, consult docs for better alternative".

The problem seems to be that the event variable refers to Window.event, and according to MDN Web Docs:

You should avoid using this property in new code, and should instead use the Event passed into the event handler function. This property is not universally supported and even when supported introduces potential fragility to your code.

I know that a correct workaround would be to write in a javascript tag:

document.getElementById("my-div").addEventListener("click", function(event) {
  console.log("And use this " + event + " instead");
});

I am just wondering what would be, if it exists, the correct way to use events in the HTML code (onclick attribute).

Beaton answered 28/8, 2019 at 16:37 Comment(1)
No, inside an attribute event handler you can only use the global event variable, that's correct. And yes, the proper way would be to not use inline event handler attributes - it's not just a workaround, it's the solution. – Butters
W
4

I do not know if it is still important for someone or not, but tested on WebStorm 2020.3 the following works, and the IDE does not complain about deprecation. Additionally, WebStorm identifies the event as Event.

Code snippet below.

(function() {
    const checkBox = document.querySelector("#id-checkbox");
    checkBox.addEventListener('click', (event) => {
        event.preventDefault();
    }, false);
})();
<head>
    <script src="click.js" defer></script>
</head>
<body>
    <p>Please click on the checkbox control.</p>
    <form>
        <label for="id-checkbox">Checkbox:</label>
        <input type="checkbox" id="id-checkbox"/>
    </form>

    <div id="output-box"></div>
</body>
Waikiki answered 30/1, 2021 at 11:14 Comment(1)
Sure. Cause it's not the problem the op has – Millican
S
1

For an on HTML attribute handler, the value of an handler is the body of a function. And if the function is returning false, you will cancel it.

Then, your example should be rewritten

<div id="my-div" onclick="return false;">...</div>

Note that you got the same deprecation notice for the same reason with the definition of a callback in a event listener.

For instance, this code will trigger the same deprecation notice.

element.addEventListener("click", myCallbackFunction(event));

In this case, you should pass an event listener object to remove this deprecation. (ie wrap your callback function in an object and set it into the handleEvent property)

For instance:

let callbackObject = { handleEvent: function(event){...} }
element.addEventListener("click", callBackObject);
Sphygmoid answered 9/10, 2021 at 10:21 Comment(0)
M
-5

Just pass event to a callback using it inside in the JS side:

function preventDefault(e) {
  e.preventDefault(); 
}
<div id="my-div" onclick="preventDefault(e)">Click me</div>

Or you can call it in the HTML in a closure 

    <div id="my-div" onclick="(function(e){e.preventDefault()})(e)">Click me</div>

I am strongly suggesting you to use the first option and not the latter

Millican answered 2/10, 2020 at 11:28 Comment(5)
If it helped you, please mark it as answer for future visitors – Millican
This is not a solution at all. Pycharm still complains about the usage of "event" in the attribute. – Paralyze
Dear Mark, Can you attach your error in PyCharm? This is the solution for the asked question – Millican
@Millican the error is the same Deprecated symbol used, consult docs for better alternative and appears for both of your examples in the most recent version available by Jetbrains at the time of this comment – Samba
I do think that there might be a different reason for that. i suggest you to ask your own question with all the needed info – Millican

© 2022 - 2024 — McMap. All rights reserved.