onmouseover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            /* padding: ; */
            background-color: orange;
        }
        /* .box:hover{
            background-color: green;
        } */
        /* 下面的js代码，效果相当于这段css代码
        效果复杂，或者不需要移入移出都触发条件，这时用伪类就不合适了 */
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <script src="./js/utils.js"></script>
    <script>
        //鼠标的滑入滑出 mouseover mouseout
        //存在冒泡行为，解决冒泡行为
        var oBox=document.getElementsByClassName('box')[0],
        oBox1=document.getElementsByClassName('box1')[0];
        oBox.onmouseover=function() {
            this.style.backgroundColor='green';
        }
        oBox.onmouseout=function() {
            this.style.backgroundColor='orange';
        }
        oBox1.onmouseover=function(e) {
            cancelBubble(e)
            this.style.backgroundColor='white';
        }
        oBox1.onmouseout=function(e) {
            cancelBubble(e)
            this.style.backgroundColor='black';
        }
    </script>
</body>
</html>

onmouseover的缺陷

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <script src="./js/utils.js"></script>
    <script>
        // //鼠标的滑入滑出 mouseover mouseout
        // //存在冒泡行为，解决冒泡行为
        var oBox=document.getElementsByClassName('box')[0],
        oBox1=document.getElementsByClassName('box1')[0],
        overCount=0,
        outCount=0;
        // oBox.onmouseover=function() {
        //     this.style.backgroundColor='green';
        // }
        // oBox.onmouseout=function() {
        //     this.style.backgroundColor='orange';
        // }
        // oBox1.onmouseover=function(e) {
        //     cancelBubble(e)
        //     this.style.backgroundColor='white';
        // }
        // oBox1.onmouseout=function(e) {
        //     cancelBubble(e)
        //     this.style.backgroundColor='black';
        // }
        //mouseenter mouseleave
        //绑定大盒子对小盒子也生效，不是事件冒泡，是对所以子元素都生效,取消冒泡没有用
            // oBox.onmouseover = function(e) {
            //     cancelBubble(e);
            //     overCount++;
            //     console.log('overcount:'+overCount);
            // }
            // oBox.onmouseout = function(e) {
            //     cancelBubble(e);
            //     outCount++;
            //     console.log('outcount:'+outCount);
            // }
            //ie支持，都支持，只对绑定的元素负责
            //元素时被绑定，绑定的是事件处理函数
            oBox.onmouseenter = function(e) {
                cancelBubble(e);
                overCount++;
                console.log('overcount:'+overCount);
            }
            oBox.onmouseleave = function(e) {
                cancelBubble(e);
                outCount++;
                console.log('outcount:'+outCount);
            }
    </script>
</body>
</html>

           /*没有冒泡，只对自己生效，复杂时用enter、leave，但也解决不了所有问题
            ,简单时用over、out*/
            oBox.onmouseenter = function(e) {
                this.style.backgroundColor='green';
            }
            oBox.onmouseleave = function(e) {
                this.style.backgroundColor='orange';
            }
            oBox1.onmouseenter=function(e) {
                cancelBubble(e);
                this.style.backgroundColor='white'
            }
            oBox1.onmouseleave = function(e) {
                cancelBubble(e);
                this.style.backgroundColor='black'
            }

实战

循环绑定

;(function(doc) {
  // document->window
  //temporary variable
  var oItems=doc.getElementsByClassName('list-item'),
      curIdx=0;
  console.log(oItems)
  var init=function() {
    bindEvent();
  }
  function bindEvent() {
    // console.log(1)
    for (var i = 0; i <oItems.length;i++){
      addEvent(oItems[i],'mouseover',function(e) {
        oItems[curIdx].className='list-item';
        curIdx=Array.prototype.indexOf.call(oItems,this);
        // console.log(curIdx);
        oItems[curIdx].className+=' active';//循环绑定
      })
    }
  }
  init();
})(document);
// window

事件代理

//方法二：事件代理
;(function(doc) {
  var oList = doc.getElementsByClassName('list')[0],
      oItems = oList.getElementsByClassName('list-item'),
      curIdx = 0;
  var init = function() {
    bindEvent();
  }
  function bindEvent() {
    addEvent(oList, 'mouseover', slide);//绑定slide函数
    addEvent(oList, 'mouseout', slide);
    // addEvent(oList,'mouseover',function(){  //写法二 短触发
    //     addEvent(document,'mousemove',slide);//mousemove长触发 move性能更好
    // });
    // addEvent(oList,'mouseout',function(){
    //     removeEvent(document,'mousemove',slide);
    // });
  }
  function slide(e) {
    var e = e || window.event,
        tar = e.target || e.scrElement;//找到事件源
    oParent = getParent(tar,'li');
    thisIdx = Array.prototype.indexOf.call(oItems,oParent);//oItems在li的第几个
    if(curIdx!==thisIdx){
      // console.log(curIdx,thisIdx);
      oItems[curIdx].className = 'list-item';
      curIdx = thisIdx;
      oItems[curIdx].className+= ' active';
    }
  }
  //无论鼠标停留在哪个函数上都能找到父元素li
  //target事件源头，li找哪个元素，元素名字
  function getParent(target, element) {
    while (target.tagName.toLowerCase() !== element) {
      //不等于继续执行，否则return结束函数
      target = target.parentNode;
    }
    return target;
  }
  init();
})(document);

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;  
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
<script src="./js/untils.js"></script>
<script>
  //换成onmouseover也一样，打印结果一样
    window.onclick=function() {
        console.log('window');
    }
    document.onclick=function() {
        console.log('document');
    }
    box1.onclick = function() {
        console.log('box1')
    }
    box2.onclick = function() {
        console.log('box2')
    }
    //冒泡机制
    //window->document->box1->box2
    //事件流的捕获过程（默认情况下不执行）
    //DOM事件流：事件捕获阶段（不执行）->目标阶段(才开始执行)->冒泡阶段
    //其实就是：目标阶段(才开始执行)->冒泡阶段，捕获没有
</script>
</html>

window.addEventListener('mouseover',function(e) {
  console.log('window')
},true)
document.addEventListener('mouseover',function(e) {
  console.log('document');
},true)
box1.addEventListener('mouseover',function(e) {
  console.log('box1')
},true)
box2.addEventListener('mouseover',function(e) {
  console.log('box2')
    },true)

反过来了

技术学习笔记

【实战】解决事件代理和鼠标移动事件的窘态

onmouseover

onmouseover的缺陷

实战

循环绑定

事件代理

事件冒泡