我的前端入门笔记（9）--常用事件、事件绑定

1.常用事件

onclick事件：当点击时操作

document.getElementById("bnt1").onclick=function(){
    document.getElementById("p1").innerHTML= new Date();
};//点击id为btn1的元素，ID为p1的元素文本内容变为当前日期时间

onchange事件：当对象发生变化时，多用于<input><textarea><select>

 document.getElementById("btn1").onchange=function(){
    this.value=this.value.toUpperCase();
 };//输入完毕，焦点离开输入框时小写字母变为大写

onmousedown:鼠标按下
onmouseup：鼠标松开（click=mousedown+mouseup）
onmouseleave：鼠标移开

下面说一下以下3个事件的区别：
mouseenter ：在鼠标指针进入 div 元素时触发。
onmouseover ：在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。
onmousemove ：在鼠标移动到 div 元素上时触发。

 var i = 0, j=0,k=0;
    document.getElementById('div1').onmouseenter=function(event) {
        i++;
        console.log(i);
    };//鼠标在元素内部移动时计一次，鼠标移出后再进入增加一次
    document.getElementById('div2').onmouseover=function(event) {
        j++;
        console.log(j);
    };//鼠标进入元素内部计数一次，进入元素的子元素再计数一次
    document.getElementById('div3').onmouseover=function(event) {
        k++;
        console.log(k);
    };//鼠标在元素内没移动一步均进行计数；

由以上简单的控制台程序可看出：
1.当容器div内不存在子元素时
mouseenter与mouseover效果相同，都是在容器内部移动只计一次；mousemove则是只要有移动就会计数
2.当容器div内存在子元素时
mousemove：同上
mouseenter：同上
mouseover：进入父元素是计一次，进入子元素时再计一次

了解更多事件点击 这里......

2.this的使用

this代表绑定元素本身

document.getElementById("btn1").onclick=function(){
        this.style.backgroundColor = "red";
    } //即将id为btn1的元素背景变为红色

3.在控制台查看事件部分属性

将事件作为函数参数传入

document.getElementById("btn1").onclick=function(e){
   console.log(e);          // 事件对象，获取事件的全部属性
   console.log(e.target);   //发出事件的元素
   console.log(e.x);        //事件的位置
   console.log(e.type);     //事件的类型
}

4.事件的绑定与解除

addEventListener() ：用于向指定元素添加事件处理函数；
removeEventListener() ：来移除事件的监听。

• 早期ie为attachEvent()和detachEvent()
  为使ie达到兼容，利用如下函数对其做一个简单的封装：

  function bind(el,type,handler){
    if(el.addEventListener){
        el.addEventListener(type,handler);
    }else{
        el.attachEvent('on'+type,function(){
            handler.call(el);
        });
    }
  }
  function handler(){
        /*自定义函数*/
  }