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

Returns a new instance of Event.

Parameters:

  • native (JSObject) —

    native jquery/javascript event



80
81
82
 
# File 'lib/opal/jquery/event.rb', line 80

def initialize(native)
  @native = native
end

Instance Method Details

#[](name) ⇒ Object 



91
92
93
 
# File 'lib/opal/jquery/event.rb', line 91

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

#alt_key ⇒ Object 



192
193
194
 
# File 'lib/opal/jquery/event.rb', line 192

def alt_key
  `#@native.altKey`
end

#ctrl_key ⇒ Object 



184
185
186
 
# File 'lib/opal/jquery/event.rb', line 184

def ctrl_key
  `#@native.ctrlKey`
end

#element ⇒ Element 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.

Returns:



105
106
107
 
# File 'lib/opal/jquery/event.rb', line 105

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

#key_code ⇒ Object 



200
201
202
 
# File 'lib/opal/jquery/event.rb', line 200

def key_code
  `#@native.keyCode`
end

#kill ⇒ Object

Stops propagation and prevents default action.

See Also:

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


152
153
154
155
 
# File 'lib/opal/jquery/event.rb', line 152

def kill
  stop
  prevent
end

#location ⇒ Object 



180
181
182
 
# File 'lib/opal/jquery/event.rb', line 180

def location
  `#@native.originalEvent.location`
end

#meta_key ⇒ Object 



188
189
190
 
# File 'lib/opal/jquery/event.rb', line 188

def meta_key
  `#@native.metaKey`
end

#page_x ⇒ Object

Keyboard/Mouse/Touch



160
161
162
 
# File 'lib/opal/jquery/event.rb', line 160

def page_x
  `#@native.pageX`
end

#page_y ⇒ Object 



164
165
166
 
# File 'lib/opal/jquery/event.rb', line 164

def page_y
  `#@native.pageY`
end

#prevent ⇒ Object Also known as: prevent_default

Prevent this event from triggering its default browser behaviour.



127
128
129
 
# File 'lib/opal/jquery/event.rb', line 127

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.

Returns:

  • (Boolean) 


122
123
124
 
# File 'lib/opal/jquery/event.rb', line 122

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

#shift_key ⇒ Object 



196
197
198
 
# File 'lib/opal/jquery/event.rb', line 196

def shift_key
  `#@native.shiftKey`
end

#stop ⇒ Object Also known as: stop_propagation

Stop further propagaion of this event.



140
141
142
 
# File 'lib/opal/jquery/event.rb', line 140

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

#stop_immediate ⇒ Object Also known as: stop_immediate_propagation 



144
145
146
 
# File 'lib/opal/jquery/event.rb', line 144

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.

Returns:

  • (Boolean) 


135
136
137
 
# File 'lib/opal/jquery/event.rb', line 135

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

#target ⇒ Element

Returns the actual element that triggered the dom event.

Returns:



114
115
116
 
# File 'lib/opal/jquery/event.rb', line 114

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

#to_n ⇒ JSObject

Returns native javascript event created by jQuery.

Returns:

  • (JSObject) 


87
88
89
 
# File 'lib/opal/jquery/event.rb', line 87

def to_n
  @native
end

#touch_count ⇒ Object 



168
169
170
 
# File 'lib/opal/jquery/event.rb', line 168

def touch_count
  `#@native.originalEvent.touches.length`
end

#touch_x(index = 0) ⇒ Object 



172
173
174
 
# File 'lib/opal/jquery/event.rb', line 172

def touch_x(index = 0)
  `#@native.originalEvent.touches[#{index}].pageX` if index < touch_count
end

#touch_y(index = 0) ⇒ Object 



176
177
178
 
# File 'lib/opal/jquery/event.rb', line 176

def touch_y(index = 0)
  `#@native.originalEvent.touches[#{index}].pageY` if index < touch_count
end

#type ⇒ Object 



95
96
97
 
# File 'lib/opal/jquery/event.rb', line 95

def type
  `#@native.type`
end

#which ⇒ Object 



204
205
206
 
# File 'lib/opal/jquery/event.rb', line 204

def which
  `#@native.which`
end