jq源码中的事件和dom操作原理

jq事件

bind方法：对于bind之后新添加的元素，绑定方法无效
live方法：事件委托，事件直接绑定在document 元素上，通过事件捕获触发目标元素事件，用法 $(‘a’).live(‘click’, function() {})
delegate方法：live方法的升级版，解决了live方法“事件传播链”过长的问题，用法：$(’#div1).delegate(‘a’, ‘click’, function() {})
下列情况下，优先使用delegate：

1. 为DOM中的很多元素绑定相同事件；
2. 为DOM中尚不存在的元素绑定事件；
3. 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上。

事件委托原理： 通过 target 与实际的事件绑定对象划分一个区域段，通过递归获取每一个元素的 parentNode 节点，在每一个节点层上通过与委托节点的对比用来确定是不是委托的事件元素

jq里面的事件处理大部分实际上调用的都是 原型上的on方法：this.on( name, null, data, fn )

bind: function( types, data, fn ) {
	return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
	return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
	return this.on( types, selector, data, fn );
},

on方法又是调用的jQuery.event.add方法：jQuery.event.add( this, types, fn, data, selector );

add方法里面调用最终的addEventListener： elem.addEventListener(types, eventHandle, false);

jq DOM操作

jQuery.access方法主要是将dom集合分解成单个dom，让回调方法处理
access: function( elems, fn, key, value, chainable, emptyGet, raw ){}

attr: function( name, value ) {
    return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 );
}
prop: function( name, value ) {
    return jQuery.access( this, jQuery.prop, name, value, arguments.length > 1 );
}
css: function( name, value ) {
    return jQuery.access( this, function( elem, name, value ) { }, name, value, arguments.length > 1 );
}
data: function( key, value ) {
    return jQuery.access( this, function( value ) { }, null, value, arguments.length > 1, null, true );
}
  
html: function( value ) {
    return jQuery.access( this, function( value ) { }, null, value, arguments.length );
}
text: function( value ) {
    return jQuery.access( this, function( value ) { }, null, value, arguments.length );
}
html和text调用jQuery.access，实际上调用的是 fn.call( elems, value );调用access的作用主要是处理dom集合
text(value)  ->         设置值createTextNode( value )   取值：elem.textContent
html(value)  ->         设置值elem.innerHTML = value;   取值：elem.innerHTML
attr(name,value)    ->  设置值setAttribute( name, value + "" );   取值：getAttribute( name ) ,取值通过Sizzle.attr做了兼容处理
prop(name,value)  ->    设置值elem[ name ] = value;   取值：elem[ name ] ,实际上就是往$对象上添加属性
css(name,value)    ->   设置值elem[0].style[name]=value;   取值：window.getComputedStyle(elem[0]) [name]，ie9的兼容取值getPropertyValue

empty()    ->     elem.textContent = "";
remove()   ->     parentNode.removeChild(elem);
after()       ->  parentNode.insertBefore(elem, this.nextSibling );
before()    ->    parentNode.insertBefore( elem, this)
append()   ->     target.appendChild( elem )
prepend()  ->     target.insertBefore( elem, target.firstChild);
replaceWith()->   parentNode.replaceChild(div, elem)
addClass()、removeClass()  ->   elem.className 加减处理
hasClass(value)   ->  elem[0].className.indexOf(value) >-1