From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../comparativo_entre_event_targets/index.html | 167 +++++++++++++++++++++ files/pt-br/web/api/event/currenttarget/index.html | 129 ++++++++++++++++ .../web/api/event/defaultprevented/index.html | 79 ++++++++++ files/pt-br/web/api/event/event/index.html | 69 +++++++++ files/pt-br/web/api/event/index.html | 146 ++++++++++++++++++ files/pt-br/web/api/event/initevent/index.html | 137 +++++++++++++++++ files/pt-br/web/api/event/istrusted/index.html | 57 +++++++ .../pt-br/web/api/event/preventdefault/index.html | 113 ++++++++++++++ files/pt-br/web/api/event/srcelement/index.html | 74 +++++++++ .../api/event/stopimmediatepropagation/index.html | 99 ++++++++++++ .../pt-br/web/api/event/stoppropagation/index.html | 93 ++++++++++++ files/pt-br/web/api/event/target/index.html | 69 +++++++++ files/pt-br/web/api/event/type/index.html | 60 ++++++++ 13 files changed, 1292 insertions(+) create mode 100644 files/pt-br/web/api/event/comparativo_entre_event_targets/index.html create mode 100644 files/pt-br/web/api/event/currenttarget/index.html create mode 100644 files/pt-br/web/api/event/defaultprevented/index.html create mode 100644 files/pt-br/web/api/event/event/index.html create mode 100644 files/pt-br/web/api/event/index.html create mode 100644 files/pt-br/web/api/event/initevent/index.html create mode 100644 files/pt-br/web/api/event/istrusted/index.html create mode 100644 files/pt-br/web/api/event/preventdefault/index.html create mode 100644 files/pt-br/web/api/event/srcelement/index.html create mode 100644 files/pt-br/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/pt-br/web/api/event/stoppropagation/index.html create mode 100644 files/pt-br/web/api/event/target/index.html create mode 100644 files/pt-br/web/api/event/type/index.html (limited to 'files/pt-br/web/api/event') diff --git a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html b/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html new file mode 100644 index 0000000000..e9b2004719 --- /dev/null +++ b/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html @@ -0,0 +1,167 @@ +--- +title: Comparativo entre Event Targets +slug: Web/API/Event/Comparativo_entre_Event_Targets +tags: + - DOM + - Event + - event target +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +
{{ ApiRef() }}
+ +

Event targets

+ +

É facil se confundir sobre o tipo de alvo (target) que deseja-se examinar ao criar um manipulador de eventos (event handler). Este artigo se propõe a esclarecer o uso da propriedade target.

+ +

Há 5 tipos de targets a se considerar:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDefinido emObjetivo
event.targetDOM Event Interface +

O elemento do DOM à esquerda da chamada que disparou este evento, por exemplo:

+ + 
+element.dispatchEvent(event)
+
+
event.currentTargetDOM Event InterfaceO EventTarget do qual o EventListeners está sendo atualmente processado. Logo que a captura e a subida do evento ocorre a mudança deste valor.
event.relatedTargetDOM MouseEvent InterfaceIdentifica um alvo secundário para o evento.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Se o evento foi redirecionado por alguma outra razão senão o cruzamento de uma fronteira anônima, este evento será colocado no alvo antes que o redirecionamento ocorra. por exemplo, eventos do mouse são redirecionados à seus elementos pais quando acontecem sobre nós de texto ({{ Bug("185889") }}), e neste caso .target mostrará o nó pai e .explicitOriginalTarget mostrará o nó texto. Diferente de .originalTarget, .explicitOriginalTarget nunca irá conter um conteúdo anônimo.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} O alvo original do evento, antes de qualquer redirecionamento. Veja Anonymous Content#Event_Flow_and_Targeting para mais detalhes.
+ +

Uso de explicitOriginalTarget e originalTarget

+ +

TODO: Disponível apensas em navegadores Mozilla-based?

+ +

TODO: Adequado apenas para desenvolvedores de extensões?

+ +

