js 事件

最新推荐文章于 2022-08-08 18:23:05 发布

花江夏树

最新推荐文章于 2022-08-08 18:23:05 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/onepunchmen00/article/details/78697068

版权

常见事件类型：

用户点击事件鼠标经过特定事件用户按下键盘事件用户滚动窗口或改变窗口大小页面元素加载完或加载失败

定义事件

例子

三种绑定事件的方法优缺点

直接在html中绑定的方式不要用！！！

勘误

DOM0级事件,应该是同种类型下只能绑定一个事件句柄而不是事件类型. 即如果是同一个btn.onclick 有两个事件句柄只会以后一个为准

绑定事件的兼容情况

事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>DOM2级事件处理</title>
</head>
<body>
   <button id="myBtn">点击我</button>
   <script type="text/javascript">
      // 事件依附元素作用域
      var btn = document.getElementById("myBtn");
      btn.addEventListener("click", function(){
         alert(this.id);
      }, false);

      // 元素可以添加多个事件
      var btn = document.getElementById("myBtn");
      btn.addEventListener("click", function(){
         alert(this.id);
      }, false);
      btn.addEventListener("click", function(){
         alert("Hello World");
      }, false);

      // 如何解除事件绑定
      // 错误做法
      var btn = document.getElementById("myBtn");
      btn.addEventListener("click", function(){
         alert(this.id);
      }, false);

      btn.removeEventListener("click", function(){
         alert(this.id);
      }, false);

      // 正确做法 保证addxx和removexx中的参数相同
      var btn = document.getElementById("myBtn");
      var handler = function(){
         alert(this.id);
      }
      btn.addEventListener("click", handler, false);

      btn.removeEventListener("click", handler, false);


   </script>
</body>
</html>

DOM0级事件移除事件只需例如 obj.onclick = null；

IE事件流

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>IE事件处理程序</title>
</head>
<body>
   <button id="myBtn">点击我</button>
   <script type="text/javascript">
      // 事件依附元素作用域
      var btn = document.getElementById("myBtn");
      btn.attachEvent("onclick", function(){
         alert("Clicked");
      });

      // this指向window ie下的规定匿名函数的this指向window
      btn.attachEvent("onclick", function(){
         alert(this === window);
      });

      // 添加多个事件
      var btn = document.getElementById("myBtn");
      btn.attachEvent("onclick", function(){
         alert("Clicked");
      });
      btn.attachEvent("onclick", function(){
         alert("Hello world!");//俩个事件都能绑定上去
      });
      

      // 移除事件
      var btn = document.getElementById("myBtn");
      var handler = function(){
         alert(this.id);
      }
      btn.attachEvent("click", handler);

      btn.detachEvent("click", handler);


   </script>
</body>
</html>

写一套代码兼容ie和非ie

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>跨浏览器的事件处理程序</title>
</head>
<body>
   <button id="myBtn">点击我</button>
   <script type="text/javascript">
      // 事件依附元素作用域
      var EventUtil = {
         addHandler: function(element, type, handler){
            if(element.addEventListener){
               element.addEventListener(type, handler, false);
            }else if(element.attachEvent){
               element.attachEvent("on" + type, handler);
            }else{
               element["on"+type] = null
            }
         },
         removeHandler: function(element, type, handler){
            if(element.removeEventListener){
               element.removeEventListener(type, handler, false);
            }else if(element.detachEvent){
               element.detachEvent("on" + type, handler);
            }else{
               element["on"+type] = null
            }
         }
      }

      var btn = document.getElementById("myBtn");
      var handler = function(){
         alert("Clicked");
      }
      EventUtil.addHandler(btn, "click", handler);
      EventUtil.removeHandler(btn, "click", handler);

   </script>
</body>
</html>

事件委托和事件冒泡

addeventlistener后面的false就是事件冒泡默认为false true就是事件捕获

事件冒泡

事件捕获

大部分情况用事件冒泡

事件委托（原理是事件冒泡）

问：如果采用html或者DOM0级事件绑定事件的时候,是默认事件冒泡吗???

“默认事件冒泡”这句话是不合适的。只能说通过DOM0级事件处理添加的事件，无法控制冒泡、捕获，但是可以取消事件冒泡(在冒泡阶段的事件传递)。

Event对象属性

event.type事件类型

target和eventtarget

preventDefault

// 阻止默认行为
var link = document.getElementById("myLink");
link.onclick = function(event){
   event.preventDefault();
}


stopPropagation
// 取消事件捕获或者冒泡
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
   alert("Clicked");
   event.stopPropagation();
}
document.body.onclick = function(event){
   alert("Body clicked");
}


