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

最新推荐文章于 2023-03-23 20:29:43 发布

xiaopang_0724

最新推荐文章于 2023-03-23 20:29:43 发布

阅读量313

点赞数

本文链接：https://blog.csdn.net/xiaopang_0724/article/details/80386398

版权

演示

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

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>

用鼠标拖动模块

熟练使用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表示事件冒泡-由里到外处理事件。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript &amp; 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';
            };
        };