学习笔记（11）js事件

• 1

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

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

2，鼠标事件

1. onmousedown：鼠标按下时触发

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

2. onmouseup：鼠标松开

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

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

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

4. onmouseleave：鼠标离开时触发

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

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

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

3，键盘事件

1. onkeydown：键盘按下时触发

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

2. onkeyup：按键弹起时

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

3. onkeypress：正在点击时触发

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

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("拖到了底部");
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2，scroll事件

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

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

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

//最大滚动偏移量=元素内容高度-元素自身高度。
1
2
3
4
5
6
7
8
9
10

5，事件的传播过程

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

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

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

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

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

newBtn.removeEventListener("click",f1);
1