Exemplos

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Comparison of Event Targets</title>
+    <style>
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    </style>
+</head>
+<body>
+    <table>
+    <thead>
+        <tr>
+            <td class="standard">Original target dispatching the event <small>event.target</small></td>
+            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
+            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
+        </tr>
+    </thead>
+    <tr>
+        <td id="target"></td>
+        <td id="currentTarget"></td>
+        <td id="relatedTarget"></td>
+        <td id="explicitOriginalTarget"></td>
+        <td id="originalTarget"></td>
+    </tr>
+</table>
+<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
+<script>
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+</script>
+</body>
+</html>
+ +

Uso de target e relatedTarget

+ +

A propriedade relatedTarget do evento de mouseover mantém o nó de onde o mouse estava sobre anteriormente. Para o evento de mouseout, mantém o nó para onde o mouse se moveu.

+ + + + + + + + + + + + + + + + + + + +
Tipo de Eventoevent.targetevent.relatedTarget
mouseoverO EventTarget do qual o dispositivo apontador entrou.O EventTarget do qual o dispositivo apontador saiu.
mouseoutO EventTarget do qual o dispositivo apontador saiu.O EventTarget do qual o dispositivo apontador entrou.
+ +

TODO: Necessário descrição complemento sobre eventos de dragenter e dragexit.

+ +

Exemplo

+ +
<hbox id="outer">
+  <hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
+</hbox>
+
diff --git a/files/pt-br/web/api/event/currenttarget/index.html b/files/pt-br/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..e74a58fb61 --- /dev/null +++ b/files/pt-br/web/api/event/currenttarget/index.html @@ -0,0 +1,129 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - CompatibilidadeEntreNavegadores + - DOM + - Gecko + - Propriedade +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Identifica o alvo atual para o evento quando o event percorre o DOM. O currentTarget sempre se refere ao elemento associado ao event handler, ao invés do event.target que identifica o elemento ao qual o evento ocorreu.

+ +

Exemplo

+ +

event.currentTarget é bom para ser usado quando nós queremos associar o mesmo event handler para vários elementos.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  console.log(e.currentTarget);
+  // Quando essa função é usada como um event
+  // handler: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  // console: print the clicked <p> element
+  ps[i].addEventListener('click', hide, false);
+}
+// console: print <body>
+document.body.addEventListener('click', hide, false);
+
+// Clique e faça os parágrafos desaparecerem
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}{{Spec2("DOM3 Events")}} 
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Definição incial
+ +

Compatibilidade  dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supote básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}10.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supote básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}10.0
+
+ +

[1] Do Internet Explorer 6 até o 8, o modelo do event é diferente. Event listeners estão acoplados com o {{domxref("EventTarget.attachEvent")}} método não padronizado. Neste modelo não há um equivalente para event.currentTarget e this é um objeto global. Uma solução para simular o event.currentTarget é envolver seu handler em uma função e chamando-a usando o Function.prototype.call com o elemento sendo o primeiro argumento. Desta forma, this será o valor esperado.

+ +

Veja também

+ +

Comparativo dos Event Targets

diff --git a/files/pt-br/web/api/event/defaultprevented/index.html b/files/pt-br/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..d0407443c7 --- /dev/null +++ b/files/pt-br/web/api/event/defaultprevented/index.html @@ -0,0 +1,79 @@ +--- +title: Event.defaultPrevented +slug: Web/API/Event/defaultPrevented +translation_of: Web/API/Event/defaultPrevented +--- +

{{ ApiRef("DOM") }}

+ +

Resumo

+ +

Retorna um booleano que indica se ou não {{ domxref("event.preventDefault()") }} foi chamado no evento.

+ +
Nota: Você deve usar isso em vez de a não-padrão, método desatualizado getPreventDefault()  (ver {{ bug(691151) }}).
+ +

Sintaxe

+ +
bool = event.defaultPrevented
+ +

Exemplo

+ +
 if (e.defaultPrevented) {
+   /* o padrão foi impedido */
+ }
+
+ +

Compatibilidade do navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(18) }}{{ CompatGeckoDesktop("6.0") }}{{ CompatIE(9.0) }}{{ CompatOpera(11.0) }}{{ CompatSafari("5.0") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatSafari(5.0) }}
+
+ +

Especificação

