Difference Between Onblur and Onchange Attribute in HTML

What is the difference between onBlur and onChange attribute in HTML?

The onBlur event is fired when you have moved away from an object without necessarily having changed its value.

The onChange event is only called when you have changed the value of the field and it loses focus.

You might want to take a look at quirksmode's intro to events. This is a great place to get info on what's going on in your browser when you interact with it. His book is good too.

How to use onblur and onchange in javascript

Try removing "javascript:" from the attributes 'onchange' and 'onblur' (http://www.w3schools.com/jsref/event_onblur.asp). Your code looks okay otherwise, use F12 option (developer console) in the browser to debug.

how to call 'onchange' and 'onblur' js event name in same input?

Please see below code.

<html>
<bods >    <input type="text" value="here is a text field" onblur="alert('Blur Event!')" onchange="alert('Change Event!')"  >
</body></html>

html onchange/onblur compatibility

All browsers should support these events pretty decently if you're only using them in text boxes. If you check out the QuirksMode event compatibility tables, you'll see that IE has some issues with the change event in radio buttons and check boxes.

If you're not very familiar with JavaScript events in browsers, you'll find that the event model is a mess thanks to the fact that IE decided to do things differently from the standard. To overcome this problem, you should be using a JavaScript framework like jQuery, YUI, Dojo, MooTools, ExtJS, or Closure. These frameworks smooth out the differences so you'll (almost) never have to deal with the differences & bugs in the different browsers. There is a great article on CodingHorror explaining why you should consider using a JavaScript framework if you plan on using JavaScript in your site that you should read if you're curious as to why you should use a JavaScript framework.

Also, if you're unfamiliar with browser events entirely, make sure you understand the difference between onchange and onblur.

In React, what's the difference between onChange and onInput?

It seems there is no real difference

React, for some reason, attaches listeners for Component.onChange to the DOM element.oninput event. See the note in the docs on forms:

React docs - Forms

There are more people that are surprised by this behavior. For more details, refer to this issue on the React issue tracker:

Document how React's onChange relates to onInput #3964

Quote from the comments on that issue:

I don't understand why React chose to make onChange behave like onInput does. As fas as I can tell, we have no way of getting the old onChange behaviour back. Docs claim it's a "misnomer" but not it isn't really, it does fire when there's a change, just not until the input also loses focus.
For validation, sometimes we don't want to show validation errors until they're done typing. Or maybe we just don't want a re-render on every keystroke. Now the only way to do that is with onBlur but now we also need to check that the value has changed manually.
It's not that big of a deal, but it seems to me like React threw away a useful event and deviated from standard behaviour when there was already an event that does this.

I agree 100% with the comment... But I guess changing it now would bring more problems than it solves since so much code had already been written that relies on this behavior.

React is not part of the official Web API collection

Even though React is built on top of JS, and has seen a huge adoption rate, as a technology React exists to hide a whole lot of functionality under its own (fairly small) API. Once area where this is obvious is in the event system, where there's a lot going on under the surface that's actually radically different from the standard DOM event system. Not just in terms of which events do what, but also in terms of when data is allowed to persist at what stage of the event handling. You can read more about that here:

React Event System

Fire onblur event before onchange event

The reason onchange fires first is that once the element loses focus (i.e. 'blurs') the change is usually complete (I say usually because a script can still change the element without user interaction).
For those elements that need onblur handled first, you can disable the onchange handler and fire the onchange (or even a custom event) from the onblur handler. This will ensure the correct order even though it is more work. To detect change, you can use a state variable for that field.

As a general remark though, the need for such synchronicity is a sign that the approach you are using to solve whatever problem you are solving might need more work even though sometimes it cannot be avoided. If you are sure this is the only way, try one of these methods!

EDIT: Just to elaborate on the last point, you would have to follow some assumptions about your event model. Are you assuming that each change event is followed by a blur and goes unprocessed otherwise, or would you like to process each change but those that are followed by a blurget further processing after whatever onblur does with them? In any case if you want to enforce the order the handlers would need access to a common resource (global variable, property, etc.). Are there other event types you might want to use? (input?). Finally, this link has some details for the change event for Mozilla browsers:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change.
The third 'bullet' addresses the issue of event order.

Both onBlur and onChange not working with input type=text

try this

<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
<div id="other">
Trigger the handler
</div>
The event handler can be bound to the first input field:
$( "#target" ).blur(function() {
alert( "Handler for .blur() called." );
});

check this links for your reference http://api.jquery.com/blur/

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_blur_alert

Hope this help

onblur will not work but onchange does work?

You have a typo in your code, just replace onBlur by onblur.

document.getElementById('name').onblur = function() {  if (document.getElementById('name').value === '') {    document.getElementById('name_error').innerHTML = 'The name field is required';  }}

<label for="name" id="name_label">Name<span class="red">* </span></label><br><span id="name_error" class="hint"></span><input type="text" name="name" id="name" pattern="[A-Za-z0-9 ]" placeholder="Full name please" maxlength="25" autofocus required>