JavaScript事件

Posted 2022-10-07 musong-out

事件流是什么？

捕获——确定目标——冒泡     的过程；

• 捕获：事件从顶层元素一级一级向下传递，默认情况捕获阶段不会触发事件；
• 确定目标：找到层级最深的元素，确定目标元素，出发事件；
• 冒泡：从目标元素一级一级向上传递，直到window，传递的同时会依次触发当前元素的事件（默认从冒泡阶段开始触发）

事件委托：

• 利用事件冒泡机制，把事件绑定给祖先元素，事件发生时根据事件源的具体信息判断要做的操作；
• 当需要给很多元素绑定相同的事时，或者是要绑定事件的元素个数不确定时，可以使用事件委托

系统弹出框：

    - alert(‘‘);  //警告提示框 
    - confirm(‘‘);  // 确认提示框 , 返回值 true/false
    - prompt(‘请输入修改后的内容‘);  //输入提示框 , 返回输入的内容 

绑定事件的方法：

DOM0级事件

• ele.事件属性 = 事件处理函数
• DOM0级事件多次绑定同一事件，后面会覆盖前面的

 <div onclick = "alert()"></div>
        
        box.onclick = function()
            console.log(111);
         
        box.onclick = function()
            console.log(222);
         

DOM2级事件：

• 事件类型 : ‘click‘,‘mouseover‘,‘mouseout‘,‘scroll‘....
• 事件处理函数: DOM2级可以绑定多个事件处理函数,按照绑定的顺序执行
• 是否在捕获阶段触发: 默认值false,true事件在捕获阶段触发
• 事件处理函数中的this执行触发事件的元素

 span.addEventListener(‘click‘,function()
                console.log(‘span被点击222‘);
                this.style.backgroundColor = "pink";
            )
        span.addEventListener(‘click‘,function()
                console.log(‘span被点击‘);
            )
        li.addEventListener(‘click‘,function()
                console.log(‘li被点击‘);
            ,true)    

ie事件监听——ele.attachEvent(‘on‘+事件类型,事件处理函数)

 span.attachEvent(‘onclick‘,function()
            console.log(‘111‘);
                console.log(this); // 这里的this不是指向span,而是window
            ) 

移出事件——removeEventListener(事件类型,事件处理函数)

          span.addEventListener(‘click‘,fn1);
            span.addEventListener(‘click‘,fn2);

            document.getElementsByTagName(‘button‘)[0].onclick = function()
              span.removeEventListener(‘click‘,fn1);//移除span点击事件的fn1
            
            //fn2会继续执行

ie浏览器移出事件——detachEvent(‘on‘+事件类型,事件处理函数)

 span.detachEvent(‘onclick‘,fn1);  ie移除事件的方法

滚轮事件：

- 谷歌,ie   ele.onmousewheel = function()    
- 火狐      ele.addEventListener(‘DOMMouseScroll‘,function())   
    ```
        兼容:
        function mouseWeelEvent(ele,fn)
            ele.onmousewheel = fn;
            ele.addEventListener(‘DOMMouseScroll‘,fn)
        
    ```

判断滚轮方向：

        mouseWeelEvent(box,function(event)
            event = event || window.event;
            console.log(event.wheelDelta);//谷歌和ie判断方向  >=120向上  <=-120向下
            console.log(event.detail); //火狐浏览器判断方向  <=-3向上  >=3 向下
            //console.log(‘滚轮事件‘);
             //判断方向兼容写法
           
            var de = 1; // de标记方向 1表示向上,0表示向下
            if(event.wheelDelta)
                de = event.wheelDelta >= 120 ? 1 : 0;
            else
                de = event.detail >=3 ? 0 : 1;
                
        );