DOM对象、事件种类、Event事件、预加载

 CSS样式
     pointer-events: none;  不接收点击事件

DOM对象.addEventListener("事件类型",事件触发后的回调函数,是否捕获阶段触发（默认是false）/配置对象);

配置对象 {once:true} 仅接受一次事件

捕获阶段目标阶段冒泡阶段

? 外内

? | |

? 内外

e.stopPropagation(); 停止继续冒泡触发

事件触发时，会遇到两种，1、事件侦听的对象，2、事件最终触发的目标对象

如果监听的DOM没有子元素，那么事件侦听的对象，和最终触发的目标对象是一致
但是如果监听的DOM有子元素，而恰巧点击到这个子元素上，侦听的对象就是外面的父元素，目标点击的对象就是子元素

事件侦听的对象  e.currentTarget   this

 事件最终触发的目标对象   
 e.target  e.srcElement(IE)

当容器内有多个子元素需要侦听事件时，我们只需要给父元素侦听事件，通过e.target判断被点击

到的实际目标对象，这种方法我们叫事件委托，把子元素的事件委托给父元素

 e.preventDefault(); 去除默认事件行为（比如取消右键菜单，提交表单跳转...

右键菜单的设定主要是通过contextmenu事件来激活

 e.stopImmediatePropagation();如果一个DOM对象针对同一事件类型，侦听多次，执行不同
      的事件函数，在某个事件函数中使用该方法，可以阻止后续的事件方法执行，事件谁先侦听，谁先执行

  DOM对象.removeEventListener("事件类型",要删除的侦听事件执行的函数)

事件种类

 document.onclick=function(){
            // 删除事件
            document.onclick=null;
        }

//添加事件  document.addEventListener("click",clickHandler);
 //兼容ie8以下       document.attachEvent("onclick",clickHandler);

        function clickHandler(){
   //移除事件         document.removeEventListener("click",clickHandler);
   //兼容ie8的移出事件         document.detachEvent("onclick",clickHandler);
        }

  1、onclick会造成回调地狱
      2、addEventListener允许捕获阶段触发，但是onclick不允许捕获阶段触发
      3、onclick仅允许执行最后一次赋值的函数，事件只能独立执行一个函数，addEventListener可以执行多个函数
      4、addEventListener支持自定义事件的侦听和抛发，on没有自定义事件侦听
      5、on支持所有浏览器，addEventListener支持IE8以上
      6、on代码写起来简单容易理解编写，addEventListener适用于函数式编程

Event事件

 change  主要针对表单，当表单或者表单元素发生改变，在失焦后触发该事件
   所有的表单都必须要写name，checkbox和radio都必须要写value
   可以针对表单form和其表单的元素侦听

 error  错误

 load   加载完成

预加载

        // 预加载
        var arr=[]
        for(var i=2;i<7;i++){
            var img=new Image();
            img.src="./img/"+i+".jpg";
            img.addEventListener("load",loadHandler);
        }

        function loadHandler(e){
            arr.push(this);
            if(arr.length===5){
                // console.log(arr)
                arr.forEach(function(item){
                    console.log(item.src);
                })
            }
        }

// 预加载
        var n=2;
        var arr=[];
        function loadImage(){
            var img=new Image();
            img.addEventListener("load",loadHandler);
            img.src="./img/"+n+".jpg";
        }

        function loadHandler(e){
            this.removeEventListener("load",loadHandler)
            arr.push(this);
            n++;
            if(n>6){
                loadFinishHandler();
                return;
            }
            loadImage();
        }

        function loadFinishHandler(){
            arr.forEach(function(item){
                console.log(item.src)
            })
        }

        loadImage();

 注意：offsetWidth clientWidth scrollWidth 获取的前提条件1、必须放在body中，2、必须要有宽高

针对表单
  reset  重置  侦听重置表单事件
  submit 提交  侦听提交表单事件

针对window
  resize 重设大小  window的窗口发生改变大小时，触发

select  选择 针对input文本框或者textarea文本域使用，当选择其中文字时触发

scroll  滚动条 当滚动条滚动时触发 任何具备有滚动条的都可以触发，窗口的只能使用document或者window

前端学习（第二阶段）

DOM对象、事件种类、Event事件、预加载

相关

标签