枯燥的js事件

绑定事件

ele.onclick(事件类型) = function(){}
但只能绑定一个函数
基本等于写在html行间上

<div style="width: 100px; height: 100px; background-color: red;"></div>
<script>
    var  div = document.getElementsByTagName('div')[0];
    div.onclick = function(){
    
    
        console.log('a');
        this.onclick=null;//只能执行一次
    }
</script>

ele.addEventListener(‘事件类型’，function(){}，false)
能绑定多个函数，并按照顺序执行,但同一个函数不能多次执行

 <div style="width: 100px; height: 100px; background-color: red;"></div>
<script>
    var  div = document.getElementsByTagName('div')[0];
   div.addEventListener('click',function(){
    
    
       console.log('a');
   },false)
   
   div.addEventListener('click',function(){
    
    
       console.log('b');
   },false)
</script>

ele.attachEvent(‘事件类型’,function(){})
只能在IE上执行。

注意

当绑定事件需要在循环里面执行时，一定要考虑闭包

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
<script>
    var li = document.getElementsByTagName('li');
    var len = li.length;
    for(var i = 0 ; i<li.length;i++){
    
    
        (function(i){
    
    
            li[i].addEventListener('click',function(){
    
    
                console.log(i+1);
             },false)
        }(i))
        
    }
</script>

事件处理模型

事件冒泡
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素。（自底向上）
嵌套关系
当点击box的时候，事件会逐渐向父级传递。

<div class="wrapper">
        <div class="demo">
            <div class="box">
                    123
            </div>
        </div>
    </div>

事件捕获
XXXXXXXXXXXXXXXXXX，自父元素捕获至子元素（事件源元素）。（自顶向下）

div.addEventListener('click',function(){
    
    
       console.log('a');
   },true)//吧false改成true就是捕获

触发顺序，先捕获，再冒泡

---

取消冒泡
event.stopPropagation();不支持ie9以下版本

event.onclick = fuction(e){
    
    //可以传一个形参。
	e.stopPropagation();
}

IE：e.cancelBubble = true;

---

阻止默认事件

主要有表单提交，a标签跳转，右键菜单等

扫描二维码关注公众号，回复： 12729728 查看本文章

1.return false;一对象属性的方式注册的事件才生效 onclick等
2.event.preventDefault(); IE 9 以下不兼容
3.event.returnValue = false; 兼容IE

封装

 function cancelHandler(event){
    
    
        if(e.preventDefault){
    
    
            e.preventDefault();
        }else{
    
    
            e.returnValue = false;
        }
    }

---

事件源对象

ele.onclick = function(e){
    
    
        var event = e || window.event;
        var target = event.target||event.srcElement
        console.log(target);
    }

事件委托
利用事件冒泡，和事件源对象进行处理

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    ul.onclick = function(e){
    
    
        var event = e|| window.event;
        var target = event.target||event.srcElement;
        console.log(target.innerText);
    }
</script>