Attribut方法 、鼠标事件以及事件冒泡和事件捕获

xiaoxiao2021-02-28  45

#/** + 回车 js中的文档注释

演示

设置两个按钮,点一下变成不可点,另个变可点

对属性操作的getAttribut() 拿到一个属性setAttribute() 修改一个属性removeAttribute() 移除一个属性hasAttribute() 是否有一个属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input[type='button'] { font-size: 20px; width: 150px; height: 40px; border: none; } </style> </head> <body> <input id="button1" type="button" value="按钮1(可点)" /> <input id="button2" type="button" value="按钮2(不可点)" disabled="" /> <script src="js/mylib.js"></script> <script> //因为全局变量用的越少越好,所以在可以使用及时调用函数(function(){}()) (function() { var btn1 = $('button1') var btn2 = $('button2') handleEvent(btn1, 'click', function(evt) { evt = evt || window.event; /* evt.target.value = '按钮1(不可点)'; evt.target.disabled = true; btn2.value = '按钮2(可点)' btn2.disabled = false; */ //拿到属性 console.log(btn1.getAttribute('value')); //修改属性 btn1.setAttribute('value', '按钮1(不可点)'); //有disabled一定是禁用的,所以不要在disabled放true或false btn1.setAttribute('disabled', ''); btn2.setAttribute('value', '按钮2(可点)'); //移除属性 btn2.removeAttribute('disabled'); //是否有这个属性 //btn2.hasAttribute('disabled'); }); handleEvent(btn2, 'click', function() { btn2.setAttribute('value', '按钮2(不可点)'); btn2.setAttribute('disabled', ''); btn1.setAttribute('value', '按钮1(可点)'); btn1.removeAttribute('disabled'); }); } ()); </script> </body> </html> 下面一段代码是提前准备好的js库,方便优化代码 /** * 通过ID获取元素 * @param {String} id 元素的ID */ function $(id) { return document.getElementById(id); } /** * 为元素绑定处理事件的回调函数 * @param {HTMLElement} elem * @param {String} evtName * @param {Function} callback */ function handleEvent(elem, evtName, callback) { if (elem.addEventListener) { elem.addEventListener(evtName, callback); }else { elem.attachEvent('on' + en, callback); } } /** * 拿到对象的样式 * @param {Object} elem */ function getCurrentStyle(elem) { return elem.currentStyle(elem) || document.defaultView.getComputedStyle(elem); }; /** * 阻止事件冒泡 * @param {Object} evt */ function stopEventBubble(evt) { if (evt.stopPropagation) { evt.stopPropagation(); }else { evt.cancelBubble = true; } };

用鼠标拖动模块

重点熟练使用mousedown、mousemove、mouseup这三个事件通过元素的style属性我们只能修改元素的样式并不能获取元素的样式,如果想获得一个元素当前的样式那么可以通过document对象的defaultView属性的getComputedStyle(elem)方法来获取elem元素的当前样式对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #one, #two { position: fixed; width: 200px; height: 200px; } #one { background-color:red ; left:100px; top: 100px; } #two { background-color: blue; left:500px; top: 400px; } </style> </head> <body> <div id="one"> </div> <div id="two"> </div> <script src="js/mylib.js"></script> <script> (function (){ var div1 = $('one'); handleEvent(div1, 'mousedown', function(evt) { evt = evt || window.event; //evt.clientX鼠标的的橫坐标 div1.clickX = evt.clientX; div1.clickY = evt.clientY; div1.mouseFlag = true; //通过元素的style属性我们只能修改元素的样式并不能获取元素的样式 //如果想获得一个元素当前的样式那么可以通过document对象的defaultView属性的 //getComputedStyle(elem)方法来获取elem元素的当前样式对象 var currentStyle = getComputedStyle(div1); div1.originLeft = parseInt(currentStyle.left); div1.originTop = parseInt(currentStyle.top); }); handleEvent(div1, 'mousemove', function(evt) { if (div1.mouseFlag) { evt = evt || window.event; var dx = evt.clientX - div1.clickX; var dy = evt.clientY - div1.clickY; div1.style.left = div1.originLeft + dx + 'px'; div1.style.top = div1.originTop + dy + 'px'; }; }); handleEvent(window, 'mouseup', function() { div1.mouseFlag = false; }) }()); </script> </body> </html>

事件冒泡

如果点击事件放在一个嵌套的模块中,里面的元素相互重叠,点一个重叠的都会反映阻止事件冒泡的方法evt.stopPropagation()停止事件的传播行为(如果是冒泡方式表示不再向父节点传播事件)IE中evt.cancelBubble = true;

事件捕获

addEventListener(elem,callback,true)第三个参数默认是false,如果改成true就是事件捕获,由最先捕获的先处理,与冒泡的方式正好相反第三个参数表示是否采用事件捕获方式,如果设置为true表示事件捕获-由外到里处理事件。如果设置为false表示事件冒泡-由里到外处理事件。

