码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript事件

时间:2019-09-07 15:59:40      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:写法   开始   利用   火狐   log   ash   this   use   eve   

事件流是什么?

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

  • 捕获:事件从顶层元素一级一级向下传递,默认情况捕获阶段不会触发事件;
  • 确定目标:找到层级最深的元素,确定目标元素,出发事件;
  • 冒泡:从目标元素一级一级向上传递,直到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;
            }    
        });

 

JavaScript事件

标签:写法   开始   利用   火狐   log   ash   this   use   eve   

原文地址:https://www.cnblogs.com/musong-out/p/11481276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!