Home > Developer > JavaScript
1. Talk about custom events today
We all know about events, but many frameworks have implementation of custom events. I wrote a simple one and shared it with you,
Copy codeThe Code is as follows:
<Script>
Var cusEvent = function (){
Var cache = {};
Return {
AddEvent: function (type, fn ){
Cache [type]? Cache [type]. push (fn) :( cache [type] = [fn]);
},
RemoveEvent: function (type, fn ){
If (cache [type]) {
If (fn ){
For (var I = 0, ci; ci = cache [type] [I]; I ++ ){
Ci === fn & cache [type]. splice (I, 1 );
}
} Else {
Delete cache [type];
}
}
},
// E can be a custom object or a string
Fire: function (e ){
If (typeof e = 'string '){
E = {type: e}
};
Var t = cache [e. type];
If (t ){
For (var I = 0, ci; ci = t [I]; I ++ ){
// E can have its own target. If not, use this instead.
Ci.call(e.tar get | this, e)
}
}
}
}
}()
// Use
CusEvent. addEvent ('start', function (e) {alert (e. type )})
CusEvent. addEvent ('start', function (e) {alert (e. type + "1 ")})
CusEvent. fire ('start ')
CusEvent. removeEvent ('start ')
</Script>
2. innerHTML is used by all users. It is very helpful, but it may not work in ie sometimes. For example, if you want to use option in select, it will not work because the select innerHTML is read-only, besides tr, table, and so on, I have written a small method to be compatible with the use of innerHTML in ie. I hope to give you some inspiration.
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html>
<Head>
<Title> Untitled </title>
</Head>
<Body>
Hello World!
<Select id = "aa"> <option> sdfsdf </option> </select>
<Input onclick = "html (document. getElementById ('A'), '<option> change1 </option> <option> change </option>') "type =" button "value =" use innerHTML "/>
</Body>
</Html>
<Script>
Var html = function (){
Var div = document. createElement ('div ');
Return document. all? Function (pN, h ){
Div. innerHTML = '<select>' + h + '</select> ';
For (var I = 0, ci; ci = pN. firstChild;) pN. removeChild (ci)
Debugger;
For (; ci = div. firstChild. firstChild;) pN. appendChild (ci );
}: Function (pN, h ){
PN. innerHTML = h;
}
}()
</Script>
The principle is that in ie, I use a temporary element div to skip the problem that innerHTML cannot be used. I can write another load point, that is, to judge that the uploaded data is tr, apply the table with the corresponding elements,
This method can also solve the problem that option cannot be added or modified in select.
3.
In js, the global g-add variable is a devil and is definitely not recommended. However, sometimes you may need to write a static variable, which accumulates with the execution of the function, for example
Copy codeThe Code is as follows:
Var a = 1;
Function fn (){
Alert (++ );
}
Fn ()
Fn ()
I want to change with the execution of the function.
This is a good way to write.
Copy codeThe Code is as follows:
<Script>
Var fn = function (){
Var a = 1;
Return function (){
Alert (++ );
}
}()
Fn ();
Fn ();
</Script>
As a closure, a can be accessed by internal functions, but it does not generate a global
Of course, if you want to directly modify a, you can also
Copy codeThe Code is as follows:
<Script>
Var fn = function (){
Var a = 1;
Return function (p ){
A = p = undefined? A + 1: p;
Alert ();
}
}()
Fn ();
Fn (0 );
</Script>
4.
In the traditional method, el. offsetParent and el. offsetLeft are used for traversal.
But the easy way to follow is getBoundingClientRect.
The Code is as follows:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html>
<Head>
<Title> Untitled </title>
</Head>
<Body>
<Div id = "aa" style = "position: absolute; width: 200px; height: 200px; left: 200px; top: 1000px; border: 1px solid # ccc "onclick = offset (this)> </div>
<Div id = "bb" style = "position: absolute; width: 200px; height: 200px; border: 1px solid red"> </div>
</Body>
</Html>
<Script>
Var offset = function (o ){
Var d = document, m = Math. max, bl = m(d.body.clientLeft,d.doc umentElement. clientLeft), st, sl,
Bt = m(d.body.clientTop,d.doc umentElement. clientTop), B, bb = document. getElementById ('bb ');
Return function (o ){
B = o. getBoundingClientRect ();
St = m(d.body.scrollTop,d.doc umentElement. scrollTop), sl = m(d.body.scrollLeft,d.doc umentElement. scrollLeft );
Bb.style.css Text + = "; top:" + (B. top + st-bt) + 'px; left: '+ (B. left + sl-bl) + "px ";
}
}()
</Script>
When you click the gray div at the bottom, the red on the top will completely overlap with the gray one.
5.
We have used outerHTML in ie, which is easy to use. In addition to returning html under a certain element, you also want to return the html of this element.
However, this attribute can only be used in ie. other browsers do not have this attribute. What should I do,
Js tips help you solve this problem
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html>
<Head>
<Title> Untitled </title>
</Head>
<Body>
<Div>
<Div id = "aa" ksjfkls = "sdf" style = "">
<P> sdf </p>
<P djkfjd = "df"> </p>
</Div>
<Div id = "bb" sdfksf = 333>
</Div>
</Div>
</Body>
</Html>
<Script>
Var html = function (){
Var d = document, div = d. createElement ('div ');
Return function (id ){
Var o = d. getElementById (id );
If (o. outerHTML)
Return o. outerHTML;
Else {
Div. innerHTML =''
Var h = '';
Div. appendChild (o. cloneNode (true ));
Return div. innerHTML
}
}
}()
Alert (html ('A '))
Alert (html ('bb '))
</Script>
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
