javascript事件

		//oncllick事件 点击列表中的某项，该项移除
		function $(node){
            return document.querySelector(node); 
        }
        var ul = $("ul");
        ul.addEventListener('click',function(){
             event.target.remove();			//点击ul列表中的某一项				
         });
         
	    //点击列表的某项，其背景变色
	    btn.onclick= function(){
                btn.style.backgroundcolor='pink';
            }
         //点击按钮，网页滚动到顶部
         var btnTop = $("#btnTop");
        btnTop.addEventListener('click',function(){
            document.body.scrollTop = document.documentElement.scrollTop =0;
        });
         //点击按钮，网页滚动到列表顶部
         var btnToList = $("#btnToList");
        btnToList.addEventListener('click',function(){
            ul.scrollTop =0;
        })
        
	//鼠标事件  mouseover、mouseout
	//鼠标移入列表中的某项,该项发生2px位移,鼠标离开,该项位置还原
       ul.addEventListener('mouseover',fn)
        function fn(){
            event.target.style.transform='translate(2px,2px)';
        }
        ul.addEventListener('mouseout',function(){
            event.target.style.transform='translate(-2px,-2px)';
        })
        //一颗跳动(帧动画变大变小)的小星星跟随鼠标移动。
        //event.clientX获取光标的左边距
        var star =document.querySelector("#sec");
          var flag = false;
          star.onmousedown = function(){
              flag=true;
          }
          document.onmousemove = function(){
              if(flag){
                  var x = event.clientX;
                  var y = event.clientY;
                  star.style.left = x+'px';
                  star.style.top = y+'px';
              }
          }
          //按方向键"上",盒子向上缓动移动100px,然后缓动回到原始位置。
          var xx = document.querySelector("#thr");
        document.onkeydown=keyDown;
        function keyDown(event){
            switch(event.keyCode){12 
                case 38 :
                    xx.classList.add("changetop");
                    setTimeout(function(){
                        xx.classList.remove("changetop");
                    },500);
                    break;
            }
            return false;
        }    
	 	//按键盘ctrl+c和ctrl+v实现复制粘贴功能（不用选中）
	 	//keypress只能捕获单个字符，一般用来捕获数字，keyup和keydown可以捕获组合键。

> KeyPress 可以捕获单个字符的大小写 KeyDown和KeyUp 对于单个字符捕获的KeyValue
> 都是一个值，也就是不能判断单个字符的大小写。

	 

var a = document.querySelector("#domA");
    var b = document.querySelector("#domB");
    var copyA='';
    document.addEventListener('keyup',function(e){
        if(e.keyCode==67&&e.ctrlKey==true){
            copyA=a.innerHTML;
        }else if(e.keyCode==86&&e.ctrlKey==true){
            b.innerHTML=b.innerHTML+copyA;
        }
    })

   //change事件 当每次输入完毕后，在控制台输出所有关键词构成的数组
       var input = $("#input1");
        input.addEventListener('change',function(){
            console.log(input.value.split(" "));
        })
        
        //失去焦点 blur  页面中添加一个输入框，用来输入年龄 当输入完毕后，判断年龄是否合法，如果合法在输入框下面使用绿色小字提示合法
        当输入完毕后，判断年龄是否合法，如果合法在输入框下面使用绿色小字提示合法
         var age = $("#input2");
        var texvalid = '合法';
        var texinvalid = '不合法';
        var x=1;
        age.addEventListener('blur',function(){
            for(var i=0;i<age.value.length;i++){
                if(!(age.value[i]>=1&&age.value[i]<=9)){
                   x=0;
                }
            }
            if(x==1){
                $(".valid").innerHTML=texvalid;
            }else{
                $(".invalid").innerHTML=texinvalid;
            }
        })
	//图片加载完后输出图片的宽高比
	var bb = $('#imga');
        var imgbb = bb.getElementsByTagName("img")[0];
        imgbb.onload = function(){
            var imgobj = new Image();
            imgobj.src = this.src;
            console.log("图片的宽高比为："+imgbb.width/imgbb.height);
        }

        //窗口尺寸变化 resize  左大右小两个盒子,窗口尺寸变化时,如果窗口的宽小于1200px就把右侧盒子隐藏,左侧盒子宽变100%。
          var lediv = $(".left-div");
        var ridiv = $(".right-div");
        window.onresize=function(){
            var Width = window.innerWidth;
            var Height = window.innerHeight;
            console.log(Width);
            if(Width<1200){
                lediv.style.width='100%';
                ridiv.style.display='none';
            }else{
                lediv.style.width='48%';
                ridiv.style.width='48%';
                ridiv.style.display='block';
            }
        }
        
	//页面滚动 scroll
var nav = $(".nav");
        window.addEventListener('scroll',function(){
                nav.style.position='fixed';
        })