Home > Developer > Web Develop
Event Delegate and js event Delegate
Let's first explain what is event delegation:
The event Delegate is a child element event, which is delegated to its parent level.
Let's take an example:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> untitled document </title>
<Style type = "text/css">
* {Margin: 0; padding: 0}
Ul, li {list-style: none ;}
# Ul {overflow: hidden ;}
Li {width: 100px; height: 100px; background: red; margin: 20px; float: left ;}
</Style>
<Script type = "text/javascript">
Window. onload = function ()
{
Var oUl = document. getElementById ("ul ");
Var oBtn = document. getElementById ("btn ");
Var aLi = oUl. children;
OUl. onclick = function (ev)
{
Var oEvent = ev | event;
Var oTag = oEvent. srcElement | oEvent.tar get;
If (oTag. tagName = "LI ")
{
OTag. style. background = "pink ";
}
}
OBtn. onclick = function ()
{
Var oLi = document. createElement ("li ");
OLi. style. width = "100px ";
OLi. style. height = "100px ";
OUl. appendChild (oLi );
}
}
</Script>
</Head>
<Body>
<Input type = "button" id = "btn" value = "APPEND">
<Div id = "ul">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Div>
</Body>
</Html>
In this example, click li. The current li will change color.
It can be seen from the code that the event is bound to the parent level, but clicking each li will change color. This is a typical event Delegate.
Event delegation has two advantages:
1. Reduce the for loop. (We all know that the for loop is performance-consuming. You don't need it if you don't need it)
2. Add events to future elements
In the above example, after clicking the button, you can append the li and click the added li to change the color.
If you do not need to delegate the event, you will not add events to future elements in the following way:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> untitled document </title>
<Style type = "text/css">
* {Margin: 0; padding: 0}
Ul, li {list-style: none ;}
# Ul {overflow: hidden ;}
Li {width: 100px; height: 100px; background: red; margin: 20px; float: left ;}
</Style>
<Script type = "text/javascript">
Window. onload = function ()
{
Var oUl = document. getElementById ("ul ");
Var aLi = oUl. children;
For (var I = 0; I <aLi. length; I ++)
{
ALi [I]. index = I;
ALi [I]. onclick = function ()
{
This. style. background = "pink ";
}
}
Var oBtn = document. getElementById ("btn ");
OBtn. onclick = function ()
{
Var oLi = document. createElement ("li ");
OLi. style. width = '100px ';
OLi. style. height = '100px ';
OUl. appendChild (oLi );
}
}
</Script>
</Head>
<Body>
<Input type = "button" id = "btn" value = "APPEND">
<Div id = "ul">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Div>
</Body>
</Html>
Compare and run the following command to see the result.
If you do not know anything, please feel free to ask questions ~
C # What is the difference between events and delegation?
An event is a narrow delegate, that is, an event is a dedicated delegate used for the event-driven model.
In layman's terms, you can directly call the delegate in the client code to stimulate the Delegate-directed function, but the event cannot be triggered. The event can only be triggered by the Service Code itself.
That is to say, in your code, entrusting you not only can arrange who calls the function, but also can directly call it, and events cannot be called directly, but can only be triggered through some operations.
You can understand that an event is one or more delegates. In this case, it should be incorrect. An event can have multiple event processing functions, and a delegate can also be a multicast delegate.
Delegation and events
Public CoreTypes. NodeCallBack NCallBack;
Actually, it is a field. The field type is NodeCallBack. The field name is NCallBack.
If you declare
Public event CoreTypes. NodeCallBack NCallBack;
An event will be defined. The event also belongs to this delegate type, but it is different from this delegate type field. When this event is accessed outside the class, you cannot initiate, or execute it proactively. If you declare it as a public field, you can operate it out of the class at will.
The last sentence is to add an anonymous method to the delegate contained in this field.
Answer:
That's right on the second floor. Let me add it.
The event Declaration is an event. In fact, during compilation, two methods (add_XXX and remove_XXX) and one field are generated, you use + =-= in the class to call two methods during compilation, while retrieving the delegate contained in the event directly accesses the field during compilation.
However, outside the class, you can only use the + =-= to access the add and remove methods. This prevents you from directly modifying the processors registered in the delegate outside the class, and the protection class will not be maliciously damaged, and only one event can be triggered internally.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
