javascript-events | 易学教程

Why not use javascript handlers on the body element?

阅读更多关于 Why not use javascript handlers on the body element?

问题 As an answer to the question of 'How do you automatically set the focus to a textbox when a web page loads?', Espo suggests using <body onLoad="document.getElementById('<id>').focus();"> Ben Scheirman replies (without further explanation): Any javascript book will tell you not to put handlers on the body element like that Why would this be considered bad practice? In Espos answer, an 'override' problem is illustrated. Is this the only reason, or are there any other problems? Compatibility

Disabling mouse scrolling

阅读更多关于 Disabling mouse scrolling

问题 I have a page with a textbox in it. When I scroll the textbox to the bottom, the document will scroll after it. How to disable mouse scrolling for the document but enable scrolling for the textbox when mouse is over textbox? I only need to disable mouse scroll and not window scrollbars. The page has a fixed size and there will only be scrollbars when the browser window is not maximized. The document has a 800x600 px size and should fit for most users I think. I'm using JavaScript with jQuery.

dynamically change script src client-side

阅读更多关于 dynamically change script src client-side

问题 I have an HTML page which contains: a <select> dropdown with 3 options with an onchange event to a JS function a DIV holder with a script element inside: Here's the code: <select onChange="getData(this.value);"> <option value="-">Limba/Language</option> <option value="ro">Romana</option> <option value="en">Engleza</option> </select> <div id="output"> <script id="widget" type="text/javascript" src="js1.js"></script> </div> And here's the JS function: <script type="text/javascript"> function

HTML5 Audio events not triggering on Chrome

阅读更多关于 HTML5 Audio events not triggering on Chrome

问题 I'm trying to have a load progress bar in my game, and I have a function assigned to the onloadeddata attribute on my audio, but it is not triggering in Chrome. It works in other browsers. I also tried many other events such as oncanplay, oncanplaythrough, onloadedmetadata, etc. None of them trigger. I think it might have to do with the caching. Tried looking around and there was some reports of this from 2-3 years ago but nothing recent. Is there any other way I could detect if the audio is

Loading scripts dynamically

阅读更多关于 Loading scripts dynamically

问题 I'm loading a few YUI scripts dynamically in my code in response to an Ajax request. The DOM and the page is fully loaded when the request is made - it's a response for an user event. I add the tag to head, as children. But I stumbled in a few problems: I add two YUI scripts hosted at the Yahoo! CDN and an inlined script of my own responsible for creating object, adding event listeners and rendering the YUI widgets. But I when my script run the YUI scripts are not loaded yet giving me errors

Emulate jQuery “on” with selector in pure javascript

阅读更多关于 Emulate jQuery “on” with selector in pure javascript

问题 I would emulate in pure javascript the main functionality of jQuery .on( events , selector , data) method. For example $(document).on('click','.button',function() { console.log("jquery onclick"); }); I thought it was enough make something like this document.addEventListener('click',function(e) { if(e.target.className == 'button2') { console.log("It works"); } }); However when I have this html structure: <button class="button2">Hello <span>World</span></button> my script doesn't works when the

JQuery - use element with DOMNodeInserted

阅读更多关于 JQuery - use element with DOMNodeInserted

问题 For sure this question is very easy, but I just cannot figure this out. I'm using DOMNodeInserted event to detect when a new element is inserted. I don't know how to use the current element, for example to get it's parent id. Now I have the function like this: document.addEventListener("DOMNodeInserted", function(event){ var element = event.target; if (element.tagName == 'DIV') { if (element.id == 'ndiv_3-1VTSTHR') { alert($('#ndiv_3-1VTSTHR').parent().get(0).tagName); } } }); This works, but

How do I create a custom event class in Javascript?

阅读更多关于 How do I create a custom event class in Javascript?

问题 How do I create a custom event class similar to ActionScript? What I mean by that is a class that I can use to fire off my own events, send the necessary data. I don't wanna use third-party libraries like YUI or jQuery to do it. My goal is to be able to send a event that looks like this. document.addEventListener("customEvent", eventHandler, false); function eventHandler(e){ alert(e.para1); } document.dispatchEvent(new CustomEvent("customEvent", para1, para2)); Please no third-party library

HTML <input type='file'> File Selection Event

阅读更多关于 HTML File Selection Event

问题 Let's say we have this code: <form action='' method='POST' enctype='multipart/form-data'> <input type='file' name='userFile'><br> <input type='submit' name='upload_btn' value='upload'> </form> which results in this: When the user clicks the 'Browse...' button, a file search dialog box is opened: The user will select the file either by double-clicking the file or by clicking the 'Open' button . Is there a Javascript Event that I can use to be notified after after the file is selected? 回答1:

Race conditions with JavaScript event handling?

阅读更多关于 Race conditions with JavaScript event handling?

问题 We understand that JavaScript is single threaded, but we want to confirm our understanding of asynchronous event handling in JavaScript. More importantly, we want to confirm we're not exposed to potential race conditions. Conceptually, our mobile app works like this: We invoke function foo when a mobile page is loaded. At the end of foo , we use setTimeout to invoke foo again (with one second delay) if a counter is greater than 0 . If the counter hits 0 , we load a new page. The timeout is