Class: Event

Inherits:
Object
  • Object
show all
Defined in:
lib/opal/jquery/event.rb

Overview

Event wraps native jQuery events into a ruby api. Instances of events can be accessed by #to_n.

Event instances should not be created directly, as they are usually created by one of the dom event handlers in Element.

element.on :click do |event|
  puts event
end

# => #<Event:0x0000000>

Usage

Event exposes a slightly different API than jQuery, as Event tries to add some more ruby flavour to the object.

Accessing element triggering event

Unlike jQuery, the context of an event handler is not set to the triggering element. Instead, the element triggering the event can be accessed from the Event instance.

Current Target

To access the current element in the bubbling phase, #element or #current_target can be used which is the same as currentTarget or this from jQuery.

element.on :click do |event|
  puts "element clicked: #{event.element}
end

# => "element clicked: #<Element: [<div>]>

Target

The #target of an event is the actual dom element that triggered the event, and this will be the same element through all phases of event bubbling. This is the same as the event.target jQuery property.

element.on :click do |event|
  puts "actual element: #{event.target}"
end

# => "actual element: #<Element: [<div>]>

Controlling Event Bubbling

Propagation and default behaviour can be controlled on events using #prevent and #stop, which will prevent the browser default and stop event propagation respectively.

element.on :click do |event|
  event.prevent   # prevent browser default
  event.stop      # stop event propagation
end

If you want to trigger both methods, which is usually the case, then #kill can be used as a shorthand.

element.on :click do |event|
  event.kill
  puts event.prevented?
  puts event.stopped?
end

# => true
# => true

Instance Method Summary collapse

Constructor Details

#initialize(native) ⇒ Event


78
79
80
# File 'lib/opal/jquery/event.rb', line 78

def initialize(native)
  @native = native
end

Instance Method Details

#[](name) ⇒ Object


89
90
91
# File 'lib/opal/jquery/event.rb', line 89

def [](name)
  `#@native[name]`
end

#alt_keyObject


182
183
184
# File 'lib/opal/jquery/event.rb', line 182

def alt_key
  `#@native.altKey`
end

#ctrl_keyObject


174
175
176
# File 'lib/opal/jquery/event.rb', line 174

def ctrl_key
  `#@native.ctrlKey`
end

#elementElement Also known as: current_target

Returns the current element in the bubbling cycle of the event. This is not the same as the actual dom event that triggered the event, but is usually the context element the event was registered with, or the target of the css selector used in newer event styles.


103
104
105
# File 'lib/opal/jquery/event.rb', line 103

def element
  `$(#@native.currentTarget)`
end

#key_codeObject


190
191
192
# File 'lib/opal/jquery/event.rb', line 190

def key_code
  `#@native.keyCode`
end

#killObject

Stops propagation and prevents default action.

See Also:

  • Event.{{#prevent}
  • Event.{{#stop}

150
151
152
153
# File 'lib/opal/jquery/event.rb', line 150

def kill
  stop
  prevent
end

#meta_keyObject


178
179
180
# File 'lib/opal/jquery/event.rb', line 178

def meta_key
  `#@native.metaKey`
end

#page_xObject

Keyboard/Mouse/Touch


158
159
160
# File 'lib/opal/jquery/event.rb', line 158

def page_x
  `#@native.pageX`
end

#page_yObject


162
163
164
# File 'lib/opal/jquery/event.rb', line 162

def page_y
  `#@native.pageY`
end

#preventObject Also known as: prevent_default

Prevent this event from triggering its default browser behaviour.


125
126
127
# File 'lib/opal/jquery/event.rb', line 125

def prevent
  `#@native.preventDefault()`
end

#prevented?Boolean Also known as: default_prevented?

Returns true if this event has had its default browser behaviour prevented, false otherwise.


120
121
122
# File 'lib/opal/jquery/event.rb', line 120

def prevented?
  `#@native.isDefaultPrevented()`
end

#shift_keyObject


186
187
188
# File 'lib/opal/jquery/event.rb', line 186

def shift_key
  `#@native.shiftKey`
end

#stopObject Also known as: stop_propagation

Stop further propagaion of this event.


138
139
140
# File 'lib/opal/jquery/event.rb', line 138

def stop
  `#@native.stopPropagation()`
end

#stop_immediateObject Also known as: stop_immediate_propagation


142
143
144
# File 'lib/opal/jquery/event.rb', line 142

def stop_immediate
  `#@native.stopImmediatePropagation()`
end

#stopped?Boolean Also known as: propagation_stopped?

Returns true if the propagation/bubbling of this event has been stopped, false otherwise.


133
134
135
# File 'lib/opal/jquery/event.rb', line 133

def stopped?
  `#@native.isPropagationStopped()`
end

#targetElement

Returns the actual element that triggered the dom event.


112
113
114
# File 'lib/opal/jquery/event.rb', line 112

def target
  `$(#@native.target)`
end

#to_nJSObject

Returns native javascript event created by jQuery.


85
86
87
# File 'lib/opal/jquery/event.rb', line 85

def to_n
  @native
end

#touch_xObject


166
167
168
# File 'lib/opal/jquery/event.rb', line 166

def touch_x
  `#@native.originalEvent.touches[0].pageX`
end

#touch_yObject


170
171
172
# File 'lib/opal/jquery/event.rb', line 170

def touch_y
  `#@native.originalEvent.touches[0].pageY`
end

#typeObject


93
94
95
# File 'lib/opal/jquery/event.rb', line 93

def type
  `#@native.type`
end

#whichObject


194
195
196
# File 'lib/opal/jquery/event.rb', line 194

def which
  `#@native.which`
end