js-Event 1

In this lesson I will tell you about the events in JS and some browser compatibility issues

This chapter is mainly from the following aspects: 1. Event Stream 2. Event browser compatible 3. Mouse, keyboard events

1. Event Flow

What is event flow?

Describes the order in which events are accepted. This is not a very easy sentence to understand. So I'm going to combine the two streams of events in a specific way.

There are two ways of event flow: bubbling, capturing.

For the following page

<!DOCTYPE HTML><HTMLonclick="#"><HeadLang= "en">    <MetaCharSet= "UTF-8">    <title></title>    <Linktype= "Text/css"rel= "stylesheet"href= "Index.css"/>    <Scripttype= "Text/javascript"src= "Index1.js"CharSet= "GBK"></Script></Head><Bodyonclick="#"><DivID= "Content"onclick="#">    <spanID= "Start"onclick="#">Begin</span>    <spanID= "Stop">Stop it</span></Div></Body></HTML>

If it is bubbling, then if you click on the start element then you will first respond to the Click event of the start span, but this span is in the id=content Div, so you click on this span to actually click on its ancestor Div, And so on, that is, click on the body, click on the HTML, so these elements of the Click event will respond. The way to bubble up is to start the response from the most specific location, then respond to the parent element, one layer at a layer of outward bubbling, so called the bubbling way.

The catch event is the opposite of the bubbling event, which is to respond to events from the outermost parent and then slowly move toward the child elements.

The way that general IE browser takes is bubbling way

2. Event compatibility issues

Second, there are three kinds of event modes in the way of events: HTML events, dom0,dom2. Three event modes.

First, say something. html Event mode

We usually give a button an additional click event, as shown below:

<input type= "button" id= "input" onclick= "function () {...}" />

Or

<input type= "button" id= "Input" onclick= "Play ()"/>

<script type= "Text/javascript" >

function Play () {

.....

}

</script>

DOM0 Level Event Handling mode:

<script type= "Text/javascript" >

Object.onclick=function () {

....

}

If you want to cancel this click event, you only need to do the following

Object.onclick=null;

</script>

DOM2 Level Event Handling mode

<script type= "Text/javascript" >

Object.addeventlistener ("EventType", function,value);//This method binds an event to an element where EventType is the event type, such as Click,mouseout, function refers to the event name to invoke, the value table is a Boolean value, Flase represents the bubbling method, and True indicates how the event is captured.

Object.removeeventlistener ("EventType", Function,value);

DOM2 in IE is a bit different in the way

Object.attachevent ("EventType", function), only two parameters, as above, there is no value this parameter, because the default in IE is the bubbling form.

Object.detachevent ("Event TYpe", function) is used to dismiss this event.

</script>

It is important to note one thing. That is, regardless of the DOM0 level and the way in IE in the DOM2 class, the event is preceded by an on such as Onclick,onmouseover, but not in the AddEventListener mode of the DOM2 level before the event, such as Click.

js-Event 1