Home > Developer > JavaScript
There are four main methods of event binding for JavaScript (one that works in IE but does not guarantee other browsers):
[Note: OnXxx for an event, fun for a function,domid for a DOM object Id,event type is shown in the appendix below. ]
1, in the DOM, directly with onxxx= "fun ();" To bind
2, in JavaScript code with the DOM object. Onxxx=fun Binding
3, with the DOM object. attachevent ("OnXXX", fun) to bind
4, with <script for= "Domid" event= "OnXXX" >fun ();</script> to bind
<title>event test</title>
<body onload= "init ()" >
<!--binding method one: In the element, the binding methods are set by OnXxx (event)-->
<button id= "BTN1" onclick= "display ()" > Binding mode One </button>
<!--binding Method Two: In JavaScript code, the OnXxx (event) of the element is set to bind methods by obtaining the element-->
<button id= "BTN2" > Binding mode Two </button>
<!--bind Three: Bind event (ie4+) by for, event as element. For the following is element id,event is a specific event-->
<button id= "BTN3" > Binding mode three </button>
<!--binding event (ie5+) for elements by Attachevent. The first argument is the event name, and the second parameter is the method of the binding-->
<button id= "BTN4" > Binding mode Four </button>
</body>
<script type= "text/web Effects" >
function init () {
document.getElementById ("Btn2"). onclick = display;//for button2 binding events
document.getElementById ("Btn4"). Attachevent ("onclick", display);//For Button4 binding event
}
function display (event) {
var targ;//an object reference that triggers an event
if (!event) {
var event = window.event;//Get Current event (IE)
}
if (event.target) {//ie has no target
Targ = Evente.target;
else if (event.srcelement) {//apply to IE
Targ = event.srcelement;
}
To manipulate an object that triggers an event
Alert (targ.tagname+ "-" +targ.id+ "-" +event.x+ "-" +event.offsetx ");
targ.disabled= "Disabled";
}
<script>
<script for= "Btn3" event= "onclick" >
Display ();//For Button3 binding event
<script>
Instance
var $=function () {
}
$.isie= navigator.appname = = ' Microsoft Internet Explorer ';
if ($.isie) {
$.bind=function (Obj,eve,fun) {
if (Obj.arr) {
}else{
Obj.arr=[];
}
if (obj.arr.length>0) {
for (Var i=0;i<obj.arr.length;i++) {
if (Obj.arr[i].e==eve) {
Obj.arr[i].f.push (fun);
Break
}
}
}else{
Obj.arr.push ({E:eve,f:[fun]});
}
var addeventtoobj=function (inx) {
obj["on" +obj.arr[inx].e]=function () {
for (Var i=0;i<obj.arr[inx].f.length;i++)
Obj.arr[inx].f[i] ();
}
}
for (Var i=0;i<obj.arr.length;i++) {
Addeventtoobj (i);
}
}
}else{
$.bind = function (obj,eve,fun) {
Obj.addeventlistener (Eve,fun,false);
}
}
$.bind (window, "Load", function () {alert (' x1 ')})
$.bind (window, "Load", function () {alert (' x2 ')})
$.bind (window, "Load", function () {alert (' x3 ')})
$.bind (window, "Load", function () {alert (' x4 ')})
$.bind (window, "Load", function () {alert (' x5 ')})
$.bind (window, "Load", function () {alert (' x6 ')})
$.bind (window, "Load", function () {alert (' X7 ')})
$.bind (window, "Load", function () {alert (' x8 ')})
IE Event Properties:
Srcelement: A reference to a Window object, Document object, or Element object that generates an event.
Toelement: For the Mouseo Tutorial ver and mouseout events, this property refers to the element that moves the mouse.
X,y: The x-coordinate and y-coordinate of the location where the event occurs, relative to the most inner containment element that is dynamically positioned with the CSS
Cancelbubble: If the event handle wants to prevent an event from propagating to an containment object, you must set the property to True.
Fromelement: For MouseOver and mouseout events, fromelement references the element that moves the mouse.
KeyCode: For the KeyPress event, this property declares the Unicode character code generated by the keystroke. For the KeyDown and KeyUp events, it specifies the virtual keyboard code for the keystroke. The virtual keyboard code may be related to the layout of the keyboard used.
Offsetx,offsety: The location where the event occurred is the x-coordinate and y-coordinate of the coordinate system of the event source element.
ReturnValue: If this property is set, its value is higher than the return value of the event handle. Set this property to Fasle to cancel the default action of the source element where the event occurred.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