切换页签

在这个例子中就用到了事件冒泡需要注意的是由于这个页面中a标签套用了h3标签,而且俩者大小不一样,所以就很容易出现target对象不一致,而导致bug,所以页面只对H3绑定了事件,并组织的了事件的冒泡由于要修改的是li的class属性,所以要注意target要加两次parentNode.从href中提取id是要注意,得到的值是一个完整的url,并不只是#+地址,所以要用lastIndexOf(‘#’)取到‘#’的索引,再进行截取。 <!DOCTYPE html> <html> <head> <title>JavaScript & jQuery - Chapter 11: Content Panels - Tabs</title> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/tabs.css" /> <style> /********** TABS **********/ .tab-list { margin: 0; padding: 0;} .tab-list li { display: inline-block; list-style-type: none; background-color: #303030; border-bottom: 3px solid #858585; font-family: 'Jacques Francois', serif; text-transform: uppercase; letter-spacing: 0.2em;} .tab-list li a { color: #f2f2f2; display: block; padding: 3px 10px 3px 10px;} /********** HOVER STATES **********/ .tab-list li.active, .tab-list li.hover { background-color: #e5e5e5; border-bottom: 3px solid #e5e5e5;} .tab-list li.active a, .tab-list li a:hover { color: #666; background-color: #e5e5e5;} /********** PANELS **********/ .tab-panel { display: none; background-color: #e5e5e5; color: #666; min-height: 150px; overflow: auto;} .tab-panel.active { display: block;} .tab-panel p { margin: 20px;} </style> </head> <body> <header><h1>Monsieur Pigeon</h1></header> <section class="page"> <div class="tabs"> <ul class="tab-list" > <li class="active"><a class="tab-control" href="#tab-1"><h3>Description</h3></a></li> <li><a class="tab-control" href="#tab-2"><h3>Ingredients</h3></a></li> <li><a class="tab-control" href="#tab-3"><h3>Delivery</h3></a></li> </ul> <div class="tab-panel active" id="tab-1"> <p>Take your tastebuds for a gentle stroll through an English garden filled with Monsieur Pigeon's beautifully fragrant Flower Series marshmallows. With three sweetly floral options: <strong>Elderberry</strong>, <strong>Rose Petal</strong>, and <strong>Chrysanthemum</strong> - all edible and all naturally flavored - they will have you dreaming of butterflies and birdsong in no time.</p> </div> <div class="tab-panel" id="tab-2"> <p><strong>ELDERBERRY:</strong> sugar, glucose syrup, elderberry concentrate, gelatine, natural color, cornflour, confectioner's sugar <strong>ROSE PETAL:</strong> sugar, glucose syrup, rose water, gelatine, natural color, cornflour, sugared rose petals, confectioner's sugar <strong>CHRYSANTHEMUM:</strong> sugar, glucose syrup, natural chrysanthemum extract, gelatine, natural color, cornflour, confectioner's sugar</p> </div> <div class="tab-panel" id="tab-3"> <p>Free postage and packaging on all orders! Due to the perishable nature of our product, we regret that we are unable to ship items internationally at this time. If you would like to find out when Monsieur Pigeon is coming to your country, please sign up for the mailing list.</p> </div> </div><!-- .tabs --> </section><!-- .page --> <script type="text/javascript" src="js/mylib.js" ></script> <script> (function (){ //只对h3绑定事件 var tabs = document.querySelectorAll('.tab-list h3'); for (var i = 0; i < tabs.length; i += 1) { handleEvent(tabs[i], 'click', function(evt) { deactiveAllTabs(); evt = evt || window.event; //阻止冒泡 stopEventBubble(evt); var target = evt.target || evt.srcElement; var currentTab = target.parentNode.parentNode; currentTab.setAttribute('class', 'active'); hideAllContents(); var hrefValue = target.parentNode.href; //取#索引 var divName = hrefValue.substring(hrefValue.lastIndexOf('#') + 1); $(divName).style.display = 'block'; }); } } ()); function deactiveAllTabs() { var tabs = document.querySelectorAll('.tab-list li'); for (var i = 0; i < tabs.length; i += 1) { tabs[i].setAttribute('class', ''); }; }; function hideAllContents() { var divs = document.querySelectorAll('.tab-panel'); for (var i = 0; i < divs.length; i += 1) { divs[i].style.display = 'none'; }; };

小技巧 让while循环至少执行一次,可以加一个布尔值,用或连接原来的条件,执行后直接将其变为false。

下载JQuery的地址 版本1.12.4功能最完整,兼容低版本IE,3.的版本只是体积更小 """ 最好的导入JQuery的方式 直接使用CDN服务器获取jQuery库‘<script src="https://cdn.bootcss.com/jquery /1.12.4/jquery.min.js"></script> """
转载请注明原文地址: https://www.6miu.com/read-2250158.html

最新回复(0)