ie8下event属性
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>IE中的事件对象</title>
</head>
<body>
   <button id="myBtn">点击我</button>
   <script type="text/javascript">
       // DOM0中获取事件对象
       var btn = document.getElementById("myBtn");
       btn.onclick = function(){
         var events = window.event;
         alert(events.type);    //"click"
       }

       // attachEvent方式获得事件对象
       var btn = document.getElementById("myBtn");
       btn.attachEvent("onclick", function(event){
         alert(event.type);
       });

       // 有cancelBubble  returnValue  srcElement  type 
       var btn = document.getElementById("myBtn");
       btn.onclick = function(){
         alert(window.event.srcElement === this);      //true 等同于target
       }

       btn.attachEvent("onclick", function(event){
         alert(event.srcElement === this);       //false
       })

       // IE浏览器中阻止默认事件
       var link = document.getElementById("myLink");
       link.onclick = function(){
         window.event.returnValue = false;//同preventDefault
       }

       // IE阻止事件冒泡
       var btn = document.getElementById("myBtn");
       btn.onclick = function(){
         alert("Clicked");
         window.event.cancelBubble = true;//等于stopPropagation
       }
       document.body.onclick = function(){
         alert("body clicked");
       }

       // 跨浏览器的事件对象 兼容性写法！！！！！！！！！！
       var EventUtil = {
         addHandler: function(element, type, handler){

         },
         getEvent: function(event){
            return event? event : window.event;
         },
         getTarget: function(event){
            return event.target || event.srcElement;
         },
         preventDefault: function(event){
            if(event.preventDefault){
               event.preventDefault();
            }else{
               event.returnValue = false;
            }
         },
         removeHandler: function(element, type, handler){

         },
         stopPropagation: function(event){
            if(event.stopPropagation){
               event.stopPropagation();
            }else{
               event.cancelBubble = true;
            }
         }
       }

       btn.onclick = function(event){
         var event = EventUtil.getEvent(event);
         var target = EventUtil.getTarget(event);
       }

      btn.onclick = function(event){
         var event = EventUtil.getEvent(event);
         EventUtil.preventDefault(event);
      }

      btn.onclick = function(event){
         alert("Clicked");
         var event = EventUtil.getEvent(event);
         EventUtil.stopPropagation(event);
      }

      document.body.onclick = function(event){
         alert("Body clicked");
      }
   </script>
</body>
</html>

使用

事件类型

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>js中常用的事件</title>
</head>
<body>
   <script type="text/javascript">
      // UI事件
      // 1、load
      // 当页面完全加载后在window上面触发
      var EventUtil = {};//补充前面
      EventUtil.addHandler(window, "load", function(e){
         alert("Loaded!");
      });

      // img标签加载完毕
   /* var image = document.createElement('img');
      image.src = "";
      EventUtil.addHandler(image, "load", function(e){
         e = EventUtil.getEvent(e);
         alert(EventUtil.getTarget(e).src);
      })*/

      // 实例img预加载
   /* EventUtil.addHandler(window, "load", function(){
         var image = new Image();
         img.src = "";//将图片缓存到内存上面
         EventUtil.addHandler(image, "load", function(event){
            alert("Image loaded!");
         })
      })*/
      // js动态加载完毕
      /*EventUtil.addHandler(window, "load", function(){
         var script = document.createElement("script");
         EventUtil.addHandler(script, "load", function(event){
            alert("js Loaded");
         });
         script.src = "example.js";
         document.body.appendChild(script);
      });*/

      // css动态加载完毕
      EventUtil.addHandler(window, "load", function(){
         var link = document.createElement("link");
         link.type = "text/css";
         link.rel = "stylesheet";
         EventUtil.addHandler(link, "load", function(event){
            alert("css Loaded");
         });
         link.href = "example.css";
         document.getElementsByTagName("head")[0].appendChild(link);
      });

      // 2、unload事件 用户从一个页面切换到另外一个 页面  不好举例子。。
      EventUtil.addHandler(window, "unload", function(event){
         alert("Unloaded");
      });

      // 3、resize事件
      EventUtil.addHandler(window, "resize", function(event){
         alert("Resized");
      })

      // 4、scroll事件.  主要针对新旧浏览器 耗性能
      EventUtil.addHandler(window, "scroll", function(event){
         if(document.compatMode == "CSS1Compat"){
            // 新
            alert(document.documentElement.scrollTop)
         }else{
            // 旧
            alert(document.body.scrollTop);
         }
      });
      //焦点事件
      var input = document.getElementById('input');
      //1.blur
      EventUtil.addHandler(input , 'blur' , function (event) {
         alert('元素失去焦点时候触发');
        });

      //2.focus 不支持冒泡
      EventUtil.addHandler(input , 'focus' , function (event) {
         alert('元素获得焦点触发');
        })

      //3.focusin 同focus 支持冒泡  4.focusout 同blur 这俩区别在于浏览器支持上

      // 鼠标事件  down + up = click
      EventUtil.addHandler(document, "mousedown", function(event){
         alert("mousedown");
         console.log(event.button);//等于0的时候 鼠标左键  等于1 鼠标中键 等于2 右键
         //ie8里 等于0 没有按下按钮  等于1 按下主鼠标按钮   等于2 按下次鼠标按钮 ？？？ 等于3 同时按下主次鼠标按钮 等于4 中间鼠标按钮...
      })
      EventUtil.addHandler(document, "mouseup", function(event){
         alert("mouseup");
      })
      //mouseover 进入目标元素执行 像这种重复触发次数多的 内部代码要简洁
      // mouseout 鼠标离开这个元素
      //mouseenter mouseleave



      EventUtil.addHandler(div, "click", function(event){
         alert("client" + event.clientX);
         alert("client" + event.pageX);
         alert("client" + event.screenX);
      })
      //双击  dbclick
        EventUtil.addHandler(btn, "dbclick", function(event){
            alert("1111");
        })

      // 键盘事件   在文本框内按下键盘
      var textBox = document.getElementById("textBox");
      EventUtil.addHandler(textBox, "keyUp", function(event){
         alert(event.keyCode);
      })
      //keydown 
      // 触摸与手势事件
      function handleTouchEvent(event){
         switch(event.type){
            case "touchstart": 
               alert("touchstart");
               break;
            case "touchmove":
               alert("touchmove");
               break;
            case "touchend":
               alert("touchend");
               break;
         }
      }
      EventUtil.addHandler(document, "touchstart", handleTouchEvent);
      EventUtil.addHandler(document, "touchmove", handleTouchEvent);
      EventUtil.addHandler(document, "touchend", handleTouchEvent);

   </script>
</body>
</html>