Home > Article > Web Front-end > Some important instructions for JavaScript events_javascript tips
Some important instructions for JavaScript events_javascript tips

WBOYOriginal: 2016-05-16 18:43:30856browse
1. JavaScript asynchronous callback
Copy code The code is as follows:
2, event object
　 Below The js implementation does not cause a line break when typing enter in the textarea text box. That is, disable the Enter key
Copy code The code is as follows:
 
< /textarea> <br><script language = "javascript"> <br>/* <br>The tricky part about event objects is that IE's implementation has a lookup table with the W3C specification. IE uses a separate global event object (which can be found in the global variable property window.event), while other browsers use a separate parameter pass that contains the event object. <br>*/ <br>document.getElementsByTagName("textarea")[0].onkeypress = function(e) <br>{ <br>//If the event object does not exist, get the global (IE only) Object <br>var e = e || window.event; <br>//If the Enter key is pressed, return false (so that no action occurs) <br>return e.keyCode != 13; <br>} <br></script> <br>
</div> <br>3, this keyword <br> The browser will equate this keyword to the current element that references the function (function containing this keyword) <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="10408" class="copybut" id="copybut10408" onclick="doCopy('code10408')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code10408"> <br><body> <br><div id = "body"> <br><ul class = "links"> <br><li> <br><a href = "/">Home</a> <br></li> ; <br><li> <br><a href = "./">mappath</a> <br></li> <br><li> <br><a href = "../">parentpath</a> <br></li> <br></ul> <br></div> <br></body> <br><script language = "javascript"> <br>var li = document.getElementsByTagName("li"); <br>for (var i = 0; i < li.length; i ) <br>{ <br>li[ i].onclick = handeClick; <br>} <br>function handeClick() <br>{ <br>this.style.backgroundColor = "blue"; <br>this.style.color = "red"; <br>} <br></script> <br>
</div> <br>4. Cancel event bubbling<br> Usually when you modify the style of a child element or trigger an event, according to the bubbling principle, its parent The elements will also make the same changes. To prevent this kind of thing from happening, you need to cancel event bubbling. <br> The following example shows that the mouse will add a red border to the current element it is hovering over. If you don't prevent events from bubbling, every time you move the mouse over an element, the element and its parent element will have a red border, which is what we don't want to see. <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="49929" class="copybut" id="copybut49929" onclick="doCopy('code49929')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code49929"> <br><body> <br><div id = "body"> <br><ul class = "links"> <br><li> <br><a href = "/">Home</a> <br></li> ; <br><li> <br><a href = "./">mappath</a> <br></li> <br><li> <br><a href = "../">parentpath</a> <br></li> <br></ul> <br></div> <br></body> <br><script language="javascript"> <br>//Universal function to stop bubbling<br>function stopBubble(e) <br>{ <br>if (e && e.stopPropagation) <br>//w3c method<br>e.stopPropagation(); <br>else <br>//ie method <br>window.event.cancelBubble = true; <br>} <br>var li = document.getElementsByTagName("*"); <br>for (var i = 0; i < li.length; i ) <br>{ <br>//Listen to the user’s mouse, and when it moves to the element, add a red border to the element<br>li[i] .onmouseover = function(e) <br>{ <br>this.style.border = "1px solid red"; <br>stopBubble(e); <br>} <br>//Check the user mouse when moved away element, delete the border we added <br>li[i].onmouseout = function(e) <br>{ <br>this.style.border = "0px"; <br>stopBubble(e); <br>} <br>} <br></script> <br>
</div>
<br>5. Reload the default behavior of the browser <br> Browsers all have this default behavior, that is, when we click on the <a> tag, it will link to the address of the href attribute. Sometimes We don't want this to happen, but want to implement our own effects, such as popping up a warning box. The example is as follows. <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="31366" class="copybut" id="copybut31366" onclick="doCopy('code31366')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code31366"> <br><a href = "http://www. jb51.net">Reload the browser's default behavior</a> <br><script language = "javascript"> <br>/* <br>In order to achieve the same<a href = "#" onclick = function(){alert("success");}>content</a>Same effect<br>*/ <br>function stopDefault(e) <br>{ <br>//W3C prevents browser defaults Behavior<br>if (e && e.preventDefault) <br>e.preventDefault(); <br>//IE prevents browser default behavior<br>else <br>window.event.returnValue = false; <br> return false; <br>} <br>var a = document.getElementsByTagName("a"); <br>for (var i = 0; i < a.length; i ) <br>{ <br>a[ i].onclick = function(e) <br>{ <br>alert("I have modified the browser's default behavior"); <br>return stopDefault(e); <br>//It seems to be written directly below One sentence can also be <br>//return false; <br>} <br>} <br></script> <br>
</div> <br>6. Event affinity (accessibility, also known as accessibility) <br> In order to make your website more friendly, you can think about it this way. When we put the mouse on an element or access it through the keyboard tab key, its style should be consistent, as shown in the following code <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="13612" class="copybut" id="copybut13612" onclick="doCopy('code13612')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code13612"> <br><body> <br><div id = "body"> <br> <ul class = "links"> <br><li> <br><a href = "/">Home</a> <br></li> <br><li> <br><a href = "./">mappath</a> <br></li> <br><li> <br><a href = "../">parentpath< ;/a> <br></li> <br></ul> <br></div> <br></body> <br><script language="javascript"> <br>var a = document.getElementsByTagName("a"); <br>for (var i = 0; i < a.length; i ) <br>{ <br>//Bind mouse hover and focus events Handle the function to the <a> element<br>//When the user hovers the mouse over the link, or focuses on the link (using the keyboard), it will change the background color of <a> to blue<br>a[i].onmouseover = a[i].onfocus = function() <br>{ <br>this.style.backgroundColor = "blue"; <br>} <br>//Bind the mouse to leave and Blur event handler function on <a> element <br>//When the user moves away from the link, it will change the background color of <a> to white <br>a[i].onmouseout = a[i ].onblur = function() <br>{ <br>this.style.backgroundColor = "white"; <br>} <br>} <br></script> <br>
</div> <br>7 , bind event listener <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="40316" class="copybut" id="copybut40316" onclick="doCopy('code40316')"><u>Copy code </u></a></span> The code is as follows: </div>
<div class="codebody" id="code40316"> <br>//addEventt() to add events <br>//Scott Andrew's original addEvent() function <br>//elm element, document.getElementId('btn1') <br>//evType event name, please note that "onclick" should be changed to "click" , "onblur" should be changed to "blur", which means that the event name should not contain "on", such as Click <br>///fn is of course the bound function, remember not to follow it with parentheses, such as showalert <br>/ /useCapture Boolean value, indicating the response sequence of the event. If userCapture is true, the browser uses Capture, if it is false, the bubbing method is used. It is recommended to use false <br>function addEvent(elm, evType, fn, useCapture) <br>{ <br>if (elm.addEventListener) <br>{//firefox, navigation, etc.. <br>elm.addEventListener(evType, fn, useCapture); <br>} <br>else if (elm. attachEvent) <br>{//IE <br>var r = elm.attachEvent('on' evType,fn); <br>} <br>else <br>{ <br>elm['on' evType] = fn; <br>} <br>} <br>//removeEvent() logout event <br>//parameter name is the same as addEvent() function <br>function removeEvent(elm, evTye, useCapture) <br>{ <br>if (elm.detachEvent) <br>{ <br>elm.detachEvent('on' evType); <br>} <br>else if (elm.removeEventListener) <br>{ <br>elm.removeEventListener(evType , userCapture); <br>} <br>} <br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="WEB page sub-window (showModalDialog and showModelessDialog) usage instructions_Basic knowledge" href="http://m.php.cn/faq/23390.html">WEB page sub-window (showModalDialog and showModelessDialog) usage instructions_Basic knowledge</a></span><span>Next article：<a class="dBlack" title="WEB page sub-window (showModalDialog and showModelessDialog) usage instructions_Basic knowledge" href="http://m.php.cn/faq/23392.html">WEB page sub-window (showModalDialog and showModelessDialog) usage instructions_Basic knowledge</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>