Event-driven JScript face icon programming

zhaozj2021-02-16  55

Share here's awareness and a little solution to the face of JScript. JScript and JavaScript are almost almost (of course different), but the contents of this article can also be used in JavaScript

JScript supports some properties of the object, but his THIS pointer is very strange, when there is a member function in object OBJ1 to use this, if you have some object OBJ2 reference the function, then this THIS is not Obj1, but Obj2.

Let's take a look at one example:

No title document </ title> </ head></p> <p><body></p> <p><p id = "text"> this is the element "p" </ p></p> <p><script logage = "jscript"></p> <p>Function Obj1 () {// class OBJ1</p> <p>THIS.INNNERTEXT = "this is obj1";</p> <p>}</p> <p>Function Obj1.prototype.fun () {</p> <p>Alert (this.innertext);</p> <p>}</p> <p>Var O1 = new obj1; // Object O1</p> <p>O1.Fun (); // Show "this is obj</p> <p>1</p> <p>"</p> <p>TEXT.ONCLICK = O1.Fun; // Binds the member function of the object O1 to the HTML element text, this is another click "this is the element" p ". You will find that this is the element" p "is displayed. , Not this is obj1.</p> <p></ script></p> <p></ body> </ html></p> <p>From the above example we can know that the function references in JSCRPT only references the entry of the function, and does not save the object's reference. And this is just a simple point to the object of the call function. Jscript does not have an object pointer this kind of thing (maybe I don't know, if you know the article, please tell me (QQ: 123737)).</p> <p>We will write like this when we usually write some ONCLICK events to handle the HTML element.</p> <p>method one:</p> <p><script logage = "jscript"></p> <p>Function fun (obj) {</p> <p>Alert (Obj.innertext);</p> <p>}</p> <p></ script></p> <p><p id = "text" οnclick = "fun (this)"> Element </ p></p> <p>Method Two:</p> <p><p id = "text"> Element </ P></p> <p><script logage = "jscript"></p> <p>Function fun () {</p> <p>Alert (this.innertext);</p> <p>}</p> <p>TEXT.ONCLICK = FUN;</p> <p></ script></p> <p>The following two methods are the same, maybe you will find the way the method is directly in direct display. Method 2 of FUN is more rational. But the method of the fun (this) is too much trouble, change the code to:</p> <p><script logage = "jscript"></p> <p>Function fun () {alert (this.innerText);</p> <p>}</p> <p></ script></p> <p><p id = "Text" οnclick = "fun ()"> Element </ p></p> <p>You will find this script that you can't work. why? ?</p> <p>When you use the method, it is actually the case that the ONCLICK's handling event is like this:</p> <p>Function anonymous () {fun (this)}</p> <p>That is, IE creates an anonymous function to the OnClick event and calls the FUN function in the function. Since the object text is called, this is transmitted to the FUN function to the reference reference of the TEXT. At this time, the grown OBJ in FUN points to Text. If you write the event binding:</p> <p><p id = "Text" οnclick = "fun ()"> Element </ p></p> <p>Since the function Anonymous is called Fun (), it is not pointing anywhere if you use this this in Fun. If you alter (this), you will find his value is undefined.</p> <p>In Method II, OnClick handling event is FUN, so this is available, it points to TEXT. But don't write the definition of fun in Method II:</p> <p>Function fun (obj) {</p> <p>Alert (Obj.innertext);</p> <p>}</p> <p>When the TEXT responses to the OnClick event call OnClick, it is not passed to FUN, then the OBJ is undefined.</p> <p>The problem is clear, but what should I do when we want to respond to HTML events, what should I do when I exist in the object? (A basic processing method is based on pure event driven)</p> <p>We can do this:</p> <p><p id = "text"> Click this </ p></p> <p><script logage = "jscript"></p> <p>Function Obj () {</p> <p>THISINNNERTEXT = "this is obj";</p> <p>}</p> <p>Function Obj.prototype.Fun () {</p> <p>VAR Self = this.obj; // Get reference to OBJ1. I have learned that Delphi knows self.</p> <p>// jscript This is not re-assigned, so use Self. People who have learned Delphi know what Self is.</p> <p>Alert (Self.innertext);</p> <p>}</p> <p>Var Obj1 = new obj;</p> <p>TEXT.OBJ = Obj1; // Add a new attribute OBJ to Text and is an OBJ1 reference.</p> <p>TEXT.ONCLICK = Obj1.fun;</p> <p></ script></p> <p>Click the Click this results to display "this is obj".</p> <p>Using this method can use JScript pure event-driven programs.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-22098.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="22098" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.036</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'fhsptZwogZEl0Abgr0kGAElwQJPQO4IrDJyN4pIUwCF_2F1wM9ElbEZ57IIVavcZvzomJC_2B08ZFD32C_2Fj_2Bytk_2Bjw_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>