#事件流
Event capture: Capture of elements triggered by document to event
Event bubbling: triggered by the element triggering the event to the superior
#事件处理程序
HTML Event handlers
<type= "button" value= "pushbutton" onclick= "alert (' Hello World ') "></input>Or
<Scripttype= "Text/javascript"> functionShowmes () {alert ('Hello World'); }</Script><Body> <inputtype= "button"value= "button"onclick= "Showmes ()"></input> </Body>
DOM0 Level Event handlers
<Scripttype= "Text/javascript">document.getElementById ('btn'). onclick=function() {alert ('Hello World'); } </Script><Body> <inputtype= "button"value= "button"ID= "BTN"></input> </Body>
#DOM2级事件处理程序
Two methods are defined:
AddEventListener () Add Event
RemoveEventListener () removing events
Three parameter settings, event name, processing method (function), Boolean-----bubbling (false), or capture (true)
Btn3.addeventlistener (' click ', Showmes,false);Attention:
1, if the event name is on, you need to remove the on. OnClick-----> Click,onmouseover-----> mouseover etc;
2, false compatible with all browser-----event bubbling Stream
3. Events added through AddEventListener can only be removed by RemoveEventListener. ---parameters are the same
Btn.removeeventlistener (parameter);//parameter must be the same as Btn.addeventlistener parameter, delete event
4:dom0-level and dom2-level event handlers can bind multiple functions to an event, which executes each function in the binding order when the event is triggered.
Btn3.addeventlistener (' click ', Showmes,false);
Btn3.addeventlistener (' Click ', Showmes,function () {alert (this.value);},false);
In particular:<inputtype= "button"value= "button"ID= "BTN"></input> <Scripttype= "Text/javascript"> functionMes () {alert ('Hello World'); } varbtn=document.getElementById ('btn'); Btn.addeventlistener ('Click', Mes,false); Btn.addeventlistener ('mouseover',function() {alert ( This. Type); },false); </Script>
#什么是事件对象? An object is generated when events on the DOM are triggered
Events Object Event
Event Object Properties in ①dom
(1), the Type property is used to get event types
(2), the target property is used to get the event target
(3), Stoppropagation () method to block event bubbling
(4), Preventdefault () method to block the default behavior of an event
If a DIV has a button,button and div bound to the Click event, and if the event bubbles, then when the button is clicked, the button's handler is triggered first, then the DIV's handler function is triggered. (from Inside Out)
If sometimes you don't want to bubble up, that is, you don't want div events to be triggered, you need to block event bubbling. Stoppropagation () method
If you need to block the default property jump for a tag, you can use the default behavior of the Block event Preventdefault () method
Dom Event Quest
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
