事件 - 简书

1、鼠标的移入移除
js部分

//onmouseover、onmouseout子集到父级和父级到子集都活触发
        yellow.onmouseover = function(){ }
        yellow.onmouseout = function(){ }
//鼠标进去 onmouseenter.onmouseleave只在当前目标元素触发一次
        yellow.onmouseenter = function(){ }
        yellow.onmouseleave = function(){}

2、鼠标事件
js部分

//鼠标单击 onclick
        div1.onclick = function(){}
// 鼠标双击   ondblclick
         div1.ondblclick = function(){ }
// 鼠标按下 onmousedown
        div1.onmousedown = function(){ }
// 鼠标抬起onmouseup
         div1.onmouseup = function(){}
// 右击鼠标oncontextmenu
         div1.oncontextmenu = function(){}
// 鼠标移动 onmousemove
         div1.onmousemove = function(){}

3、事件对象
js部分

我们可以通过事件对象来拿到鼠标事件、 键盘事件所携带信
息。获取事件对象可以 直接通过 window.event 拿到这个对
象,但是由于火狐浏览器并不支持这个方法,所以 我们一般需
要在触发事件的函数中传入 event 参数,以适配火狐
// 为什么加window 为了兼容浏览器更早的版本
       document.onmouseup = function(e){
        var ev = e||window.event;
}

4、键盘事件
js部分

 onkeydown按下键盘  携带的一个参数是:keyCode，这
个参数的每个按键的编码，我们可以通过编码判断用户按下
的键
练习：（上、下、左、右键控制div的移动）
部分代码如下：
 document.onkeydown = function(e){
             var ev= e||window.event;
             switch (e.keyCode)
                  {
                  case 37:
                    div1.style.left = div1.offsetLeft-10+'px';
                    break;
                  case 38:
                    div1.style.top = div1.offsetTop-10+'px';
                    break;
                  case 39:
                    div1.style.left = div1.offsetLeft+10+'px';
                    break;
                  case 40:
                    div1.style.top = div1.offsetTop+10+'px';
                    break;
                  default;
                    console.log('其他按键');
                  }
         }

5、输入框事件
js部分

    // onfocus当输入框聚焦时触发
        btn.onfocus = function(){ }
    // onblur当输入框失焦时触发
       btn.onblur = function(){}
    // oninput当在输入框输入内容的时候触发   实时监听
        btn.oninput = function(){}
    // onchange  当输入框内的内容修改时触发   提交监听
        btn.onchange = function(){}

6、表单事件
js部分

  // onsubmit表单提交事件
        form1.onsubmit = function(e){
            var e= ev||window.event;
            if (userName.value==''|| passWord.value == '') {
                //方式1. 阻止默认事件
                // e.preventDefault()   ie6-ie8不兼容 只针对on事件;
                //方式2. 阻止默认事件
                return false;
            }
        }

7、事件冒泡与下沉、如何阻止事件传递、事件的绑定/监听
js部分

  // 事件冒泡  子节点事件带动父节点一级级执行
  // 事件冒泡  父级先执行，一级级到下面的子集执行
  // 阻止事件传递
            // 1.cancelBubble = true;(非标准)
            // 2.stopPropagation();
            用法： event.cancelBubble = true;
                  event.stopPropagation();
//事件的绑定/监听  addEventListener(‘事件’，函数，true/false);
                          注意： true下沉   false 冒泡(默认)
// 移除事件removeEventListener
例：
     var color = document.querySelectorAll('div');
        for (var i = 0; i < color.length; i++) {
            color[i].addEventListener('click',function(e){
                var ev= e||window.event;
                e.stopPropagation();
                console.log(this.id);
            },true);
        }
练习：（div的拖拽  js部分代码）
      document.addEventListener('mousedown',function(){
            div1.addEventListener('mousemove',FN,false);
        },false);
        document.addEventListener('mouseup',function(){
            div1.removeEventListener('mousemove',FN,false);
        },false);

        function  FN(e){
            var ev= e||window.event;
            div1.style.left = e.clientX-div1.offsetWidth/2+'px';
            div1.style.top = e.clientY-div1.offsetHeight/2+'px';
        }

事件

推荐阅读更多精彩内容