js tips one week collection_javascript skills

1. Let’s talk about custom events today
Everyone knows about events, but there are implementations of custom events in many frameworks. I wrote a simple one to share with you,

Copy code The code is as follows:

<script> <br>var cusEvent = function(){ <br>var cache = {}; <br>return { <br>addEvent:function(type,fn){ <br>cache[type]?cache[type].push(fn):(cache[type]= [fn]); <br>}, <br>removeEvent:function(type,fn){ <br>if(cache[type]){ <br>if(fn){ <br>for(var i=0 ,ci;ci=cache[type][i];i ){ <br>ci===fn&&cache[type].splice(i,1); <br>} <br>}else{ <br>delete cache [type]; <br>} <br>} <br>}, <br>//e can be a custom object or a string <br>fire:function(e){ <br>if( typeof e =='string'){ <br>e = {type:e} <br>}; <br>var t = cache[e.type]; <br>if(t){ <br>for( var i=0,ci;ci=t[i];i ){ <br>//e can have its own target, if not, use this instead <br>ci.call(e.target||this,e) <br>} <br>} <br>} <br>} <br>}() <br>//Use <br>cusEvent.addEvent('start',function(e){alert(e.type) }) <br>cusEvent.addEvent('start',function(e){alert(e.type "1")}) <br>cusEvent.fire('start') <br>cusEvent.removeEvent('start' ) <br></script>

2. Everyone has used innerHTML. It works well, but sometimes it doesn’t work under IE. For example, if you want to use option on select, just No, because the innerHTML of select is read-only. Of course, in addition to this, there are also elements such as tr, table, etc. I wrote a small method to be compatible with the use of these elements by innerHTML under IE. I hope it can give you some inspiration

Copy code The code is as follows:

Hello World!
sdfsdfsdfsdf



<script> <br>var html = function(){ <br>var div = document.createElement('div'); <br>return document.all?function(pN,h){ <br>div.innerHTML = '<select>' h '</select>'; <br>for(var i=0,ci;ci=pN.firstChild ;) pN.removeChild(ci) <br>debugger; <br>for(;ci=div.firstChild.firstChild;) pN.appendChild(ci); <br>}:function(pN,h){ <br> pN.innerHTML = h; <br>} <br>}() <br></script>

The principle is that in IE, I use a temporary element div to skip innerHTML and it cannot For the problem of usage, you can write some more load points, that is, if it is judged that the passed in is tr or table, then apply it with the corresponding elements.
This method can also solve the problem that it is difficult to add and modify the options in the select
3.
The global g-add variable is a devil in js, and it is absolutely recommended not to use it. However, sometimes, you may have to write a static variable, which accumulates as the function executes, such as

Copy code The code is as follows:

var a = 1;
function fn(){
alert( a);
}
fn()

fn()
If you want to change with the execution of the function
A good way to write it is like this

Copy code The code is as follows:

<script> <br>var fn = function(){ <br>var a = 1; <br>return function(){ <br>alert( a); <br>} <br>}() <br>fn(); <br>fn(); <br></script>

a, as a closure, can be accessed by internal functions, but it does not generate a global a
Of course, if you want to modify a directly, you can also

Copy code The code is as follows:

<script> <br>var fn = function(){ <br>var a = 1; <br>return function(p){ <br>a = p===undefined?a 1:p; <br>alert(a); <br>} <br>}() <br>fn (); <br>fn(0); <br></script>

4.
The traditional way is to traverse through el.offsetParent and el.offsetLeft to obtain
, but in fact the best and easier way is getBoundingClientRect
The code is as follows

Copy code The code is as follows:

<script> <br>var offset = function (o){ <br>var d = document,m = Math.max,bl = m(d.body.clientLeft,d. documentElement.clientLeft),st,sl, <br>bt = m(d.body.clientTop,d.documentElement.clientTop),b,bb = document.getElementById('bb'); <br>return function(o) { <br>b = o.getBoundingClientRect(); <br>st = m(d.body.scrollTop,d.documentElement.scrollTop),sl = m(d.body.scrollLeft,d.documentElement.scrollLeft); <br>bb.style.cssText =";top:" (b.top st-bt) 'px;left:' (b.left sl-bl) "px"; <br>} <br>}() <br></script>

When you click on the gray div at the bottom, the red one above will completely overlap with the gray one
5.
OuterHTML under ie Have you ever used it? Fat Sauce is easy to use. You not only want to return the html under a certain element, but also want to return the html of this element
However, this attribute can only be used under IE. Other browsers do not have this attribute. , what to do,
js tips help you solve this problem

Copy the code The code is as follows: