原生js模拟jQuery对象调用click事件来理解this和$(this)

原生js中,this指向调用的dom元素;
jQuery中,事件回调函数中的this也指向dom元素,所以在回调函数中$(this)才是指向jQuery的对象.

这个要和jQuery中插件创建里面的this进行区分,里面的this则指向调用对象,即jQuery对象.

之前一直对这个不理解,所以现在通过一个例子来进行自己的理解分析:

< script >

var bodyDom = document. querySelector( 'body');

/*bodyDom.onclick = function () {

console.log('我是Dom事件');

};*/

bodyDom. addEventListener( 'click', function(){

console. log( '我是Dom事件');

})

function $( ele){

var dom = null;

if( typeof ele == 'object'){

dom = ele;

} else{

dom = document. querySelector( ele);

}

var objDom = {

0 :dom,

length: 1

};

objDom. click = function( fn){

for ( var i = 0; i < objDom. length; i++) {

var element = objDom[ i];

element. addEventListener( "click", fn);

}

};

return objDom;

}

$( 'body'). click( function () {

console. log( '我是$封装事件');

console. log( this);

console. log( $( this));

console. log( $( $( this)));

});

< / script >