Minimum events to call on a dynamic link

**Rain Lover** · 06-04-2014, 04:16 PM

Sample:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Dynamic Link</title>
</head>

<body>
    <input type="text" value="http://www.example.com/" id="input">
    <a href="http://www.example.com/" id="link">Linked text</a>
    <script>
        var link = document.getElementById('link'),
            input = document.getElementById('input');
        link.onclick = link.oncontextmenu = link.onmousedown = function () {
            this.href = input.value;
        };
    </script>
</body>

</html>

DEMO

onclick: called on the left click and keyboard focus + Enter
oncontextmenu: called on the right click and keyboard context menu
onmousedown: called on the middle click in Firefox/IE and on the link drag to the address bar

Questions:

Are there any other ways to navigate to the URL of the link -- something I forgot to cover for perfect accessibility?
Can I reduce the number of events or do I have to use them all?

**jscheuer1** · 06-04-2014, 06:21 PM

This appears to be a triumph of method over purpose. What's the purpose here? Or is it simply an academic exercise? In any case, what you are doing here is not enhancing accessibility. Once you rely upon a dynamic link, accessibility declines. What if javascript is disabled/unavailable? And just because there are multiple ways of navigating to a link, doesn't mean that you have to think of all of them. In the above scenario, assuming that you are willing to constrain yourself to javascript enabled clients, I believe the onchange event of the input is all you need concern yourself with. as soon as it blurs (any sort of focus occurs on the link or elsewhere on the page, browser, or desktop, after the input's value has been modified), the link will update:

Code:

input.onchange = function(){link.href = this.value;};

But again, I wonder why. What's the purpose here?

**Rain Lover** · 06-05-2014, 03:10 AM

Originally Posted by jscheuer1

But again, I wonder why. What's the purpose here?

It refers to my previous thread. Since it has a different question I thought I'd better keep them separate and open a new thread. As you see in the demo it's a text editor based on whose content the link needs to be updated.

input.onchange = function(){link.href = this.value;};

It's a good idea, but seems to have a problem: we call a function when it's not necessarily needed. What if the user leaves the input element to do something else (e.g. click on a button) and doesn't want to click on the link?

**jscheuer1** · 06-05-2014, 03:38 AM

With three events, two or more of them might be firing at once, one right after the other and in conjunction, maybe even in competition with the browser's native response, and fired whether or not the input's value has been updated. With just the change event, it should fire before any native event upon the link and will only fire once per value/href change.

**jscheuer1** · 06-05-2014, 04:38 AM

Just thought I'd add that in javascript it's usually better to use just one event when possible.

**Rain Lover** · 06-05-2014, 07:01 AM

Originally Posted by jscheuer1

Just thought I'd add that in javascript it's usually better to use just one event when possible.

Thanks for admitting my code!

**jscheuer1** · 06-05-2014, 01:50 PM

Any time. I'm nit sure what you mean by admit here though. But, your code was never in doubt. I mean it is there. People (myself included) sometimes get attached to "their code". Like it was a child, or some other reflection upon them. What I meant though was that, once anyone gets in the habit of writing a lot of code, they usually want to write it so that it takes the minimum amount of typing, is cross browser, and requires the minimum amount of work (browser and computer resources) on the part of the client. I can't count the number of times I've gone back over my own code on things finding simpler and shorter versions.

That said, sometimes, in order to be cross browser, and/or to use the minimum of the browser's resources, it's necessary to be complicated.

That's why I like jQuery. It simplifies and shortens many of these bits of, otherwise complex looking, and lengthy code.

Still, I think it's important to know how to write it out in ordinary javascript, or at least to know how to go about it and where to look up the finer points. That way, when you do use something like jQuery, you not only benefit from the brevity in coding of complex scripts, but also have an understanding of what the code is doing and how it's executing.