+ + diff --git a/files/pt-br/web/api/event/event/index.html b/files/pt-br/web/api/event/event/index.html new file mode 100644 index 0000000000..40bc836e77 --- /dev/null +++ b/files/pt-br/web/api/event/event/index.html @@ -0,0 +1,69 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

O Event() cria uma nova {{domxref("Event")}}.

+ +

Sintaxe

+ +
 event = new Event(typeArg, eventInit);
+ +

Valores

+ +
+
typeArg
+
É uma {{domxref("DOMString")}} representa o nome do evento.
+
eventInit{{optional_inline}}
+
+ +
+
É um dicionário EventInit, tendo os seguintes campos: + +
    +
  • "bubbles", opcional e false por default, do tipo {{jsxref("Boolean")}}, indica se o evento é bubbles ou não.
    • +
  • "cancelable", opcional e false por default, do tipo {{jsxref("Boolean")}}, indica se o evento pode ser cancelado ou não.
    • +
+
+
+ +

Exemplo

+ +
// criar um evento com bubbles true e que não pode ser cancelado
+
+var ev = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(ev);
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Definição inicial.
+ +

Compatibilidade de browser

+ + + +

{{Compat("api.Event.Event")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/event/index.html b/files/pt-br/web/api/event/index.html new file mode 100644 index 0000000000..7fe5549c48 --- /dev/null +++ b/files/pt-br/web/api/event/index.html @@ -0,0 +1,146 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

A interface de eventos representa qualquer evento de DOM. Ele contém propriedades comuns e métodos para qualquer evento.

+ +

Um monte de outras interfaces herdam, diretamente ou não, a partir desta interface base:

+ +
+ +
+ +

Construtor

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Cria um objeto Event.
+
+ +

Propriedades

+ +

Esta interface não herda nenhuma propriedade.

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
Um booleano que indica se o evento surge em bolha pela DOM ou não.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
Um booleano que indica se o evento é cancelado.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
Uma referencia para o alvo registrado atualmente para o evento.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Indica se ou não {{domxref("event.preventDefault()")}} foi chamado no evento..
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Indica que fase do fluxo de eventos está a ser processada.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
O objetivo original explícito do evento (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
O objectivo inicial do evento, antes de qualquer redirecionamento (Mozilla-specific).
+
{{domxref("Event.target")}} {{readonlyinline}}
+
A referência ao objectivo para o qual o evento foi originalmente despachado.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
O tempo em que o evento foi criado.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
O nome do evento (case-insensitive).
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Indica se ou não o evento foi iniciado pelo navegador (depois de um clique do usuário, por exemplo) ou por um script (usando um método de criação de evento, como event.initEvent)
+
+ +

Metodos

+ +

Esta interface não herda nenhum método.

+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Inicializa o valor de um evento criado. Se o evento já está sendo despachado, este método não faz nada.
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Impede o evento de borbulhar. Obsoleto, use {{domxref ("event.stopPropagation")}} em vez disso.
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsoleto, use {{domxref("event.stopPropagation")}} ao invés.
+
{{domxref("Event.preventDefault()")}}
+
Cancela o evento (caso seja cancelável).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
Para este evento em particular, nenhum outro ouvinte será chamado. Ou aqueles ligados no mesmo elemento, nem aqueles associados em elementos que serão percorridos mais tarde
+ (em fase de captura, por exemplo)​.
+
{{domxref("Event.stopPropagation()")}}
+
Para a propagação de eventos mais adiante no DOM.
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Obsoleto, use {{domxref("Event.defaultPrevented")}} ao invés.
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/event/initevent/index.html b/files/pt-br/web/api/event/initevent/index.html new file mode 100644 index 0000000000..6a26dcb3e8 --- /dev/null +++ b/files/pt-br/web/api/event/initevent/index.html @@ -0,0 +1,137 @@ +--- +title: Event.initEvent() +slug: Web/API/Event/initEvent +tags: + - API + - DOM + - Descontinuado + - Evento + - Referencia + - metodo +translation_of: Web/API/Event/initEvent +--- +
{{ ApiRef("DOM") }}{{deprecated_header}}
+ +

O método Event.initEvent() é usado para inicializar o valor de um {{ domxref("event") }} criado usando {{ domxref("Document.createEvent()") }}.

+ +

Eventos inicializados desta maneira precisam ter sido criados com o método {{ domxref("Document.createEvent()") }}. Este método precisar ser chamado para definir o evento antes de ser despachado, usando {{ domxref("EventTarget.dispatchEvent()") }}. Uma vez despachado, não faz mais nada.

+ +
+

Não use esse método mais, pois está depreciado.

+ +

Ao invés, use construtores de eventos específicos, como {{domxref("Event.Event", "Event()")}}. A página sobre Criando e disparando eventos detalha mais informações sobre o uso desses eventos.

+
+ +

Syntax

+ +
event.initEvent(tipo, bubbles, cancelable);
+ +
+
tipo
+
É um {{domxref("DOMString")}} definido o tipo do evento.
+
bolhas
+
É um {{jsxref("Boolean")}} decidindo se o evento precisa ser enviado para cima, na cadeia de eventos ou não. Uma vez definido, a propriedade read-only {{ domxref("Event.bubbles") }} irá informar o seu valor.
+
cancelable
+
É um {{jsxref("Boolean")}} definindo se o evento pode ser cancelado. Uma vez definido, a propriedade read-only {{ domxref("Event.cancelable") }} will irá informar o seu valor.
+
+ +

Exemplo

+ +
// Cria o evento.
+var event = document.createEvent('Event');
+
+// Cria um evento de clique que borbulha e
+// não pode ser cancelado
+event.initEvent('click', true, false);
+
+// Escuta este evento.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}{{Spec2("DOM WHATWG")}}From {{SpecName('DOM2 Events')}}, deprecated it, superseded by event constructors.
{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Compatibilidade com navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}} [1]{{CompatVersionUnknown()}}{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }} [1]{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Antes do Firefox 17, uma chamada a este método depois de despachar o evento gerava uma exceção ao invés de não fazer nada.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/event/istrusted/index.html b/files/pt-br/web/api/event/istrusted/index.html new file mode 100644 index 0000000000..711fcae44b --- /dev/null +++ b/files/pt-br/web/api/event/istrusted/index.html @@ -0,0 +1,57 @@ +--- +title: Event.isTrusted +slug: Web/API/Event/isTrusted +translation_of: Web/API/Event/isTrusted +--- +
{{APIRef("DOM")}}
+A propriedade  isTrusted da interface {{domxref("Event")}}, exclusiva para leitura, é uma booleana ({{domxref("Boolean")}}) de valor verdadeiro (true) se tal evento é disparado pela ação do usuário. Retorna falso (false) caso o acionamento do evento seja ocasionado pelo método {{domxref("EventTarget.dispatchEvent()")}} ou tenha sido criado ou modificado por um script.
+ +
 
+ +

Sintaxe

+ +
var eventIsTrusted = event.isTrusted;
+
+ +

Valor

+ +

{{domxref("Boolean")}}

+ +

Exemplo

+ +
if (e.isTrusted) {
+  /* The event is trusted */
+} else {
+  /* The event is not trusted */
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecifiaçãoStatusComentário
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}}Amplia requisito para confiabilidade de um evento, embora isto não defina por si só a propriedade isTrusted.
+ + + +
+ + +

{{Compat("api.Event.isTrusted")}}

+
diff --git a/files/pt-br/web/api/event/preventdefault/index.html b/files/pt-br/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..cc39be846e --- /dev/null +++ b/files/pt-br/web/api/event/preventdefault/index.html @@ -0,0 +1,113 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +translation_of: Web/API/Event/preventDefault +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Resumo

+ +

Cancela o evento se for cancelável, sem parar a propagação do mesmo.

+ +

Sintaxe

+ +
event.preventDefault();
+ +

Exemplo

+ +

Alternar é a ação padrão de clicar em uma caixa de seleção. Este exemplo demonstra como impedir que isso aconteça:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>preventDefault example</title>
+
+<script>
+function stopDefAction(evt) {
+    evt.preventDefault();
+}
+
+document.getElementById('my-checkbox').addEventListener(
+    'click', stopDefAction, false
+);
+</script>
+</head>
+
+<body>
+
+<p>Please click on the checkbox control.</p>
+
+<form>
+    <input type="checkbox" id="my-checkbox" />
+    <label for="my-checkbox">Checkbox</label>
+</form>
+
+</body>
+</html>
+ +

Você pode ver o preventDefault em ação aqui.

+ +

O exemplo a seguir demonstra como um input com texto inválido pode ser parado ao chegar ao campo de entrada com o preventDefault().

+ +
+
<!DOCTYPE html>
+<html>
+<head>
+<title>preventDefault example</title>
+
+<script>
+
+ +
function Init () {
+    var myTextbox = document.getElementById('my-textbox');
+    myTextbox.addEventListener( 'keypress', checkName, false );
+}
+
+function checkName(evt) {
+    var charCode = evt.charCode;
+    if (charCode != 0) {
+        if (charCode < 97 || charCode > 122) {
+            evt.preventDefault();
+            alert(
+                "Please use lowercase letters only."
+                + "\n" + "charCode: " + charCode + "\n"
+            );
+        }
+    }
+}
+
+ +
</script>
+</head>
+<body onload="Init ()">
+    <p>Please enter your name using lowercase letters only.</p>
+    <form>
+        <input type="text" id="my-textbox" />
+    </form>
+</body>
+</html>
+
+ +

Aqui está o resultado do código anterior:

+ +

{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}

+ +

Notas

+ +

Chamar preventDefault durante qualquer fase do fluxo de eventos cancela o evento, o que significa que qualquer ação padrão normalmente feita pela aplicação como um resultado do evento não ocorrerá.

+ +
+

Nota: A partir do {{Gecko("6.0")}}, chamar o preventDefault() faz com que o {{ domxref("event.defaultPrevented") }} se torne true.

+
+ +

Você pode usar o event.cancelable para checar se o evento é cancelável. Chamar o preventDefault para um evento não cancelável não fará efeito.

+ +

Se o preventDefault não parar a propagação do evento através do DOM. event.stopPropagation deve ser usada para isso.

+ +

Especificação

+ + diff --git a/files/pt-br/web/api/event/srcelement/index.html b/files/pt-br/web/api/event/srcelement/index.html new file mode 100644 index 0000000000..c66dc744d4 --- /dev/null +++ b/files/pt-br/web/api/event/srcelement/index.html @@ -0,0 +1,74 @@ +--- +title: Event.srcElement +slug: Web/API/Event/srcElement +translation_of: Web/API/Event/srcElement +--- +

{{ApiRef("DOM")}}

+ +

{{ Non-standard_header() }}

+ +

Event.srcElement é uma propriedade alias para a propriedade padrão {{domxref("Event.target")}}. É específica para versões antigas do Microsoft Internet Explorer.

+ +

Especificações

+ +

Não é parte de nenhuma especificação.

+ +

Microsoft tem uma descrição na MSDN.

+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatNo}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1]: {{bug(453968)}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/event/stopimmediatepropagation/index.html b/files/pt-br/web/api/event/stopimmediatepropagation/index.html new file mode 100644 index 0000000000..a5de39c083 --- /dev/null +++ b/files/pt-br/web/api/event/stopimmediatepropagation/index.html @@ -0,0 +1,99 @@ +--- +title: Event.stopImmediatePropagation() +slug: Web/API/Event/stopImmediatePropagation +tags: + - API + - Method + - Referência(2) + - event.stopImmediatePropagation(); + - events + - pt-br + - stopImmediatePropagation +translation_of: Web/API/Event/stopImmediatePropagation +--- +
{{APIRef("DOM")}}
+ +

Evita que outros listeners escutem o evento.

+ +

Sintaxe

+ +
event.stopImmediatePropagation();
+
+ +

Notas

+ +

No caso de um evento onde vários listeners o estão escutando, os mesmos são disparados na ordem em que foram adicionados. Porém, se durante uma chamada (ou disparo), event.stopImmediatePropagation() for chamado, os demais listeners não serão disparados.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentários
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM4')}}Initial definition
+ +

Compatibilidade

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatChrome("6.0")}}{{CompatGeckoDesktop("10.0")}}{{CompatIE(9.0)}}{{CompatOpera("15.0")}}{{CompatSafari("5.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/pt-br/web/api/event/stoppropagation/index.html b/files/pt-br/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..54d0c9bd5f --- /dev/null +++ b/files/pt-br/web/api/event/stoppropagation/index.html @@ -0,0 +1,93 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - API + - Evento + - Referencia + - Referência(2) + - metodo + - stopPropagation +translation_of: Web/API/Event/stopPropagation +--- +

{{APIRef("DOM")}}

+ +

Resumo

+ +

Impede a propagação do evento por seus respectivos listeners.

+ +

Sintaxe

+ +
event.stopPropagation();
+ +

Parametros

+ +

Nenhum

+ +

Valor retornado

+ +

undefined.

+ +

Exemplo

+ +

Veja o exemplo 5: Event Propagation no capítulo Eventos para um exemplo mais detalhado desse método e propagação de evento no DOM.

+ +

Notas

+ +

Veja DOM specification para a explicação do fluxo de eventos. (O DOM Level 3 Events draft possui uma ilustração.)

+ +

preventDefault é um método de complemento que pode ser usado para previnir a ação padrão do evento que estiver acontecendo.

+ +

Especificação

+ +

DOM Level 3 Events: stopPropagation

+ +

Compatibilidade do Browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}9{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
diff --git a/files/pt-br/web/api/event/target/index.html b/files/pt-br/web/api/event/target/index.html new file mode 100644 index 0000000000..8a3ab35191 --- /dev/null +++ b/files/pt-br/web/api/event/target/index.html @@ -0,0 +1,69 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - PortuguêsBrasil + - pt-br +translation_of: Web/API/Event/target +--- +
{{ApiRef("DOM")}}
+ +

Uma referência ao objeto que enviou o evento. É diferente de {{domxref ("event.currentTarget")}} quando o manipulador de eventos é chamado durante a fase de borbulhagem ou captura do evento.

+ +

Sintaxe

+ +
theTarget = event.target
+ +

Exemplo

+ +

A propriedade event.target pode ser usada para implementar a delegação de eventos.

+ +
// Assumindo que existe uma variável 'list' contendo uma instância de um elemento ul de HTML.
+function hide(e) {
+  // A menos que os itens da lista sejam separados por uma margem, e.target deve ser diferente de e.currentTarget
+  e.target.style.visibility = 'hidden';
+}
+
+list.addEventListener('click', hide, false);
+
+// Se algum elemento (elemento <li> ou um link dentro de um elemento <li> por exemplo) for clicado, ele desaparecerá.
+// Só requer um único listener para fazer isso.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Compatibilidade do navegador

+ + +

{{Compat("api.Event.target")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/event/type/index.html b/files/pt-br/web/api/event/type/index.html new file mode 100644 index 0000000000..3ca34e79f3 --- /dev/null +++ b/files/pt-br/web/api/event/type/index.html @@ -0,0 +1,60 @@ +--- +title: Event.type +slug: Web/API/Event/type +translation_of: Web/API/Event/type +--- +

{{APIRef("DOM")}}

+ +

Sumário

+ +

Retorna uma string contendo o tipo de evento.

+ +

O argumento do evento {{ domxref("EventTarget.addEventListener()") }} e {{ domxref("EventTarget.removeEventListener()") }} é caso insensível(case insensitive).

+ +

Veja Mozilla event reference para obter a lista de tipos de evento disponíveis

+ +

Sintaxe

+ +
event.type
+
+ +

Exemplos

+ +
var string = event.type;
+
+ +
<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+
+<title>exemplo de tipo</title>
+
+<script>
+var currEvent = null;
+
+function getEvtType(evt) {
+  currEvent = evt.type;
+  document.getElementById("Etype").firstChild.nodeValue = currEvent;
+}
+
+</script>
+</head>
+
+<body
+  onkeydown="getEvtType(event)"
+  onkeyup="getEvtType(event)"
+  onmousedown="getEvtType(event)"
+  onmouseup="getEvtType(event)">
+
+<p>Pressione uma tecla ou clique com o mouse para obter o tipo de evento.</p>
+<p>Tipo de evento: <span id="Etype">-</span></p>
+
+</body>
+</html>
+
+ +

Especificação

+ + -- cgit v1.2.3-54-g00ecf