A very good question. A LOT of people misuse bindings and listeners in JSF. I think that they have been getting their information from really old documents dating from before JSF became ready for production.
A value reference is a read/write (or sometimes read-only) binding to a property on a backing bean or on an object accessible from a backing bean.
A JSF "binding" is a binding of the actual JSF UI component to a property.
In over 99 cases out of 100, you would use the "value=" attribute, since it's only the control's backing property value you care about dealing with in the backing bean. In the 100th case, you have a need to dynamically modify the JSF UI component tree in ways that cannot be done with static view definitions and attributes. For example, I might want to insert an "extension" textinput control after a telephone number textinput. So I'd do something like this:
In the backing bean code, JSF will set the myBean.telNumberControl value to reference the telnumber control's HTMLInputText UIComponent element. I could then dynamically construct a second HTMLInputText to represent the extension and chain it in the UIComponent tree to follow the telnumber control.
That was a very contrived example, however. Only newbies would actually do that, since you can do that particular task in a much cleaner, simpler way:
Where "inputsPhoneExt" is a binary property used to indicate whether the phone extension control will appear on the web page.
The other similar newbie mistake is to attempt to manipulate the UIComponent tree to provide a variable number of component elements. That can usually be done more simply by using the h:dataTable (for 2-dimensional tabular layouts) or ui:repeat (for less-organized layouts).
An IDE is no substitute for an Intelligent Developer.