IES: JS-deck 11

Question 1

huh

HTML onmouseup

Answer 1

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when mouse button released over element
• Syntax
  (HTML) <element onmouseup="myScript">
  (JS) object.onmouseup = function(){myScript};
  (JS addEventListener() method) object.addEventListener("mouseup", myScript);
• Example
  <p onmouseup="mouseUp()">Click the text!</p>
• (Call a function when releasing a mouse button over a paragraph)

Question 2

HTML onmouseover

Answer 2

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when mouse pointer enters an element
• often used with onmouseout event
• similar to onmouseenter event: difference is onmouseenter event doesn’t bubble (relay info and influence up doc hierarchy).
• Syntax
  (HTML) <element onmouseover="myScript">
  (JS) object.onmouseover = function(){myScript};
  (JS addEventListener() method) object.addEventListener(“mouseover”, myScript);
• Example
  <img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
• (Calls a function when moving the mouse pointer onto an image)

Question 3

HTML onmouseout

Answer 3

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when mouse pointer moves out of element.
• often used together with onmouseover event
• onmouseout event similar to onmouseleave: difference is onmouseleave doesn’t bubble (does not relay info and influence up the document hierarchy).
• Syntax
  (HTML) <element onmouseout="myScript">
  (JS) object.onmouseout = function(){myScript};
  (JS addEventListener() method) object.addEventListener("mouseout", myScript);
• Example
  ~~~

<div>
<p>I will demonstrate onmouseout!</p>
</div>

~~~
* (example demonstrates the onmouseout event)

Question 4

HTML onmousemove

Answer 4

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when the pointer moves over an element
• Syntax
  (HTML) <element onmousemove="myScript">
  (JS) object.onmousemove = function(){myScript};
  (JS addEventListener() method) object.addEventListener("mousemove", myScript);
• Example
  <div onmousemove="myFunction()">Move the cursor over me</div>
• (Call a function when moving the mouse pointer over a <div> element)

Question 5

HTML onchange

Answer 5

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when HTML element value changes.
• similar to oninput event: difference is oninput occurs immediately after element value changed
• onchange occurs when element loses focus, after the content has been changed.
• other difference- onchange works on <select> elements
• Syntax
  (HTML) <element onchange="myScript">
  (JS) object.onchange = function(){myScript};
  (JS addEventListener() method) object.addEventListener("change", myScript);
• Example
  <input type="text" onchange="myFunction()">
• (Calls a function when input field content changes)

Question 6

HTML onreset

Answer 6

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when a form is reset
• Syntax
  (HTML) <element onreset="myScript">
  (JS) object.onreset = function(){myScript};
  (JS addEventListener() method) object.addEventListener("reset", myScript);
• Example
  ~~~

<form>
Enter name: <input></input>
<input></input>
</form>

~~~
* (Call a function when a form is reset)

Question 7

HTML onsubmit

Answer 7

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when a form is submitted
• Syntax
  (HTML) <element onsubmit="myScript">
(JS) object.onsubmit = function(){myScript};
  (JS addEventListener() method) object.addEventListener("submit", myScript);
• Example
  ~~~

<form>
Enter name: <input></input>
<input></input>
</form>

~~~
* (Calls a function when a form is submitted)