Events

Question 1

Which browser is the addEventListener not compatible with?

Answer 1

addEventListener method will not work with legacy browsers from iexplorer 8 and earlier. You are required to call .attachEvent using arguments of ‘onclick’ and function call , it does not use a propagation parameter.

Question 2

What is the benefits of using eventListener in comparison to calling by documentbyId

Answer 2

eventListener allows for event propagation meaning that you can write one function to handle events from multiple sources.

Question 3

What are the key arguments of eventListener?

Answer 3

it takes the event literal , like click , the function and the propagation status (true or false)

Question 4

How would you set an listener for an event using jquery?

Answer 4

use selector $() and on method , the on method takes the same parameters as addEventListener

Question 5

What are main examples of coordinate info events?

Answer 5

screen x,y , client x,y , layer x, y, page x,y offset x,y

Question 6

What is the difference between screenX,Y and clientX,Y ?

Answer 6

screen gives user position relative to the user screen while client gives it relative to window.

Question 7

What is Event info?

Answer 7

event type, event timestamp and defaultPrevented

Question 8

What are events related to targeting information

Answer 8

target - element that the event originated from, srcElement - actual element that fired the event.

Question 9

fromElement and toElement deal which which events?

Answer 9

mouseover and mouseout events.

Question 10

what is offsetXY

Answer 10

Gives the position relative to the element that fires the event.

Question 11

What are examples of events that provide key/mouse information?

Answer 11

altKey , charCode/KeyCode , button , ctrKey and shiftKey

Question 12

What does layerX,Y coordinate info do?

Answer 12

Shows the position of the element relative to another positioned event - not all browsers use this.

Question 13

What does pageXY coordinate info do?

Answer 13

Will give you the event relative to the HTML document.

Question 14

charCode/KeyCode

Answer 14

Detects which character was pressed.

Question 15

Which events handle which modifier code is pressed?

Answer 15

altKey, ctrlKey and shiftKey

Question 16

What are the characteristics of event propagation?

Answer 16

An element can capture child events, it is a good reason to use addEventListener() , not compatable with browsers older than IE8

Question 17

What are the ways that browsers register the event?

Answer 17

The bubbling phase which captures from the lowest element and passes it up the chain of element hierarchy. Bubbling goes up the DOM chain.
Capturing it goes down the DOM.

Question 18

what method can you use to stop events from propagating in the DOM?

Answer 18

the stopPropagation() method can be used. prevents further propagation of the current event

Question 19

what method is used to prevent a default behaviour from occurring when an event is triggered?

Answer 19

the preventDefault() method is used. A useful method in validating and controlling information.

Question 20

when handling events in addEventListener what does the argument false result in?

Answer 20

False sets the event to bubble up the page instead of being captured.

Question 21

What method can you use to select the parent of a clicked element in the DOM?

Answer 21

Use e.target.parentNode;

Question 22

How do you remove a node ?

Answer 22

use node.removeChild(child); where node is parent and child is the node to be removed.

var node = e.target.parentNode;

 if (node) {
    node.parentNode.removeChild(node);
}

Question 23

How do you create an class name?

Answer 23

Use element.className = “name”

Question 24

How do you create an element?

Answer 24

Use document.createElement(div)

Question 25

How do you attach an element to a target?

Answer 25

Use e.target.appendChild( < element> )

Question 26

What method is used to access the partner of a targeted object?

Answer 26

Use e.target.parentNode