| _target and _currentTarget When an event is bound to an element that contains other elements it's sometimes useful to know the inner element that triggered the event. In this example, a “click” handler is bound to the “outer” division which contains an “inner” division. Try clicking on both outer and inner and see what's returned for _target and _currentTarget. As you can see, _target is the innermost element where the event was triggered while _currentTarget is the element where the event handler was bound. If available, MiServer will populate the _target and _currentTarget fields on event callbacks. |
:class TargetsExample: MiPageSample
⍝
⍝
∇ Compose;p
:Access Public
(sp←Add _.StackPanel'' '').Horizontal←1
:With sp.Items[1] ⍝
(outer←'outer'Add _.div'outer').style←'background-color:blue;height:200px;width:200px;color:white;'
('inner'outer.Add _.div'inner').style←'background-color:yellow;height:50%;width:50%;top:10%;margin:0 auto;position:relative;color:black;'
Add _.Style'#outer,#inner'('font-size' '20px')
style←'width:300px;'
'output'Add _.span
:EndWith
Add _.Handler'#outer' 'click'
:With sp.Items[2] ⍝
Add MarkdownFollows
⍝
⍝
⍝
⍝
⍝
⍝
⍝
⍝
⍝
⍝
:EndWith
∇
∇ r←APLJax
:Access Public
r←'#output'Replace↑('_target = ',_target)('_currentTarget = ',_currentTarget)
∇
:endclass