Common event Model 1. is binding on HTML pages
<button id="button" onclick="function();">按钮</button>
2. Binding event handling in JavaScript script files
document.getElementById(‘button‘function;
The event model in IE 1. Use the script for binding (this binding is seldom used)
<script for="btn1" event="onclick" type="text/javascript"> alert("您单击了我");</script>、
2. Binding using the Attachevent method
document.getElementById(‘btn1‘).attachEvent("onclick", test);//为id为btn1的按钮绑定事件,单击按钮会触发test函数;
Dom's event model
Use AddEventListener ("event", call function, which stage of event propagation (True/false))
When True indicates the listening capture phase, false indicates the listener bubbling phase
document.getElementById(‘btn1‘).addEventListener("click"true);//为id为btn1的按钮绑定事件,单击按钮会触发test函数,并且只监听其捕获阶段;
To access the event object:
- The event object of IE is an implicit global object. This object is created when the event occurs, and the secondary object has many properties
- Unlike the IE event model, the DOM event model automatically creates an event object and implicitly passes the object as the first argument to the event handler function.
In addition, there are events bubbling in IE:
event.cancelBubble=true;//取消IE的事件冒泡默认是false
IE redirection events (event forwarding);
document.getElementById(‘btn1‘).fireEvent("onCliclk"event)//将事件传给ID为btn1的按钮。
Capturing events
target.setCapture();//设置target对象捕获改时间//设置target对象释放捕获。
Event propagation in the DOM
DOM model events propagate in two directions, and the first stage is the event capture phase, propagating from the top-level object to the event's target object. The second stage is the bubbling phase, which propagates from the target object to the top level object;
event.stopPropagation()//阻值event事件传播
Cancel default behavior
event.preventDefault();
JavaScript summary JavaScript's IE event and DOM event model