This question already has answers here:
Do you ever need to specify 'javascript:' in an onclick?
(8 answers)
Closed 8 years ago.
Can someone please explain the difference between:
onclick="javascript:fnName(this);"
...and...
onclick="fnName(this);"
Is there any performance hit? or when to use what?
Not actually, and usually you don't write the first one. Because onclick handler is handled by the JavaScript, so calling JavaScript to handle it won't be a good bet.
In the context of event attributes it's completely useless. It's mainly used inside of the href attribute and allows you to create a pseudo-onclick event:
click me
Also you can just put it in the location input in your browser and run scripts. It's simillar to the console input.
Edit: I realized it's not really useless but it has completely different usage than you would thought. In the context of these event attributes it behaves like in a normal code and so it's a label. Try this:
<div onclick="javascript:while(true){while(true){alert('hello');break javascript;}}">click me</div>
Related
This question already has answers here:
What is the difference between 'remove' and 'removeChild' method in JavaScript?
(2 answers)
Closed 2 years ago.
I am developing a website. There are a lot of spots, where I have to remove the html element. The previous, main contributor used to do it like this:
var elem = document.getElementById('element');
elem.parentNode.removeChild(elem);
I'm wondering why didn't he just use
elem.remove();
instead.
I've gotten to the point, where the first method didn't work and returned an error, but the second one worked perfectly. Of course I wanted to stick with the code standard in this project, so my first try was to use parentNode.removeChild. Unfortunatelly I cannot contact that person to ask why is it done like that.
What is the difference between these two and can I safely replace those?
As from MDN, the two are equivalent. The .remove() was inspired by jQuery and was implemented much later. IE does not support it.
If you don't need IE, you can safely replace parentNode.removeChild, but if you will transpile the code, the replace method have polyfill using parentNode.removeChild method...
Source of the answer
How is remove different from removeChild?
remove only needs a reference to the child. removeChild needs a reference both to the parent and the child. The result is identical.
Also you might think ,Is there any way to ensure that element is actually removed from memory?
No. You can only unreference it and hope that there is a garbage collector which will detect the object is not referenced and then will remove it.
This question already has answers here:
onclick="" vs event handler
(9 answers)
Closed 8 years ago.
I've tried googling but I'm having trouble expressing what i'm asking.
There seem to be different ways to trigger events and I was wondering if there's a difference between them.
On way is for example:
window.onload=function(){headerAdjustWidth();thumbsArrange();checkHash();}
window.onscroll=function(){windowScrollStore();}
window.onresize=function(){headerAdjustWidth();thumbsArrange();windowScrollAdjust();showExpanded(false);}
window.onkeydown=function(){checkKeyboard();}
And another way is
<body onKeyDown="checkKeyboard();" onLoad="headerAdjustWidth();thumbsArrange();checkHash();" onScroll="windowScrollStore();" onResize="headerAdjustWidth();thumbsArrange();windowScrollAdjust();showExpanded(false);">
Are there any pros/cons to each so far?
The other thing is for the onload functions, is there any reason why I should/shouldn't just put them straight in a <script> thing? e.g:
<script type="text/javascript">
headerAdjustWidth();
thumbsArrange();
checkHash();
</script>
Finally, is there any reason why I should do window.onscroll=function(){windowScrollStore();} rather than window.onscroll=windowScrollStore?
In my point of view, it is much better to not include calls of javascript within HTML because this makes several building steps complicated such as OFFUSCATION of code.
I highly recommand to use the solution to keep javascript within javascript.
Concerning onload function, as described abode, I function on scripts as it simplificates building process.
This question already has answers here:
What's the point of "javascript:" in code (not URLs)? [duplicate]
(4 answers)
Closed last year.
A lot of the time I see people calling javascript functions using colon (:).
Like onclick="javascript:functionname();"
The same function works without javascript: and I'm curious to know when to use javascript: and when not to.
Any suggestions are appreciated.
javascript: prefix is extremely important when you put code to anchor href attribute:
Anchor
Whereas in inline event attributes (like onclick, onsubmit, onmouseover, etc.) javascript: prefix is not important.
However, you should note that both approaches given here are not good to implement and you should use alternative ways (e.g as #Paul S. stated in the comments)
This is not as commonly seen in onclick events as these events already execute javascript. You will may see something like the following quite a bit:
Link
The reason for such code is that by default an href attribute is trying to change the location or redirect. This tells the browser that the default href action will be javascript that is run. Otherwise, the function will not run and the page will refresh which is quite annoying.
Page refreshing is a common issue when using javascript like this in an anchor tag since an anchor tags default action is to refresh or load another page. The return false; at the end signals that the default action (i.e. refresh or load) should not fire.
Hope this helps.
I believe the javascript: prefix is left over from when there were many other script types bouncing around on the web (vbScript, for example) and in order to differentiate between them in HTML you needed to provide these prefixes.
That being said, these tags do absolutely nothing in any browser other then IE anymore, and even in IE you generally can omit them.
Also notice that this entire question is moot since you should be binding event handlers through javascript, not in HTML.
This question already has answers here:
Firing event on DOM attribute change
(6 answers)
Closed 5 years ago.
<div class="current"></div>
text
How do I detect when e.g. a .live class is added to this <div> and do something when it happened?
For example, if class is changed, then hide the link.
I have a minified script that makes changes on the <div>'s class. It’s too big for me to find the place where it happens, so I'm searching for some way to catch the class change.
There are DOM events, but they are far from perfect and not available in most browsers. In other words: Not possible (reliably). There are hacks like intervals and checking it in each iteration, but if you need to do something like this, your design is probably screwed. Keep in mind that such things will be slow and that there will always be a delay. The smaller the delay, the slower the application. Do not do that.
You may checkout the following article for some ideas.
I don't know if the class you add to the link is always the same but if so, why don't you use CSS for this.
<style type='text/css>
.myaddedclass{display:none}
</style>
If you just need to figure this out once (i.e. not in code), Google Chrome’s web inspector shows DOM changes live. Not sure if that’d help your situation out though.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
what does #someDiv mean?
i am doing this:
onmouseover="evt.target.setAttribute('opacity', '0.5'); $('#someDiv').show();" onmouseout="evt.target.setAttribute('opacity','1)'); $('#someDiv').hide();"
but i guess i need something called an ID selector?
anyway how do i make it so that when there is a mouseover the object, i get a little popup ?
$('#someDiv') is selecting the element with ID="someDiv", so selectors might not be your problem.
Apart from using the onmouseover event attribute, the code you provided should basically work. Are you seeing any JS errors, or have other debug results you could share?
Edit:
It's probably (maybe?) unrelated to your problem, but you should consider moving all the JS logic to a linked JS file instead of using the onmouseover property. jQuery's $('#your-selector').mouseover() method is a much better way to handle this. (http://api.jquery.com/mouseover/)