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_key ⇒ Object 



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

def alt_key
  `#@native.altKey`
end

#ctrl_key ⇒ Object 



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

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.



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

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

#key_code ⇒ Object 



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

def key_code
  `#@native.keyCode`
end

#kill ⇒ Object

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_key ⇒ Object 



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

def meta_key
  `#@native.metaKey`
end

#page_x ⇒ Object

Keyboard/Mouse/Touch



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

def page_x
  `#@native.pageX`
end

#page_y ⇒ Object 



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

def page_y
  `#@native.pageY`
end

#prevent ⇒ Object 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_key ⇒ Object 



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

def shift_key
  `#@native.shiftKey`
end

#stop ⇒ Object 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_immediate ⇒ Object 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

#target ⇒ Element

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_n ⇒ JSObject

Returns native javascript event created by jQuery.



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

def to_n
  @native
end

#touch_x ⇒ Object 



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

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

#touch_y ⇒ Object 



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

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

#type ⇒ Object 



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

def type
  `#@native.type`
end

#which ⇒ Object 



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

def which
  `#@native.which`
end