学习笔记（11）js事件

1，事件绑定

1. 通过html标签的属性进行事件绑定。

onclick：点击事件，当点击按钮的时候事件会触发，
zanClick(event)：当事件激活的时候要去执行的函数的名称和参数。

 <button οnclick="zanClick(event)" 

2. 在js中为元素绑定事件

var btn =document.getElementById("btn");
    // 因为onclick是个标准属性所以可以直接调用
    btn.onclick =function(e){
        console.log("这是通过js来执行的事件:"+e);
    }

2，鼠标事件

1. onmousedown：鼠标按下时触发

box.onmousedown =function(e){
        console.log("鼠标按下去了!!!");
    }

2. onmouseup：鼠标松开

 box.onmouseup =function(e){
        console.log("鼠标松开了!!!");
    }

3. nmouseenter：鼠标指针进入时触发

box.onmouseenter =function(e){
        console.log("鼠标指针进入了!!!");
    }

4. onmouseleave：鼠标离开时触发

box.onmouseleave =function(e){
        console.log("鼠标离开了!!!");
    }

5. onmousemove：鼠标指针移动，频繁触发

box.onmousemove =function(e){
        console.log("鼠标指针移动，频发!!!");
    }

3，键盘事件

1. onkeydown：键盘按下时触发

document.body.onkeydown =function(e){
        //   e.key代表键盘按键上面的值，系统通过捕捉按键，
        // 来拿到按键的值
          console.log(e.key);
        //   按键的编码
          console.log(e.keyCode);
    }

2. onkeyup：按键弹起时

 document.body.onkeyup =function(e){
        console.log(e.key);
    }

3. onkeypress：正在点击时触发

document.body.onkeypress =function(e)
    {// 正在点击按键的时候触发
        console.log(e.key);
    }

4，元素的滚动事件

1，onscroll：滚动监听事件，当元素发生内容滚动时，事件触发。

page.onscroll =function(e){
   // e.target >>>当前事件的所属对象
   // 获取当前元素本身的高度
   console.log("元素本身:"+e.target.clientHeight);
   // 元素内容高度
   console.log("滚动内容:"+e.target.scrollHeight);
   //  纵向偏移量
   console.log("元素的纵向偏移:"+e.target.scrollTop);
   // 判断内容是否到底
   if (e.target.scrollTop ==
       e.target.scrollHeight - e.target.clientHeight) {
       console.log("拖到了底部");
   }
}

2，scroll事件

//scrollTop属性，表示元素的纵向滚动偏移量。
console.log(e.target.scrollTop);

//clientHeight，元素本身的高度（不带边框）
console.log(e.target.clientHeight);

//scrollHeight，元素内容的高度
console.log(e.target.scrollHeight);

//最大滚动偏移量=元素内容高度-元素自身高度。

5，事件的传播过程

子元素的事件触发会带动父元素的事件触发。
事件传播分为两个：

从上到下的捕获过程,
从下到上的冒泡过程。

1，addEventListener：添加监听，3个参数：

参数	描述
1参	监听事件的类型。
2参	监听事件的函数，监听成功后调用。
3参	一个布尔值，代表事件在XX阶段触发。默认是flase表示在冒泡阶段触发，true代表该事件在捕获阶段触发。

newBtn.addEventListener("click",f1,true);

2，removeEventListener：删除事件。如果事件在捕获阶段进行监听的，是无法删除的。
一些特殊的事件是无法阻止的，例如a标签的跳转。

newBtn.removeEventListener("click",f1);