<! DOCTYPE html>The //on method passes a parameter to the event listener's handler function event.target the this point inside the handler function//Event.target So the printed this is Event.target <div class= "Child" ></div>
$ ('. Child '). On (' click ', function () {///Console.log (this);//<div class= "Child" ></div>//})
//Event delegate, the first literally means to see you out, is to put the event to others to execute,//Lenovo to the above-mentioned event bubbling, is not thought of? Yes,//is to pass the event of the child element to the parent element in the form of bubbling. The //event delegate not only implements the same functionality, but also greatly reduces DOM operations.
//Monitor. Child's Click event under Father.$ ('. Father '). On (' click ', '. Child ', function () {//Console.log (this);//<div class= "Child" ></div>//})// $ ('. Child ') [0].on (' click ', function () {//Console.log (this);//<div class= "Child" ></div>//})
var app={init:function () {//init () This refers to the appthis. $father =$ ('. Father ');//Bind an attribute to the App object $fatherthis. $child =$ ('. Child ');//bind an attribute to an App object $childThis.bind ();//app.bind ()}, Bind:function () {var _this=this;//this refers to the app
//Monitor. Father passed the Event.target to This.sayhi when the click event was heard.//That is. Father Dom Object <div class= "father" ><div class= "Child" ></div></div>this. $father. On (' click ', This.sayhi);
//Overwrite _this.sayhello () to _this.sayhello.call (_this)//SayHello at the time of execution, the internal this point of the app object itselfthis. $child. On (' click ', Function () {_this.sayhello ();})
//If there is no bind (this), This.saybye will accept the event.target that is passed. Child's Dom object//But this is bound by the this and the rejected this is a consistent reference to the App objectthis. $child-On (' Click ', This.sayBye.bind (This)}, Sayhi:function () {console.log (' sayhi ', this)//<div class= " Father "><div class=" Child "></div></div>}, Sayhello:function () {console.log (' SayHello ', this)/ /app}, Saybye:function () {console.log (' Saybye ', this)//app}} app.init (); </script></body>
Some exercises of this in JavaScript
