JS事件对象

 

          （1）触发谁的事件：事件源

          （2）触发的什么事件：事件类型

          （3）触发以后做什么：事件处理函数

       

        事件绑定:

        方式1：

        box1.οnclick=function(){

         }

        box1.οnclick=function(){}

        以上这种方式进行事件绑定时后面的会覆盖掉前面的

       方式2：addEventListener()事件监听函数：可以绑定多事件函数，依次执行

        // box2.addEventListener("click",function(){})

        // box2.addEventListener("click",function(){})

        此种方式可以给事件绑定多个事件处理函数，且不会被覆盖，依次执行

     

 事件类型

        单击双击事件

         div_0.οnclick=function(){}  单击事件

        div_1.οndblclick=function(){ } 双击事件

        div_2.οnmοusedοwn=function(){} 鼠标按下不松

       div_2.οnmοusemοve=function(){} 鼠标移动

        div_2.οnmοuseup=function(){ } 鼠标抬起

        div_3.οnmοuseοver=function(){}    移入

       div_3.οnmοuseοut=function(){}移出

键盘事件

        username.οnkeydοwn=function(){}  键盘按下

        username.οnkeyup=function(){} 键盘抬起

 

    var list = document.querySelectorAll(".list img");

    var body = document.body;

    for (var i = 0; i < list.length; i++) {

        // 给图片绑定鼠标移入

        list[i].onmouseover = function() {

            body.style.backgroundImage = "url(" + this.src + ")";

        }

    }

  // var result = document.querySelector("#id");

    // result.onclick = function(event) {

    //     // console.log(event.clientX,event.clientY);//距离浏览器视口的坐标

    //     console.log(event.pageX, event.pageY); //距离文档流的坐标

    //     console.log(event.offsetX, event.offsetY); //距离元素本身左上角的坐标

    // }

    var box1 = document.querySelector(".box");

    var p1 = document.querySelector(".box p");

    box1.onmouseover = function() {

        p1.style.display = "block";

    }

    box1.onmouseout = function() {

        p1.style.display = "none";

    }

    box1.onmousemove = function(event) {

        console.log(event.offsetX, event.offsetY);

        p1.style.left = event.offsetX + "px";

        p1.style.top = event.offsetY + "px";

    }