I want to "catch" the very first moment when the <body> has created. I've tried using DOMNodeInserted / DOMNodeInsertedIntoDocument. here's my code:
<html>
<head>
<script>
document.addEventListener("DOMNodeInserted", handleDomInserted, true);
document.addEventListener("DOMNodeInsertedIntoDocument", handleDOMNodeInsertedIntoDocument, true);
function handleDOMNodeInsertedIntoDocument(e) {
console.log(e);
}
function handleDomInserted(e) {
console.log(e);
}
</script>
</head>
<body>
<div id="foo">
<span id="bazz"></span>
</div>
</body>
</html>
Why do those functions never get called?
The code is correct but JavaScript events are NOT fired when the HTML is initially parsed by the browser. JS evens will only fire when DOM manipulation is done by JS.
E.g. if you add the following to the code sample, the event will fire:
<script>
var d = document.createElement('div');
d.innerHTML = 'test';
document.body.appendChild(d);
</script>
Related
so in my html i have this portion:
<body ondblclick="myfunc();">
<div id="id1">dasd</div>
<div id="id2">dasda</div>
</body>
and in javascript the function is :
function myfunc() {
do stuff here...
}
i want to know inside myfunc() on which element of the html body the doubleclick was made, because i don't want to triger myfunc() on every doubleclicked element
so how can i detect the id of the element doubleclicked?
<body ondblclick="myfunc(event);">
function myfunc(e) {
// e.target -> element that was clicked
}
make your HTML as
<body ondblclick="myfunc(event);">
and make myfunc as:
function myfunc(event) {
alert(event.target.id); //here you can get element id that is double clicked
event.stopPropagation();
}
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>ondblclick event example</title>
<script>
function initElement() {
var body = document.getElementById("bdy");
body.ondblclick = showAlert;
}
function showAlert(e){
alert(e.target.id);
}
window.onload = initElement;
</script>
</head>
<body id="bdy">
<div id="id1">dasd</div>
<div id="id2">dasda</div>
</body>
</html>
you can define different events with use of on or bind suppose..
$("#id").on("doubleClick",function () {} );
so it will know that its double click event..
or for javascript you can use like this
<body ondblclick="myfunc(event);">
function myfunc(event) {
do something..
}
I have a problem.After adding a new element in the DOM, the element does not recognize old script and the same function that was in this document, how to solve this problem? how to reload the script
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id='content'>Content.....</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src='js/script.js' type='text/javascript'></script>
</body>
</html>
// script.js //
$('#content').click(function(){
$('body').append('<div id="apended">Click me!</div>');
});
$('#apended').click(function(){
alert('click!');
});
When you use .on('click', function (e) {}) function, it works only for existing elements. To handle click event on all selector elements, even for elements which will be added in future, you can use one of these functions:
$(document).on('click', "#appended", function (e) {
// some code code
alert('click!');
});
or:
$("body").delegate("#appended", "click", function () {
// your code goes here
alert('click!');
});
For more information read article about Understanding Event Delegation
Instead of click function You can use :
1.live(old version)
2.delegate
3.on
But , if you want to use click with immutation of delegate function :
var myFn=function(e){
if(e.target.id=='apended'){
alert('click');
}
}
$(document).click(myFn)
Demo :http://jsfiddle.net/abdennour/7cyjV/
I am having a issue with IE, when I open a child window using javascript and attach onerror event on child window I am not getting JS error caught in OnLoad of child window. Below code is working fine in FF.
here is code example:
Parent Page:
<html>
<head>
<script>
function openpage()
{
console.log('opening');
var w = window.open('demo2.html', '_blank');
//without setTimeout onerror is not working
setTimeout(function(){w.onerror = function(msg, file, line) { alert(msg); };}, 3000)
//w.onerror = function(msg, file, line) { alert(msg); };
}
</script>
</head>
<body>
<input type="button" onclick="openpage()" />
</body>
</html>
Child Page code (demo2.html):
<html>
<head>
<script>
//function with error
function fun(var1,var2){aler(var1);}
</script>
</head>
<body onload="fun(2,3)">
<input type="button" onclick="fun(2,3)" />
</body>
</html>
Please suggest a way to capture the JS error generated on child page If above way is not valid/correct.
Thanks,
Pankaj
I render a java script function inside the body tag of my html. After the java script there is a button which calls this function which is declared by the onclick attribute.
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>
<button onclick="f(this)" type="button">A button</button>
The problem is that it says "ReferenceError: f is not defined". What am I doing wrong?
The following seems to work just fine:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>
<body>
<button onclick="f(this)" type="button">A button</button>
</body>
</html>
If you are receiving that error, it is probably from somewhere else other than the code you have provided.
Instead of finding the right location for the script within the body tag I would recommend to use the window.onload, function as well as binding the event yourself using addEventListener() inside the script tags within the head tags were it should be or even in an external .js file.
Give your button an id if you want to use getElementById() to select it, similar to this:
window.onload = function () {
var f = function(caller) {
console.log('test');
};
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
f(this);
});
};
DEMO - Using window.onload() and addEventListener()
My Problem was that I wrote
<script type="text/javascript" src="........." />
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>
but it should be with a </script> tag.
<script type="text/javascript" src="........." ></script>
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>
<script>
function clicky(e){
console.log(e) //the clicked element
}
</script>
<span onClick="clicky(this)">Clickable</span>
In the script above, the console.log(e) will give me the <span> that I clicked on.
Is there any way that I could omit the clicky(this) and still get the element?
It's because I don't want to put (this) all over the document.
Any answer are welcomed.
See this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="foo" style="background:blue; width:100px; height:100px">
<script>
function clicky(e){
console.log(e);
}
var foo = document.getElementById("foo");
foo.onclick = function(e){clicky((e || window.event).target);}
</script>
</body>
</html>
You could try this, not tested though.
var spans = document.getElementsByTagName('span');
spans.attachEvent('click'.'clicky');
function clicky(e){
console.log(e) //the clicked element
}
or
var spans = document.getElementsByTagName('span');
for (i in spans)
{
spans[i].attachEvent('click'.'clicky');
}
function clicky(e){
console.log(e) //the clicked element
}
function clicky(e, elem){
<span onClick="clicky(event, this)">Clickable</span>
Or you could use Prototype or jQuery or any other library. I would improve your life.