|
|
@@ -0,0 +1,77 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box">hello</div>
|
|
|
+ <script>
|
|
|
+ var oBox = document.getElementsByClassName("box")[0];
|
|
|
+
|
|
|
+ // function foo(){
|
|
|
+ // console.log("click");
|
|
|
+ // // removeEventListener 移除事件 接受两个参数 第一个事件名称，第二个是事件处理函数（绑定和移除的必须是同一个函数，用匿名函数不可以）
|
|
|
+ // oBox.removeEventListener("click",foo);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // oBox.addEventListener("click",foo)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // oBox.onclick = function(){
|
|
|
+ // console.log(this.innerText);
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ addEventListener绑定事件
|
|
|
+ 接受两个参数 第一个是事件名称如：click、mouseenter... (注意：不用加 on)
|
|
|
+ */
|
|
|
+ // oBox.addEventListener("click",function(){
|
|
|
+ // console.log(this.innerText);
|
|
|
+ // })
|
|
|
+
|
|
|
+ // oBox.addEventListener("mouseenter",function(){
|
|
|
+ // console.log(this.innerText);
|
|
|
+ // })
|
|
|
+ var oHtml = document.documentElement;
|
|
|
+ // 鼠标按下事件
|
|
|
+ // oHtml.onmousedown = function(){
|
|
|
+ // console.log("down")
|
|
|
+ // }
|
|
|
+ // 鼠标移动事件
|
|
|
+ // oHtml.onmousemove =function(){
|
|
|
+ // console.log("move")
|
|
|
+ // }
|
|
|
+ // 鼠标抬起事件
|
|
|
+ // oHtml.onmouseup = function(){
|
|
|
+ // console.log("up");
|
|
|
+ // }
|
|
|
+
|
|
|
+ function foo(e){
|
|
|
+ console.log(e.clientX,e.clientY)
|
|
|
+ }
|
|
|
+ // oHtml.addEventListener("mousedown",function(){
|
|
|
+ // oHtml.addEventListener("mousemove",foo)
|
|
|
+ // oHtml.addEventListener("mouseup",function(){
|
|
|
+ // oHtml.removeEventListener("mousemove",foo)
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+
|
|
|
+ oHtml.onmousedown = function(){
|
|
|
+ oHtml.onmousemove = function(e){
|
|
|
+ console.log(e.clientX,e.clientY)
|
|
|
+ }
|
|
|
+ oHtml.onmouseup = function(){
|
|
|
+ oHtml.onmousemove = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
