你好javascript day13

1）事件侦听和删除

// 1、侦听事件函数不能带入任何参数

// 2、侦听事件函数有且仅有一个参数e就是事件接收到事件对象，其他函数没有

// 3、事件函数不能写return 返回值，但是可以用return跳出

元素.addEventListenter("事件类型"，事件回调函数);

元素.on+"事件类型"=function(){};

onclick=函数任何浏览器都支持

缺点同一个事件不能执行多个函数

没有捕获，冒泡阶段选项，仅是冒泡阶段

使用的是匿名函数，也就会造成多个事件不能执行同一个函数

不能使用自定义事件

删除 bn.onclick=null;

移除事件以及事件回调函数

this.removeEventListener("click",clickHandler1);

当元素的事件不再使用时，必须删除，否则会造成内存堆积，侦听事件都会被存储在堆中

当元素被删除了，也必须删除该元素的所有事件

元素.attachEvent("onclick",clickHandler);

抛发事件

2)Event 事件

change 一般用于表单元素

当失焦时，判断元素的内容有没有改变 value

error 抛出错误 load 加载 unload 卸载

reset 重置 submit 提交 form内

select 这是针对输入文本框和多行文本框

input.selectionStart 选择起始位置

input.selectionEnd 选择结束位置

resize 重新定义大小时

3）MouseEvent

click 点击

dblclick 双击

mousedown 按下

mouseup 松开

mousemove 移动

mouseover 滑入

mouseout 滑出

mouseenter 进入

mouseleave 离开

contextmenu 右键菜单

e下面的属性

target 目标元素

currentTarget 侦听元素，进入该事件函数时的侦听目标，也就是谁执行addEventListener方法，默认和this完全相同

srcElement 目标元素，实际被点到的元素和target完全一样

坐标数据鼠标数据

点击元素位置相对可是窗口左上角位置

clientX

clientY

如果目标元素没有定位相对页面左上角位置

如果目标元素定位，则时相对目标元素左上角

layerX

layerY

相对目标对象的左上角位置

offsetX

offsetY

点击位置相对页面的左上角位置

pageX

pageY

移动偏移坐标，主要用在mousemome事件

相较于上一次移动点的坐标，x向右，负数向左，y正数向下，正数向上

movementX

movementY

点击位置相对屏幕左上角位置

screenX

screenY

这个与clientX和clientY相同，这个新出

button buttons which

0 1 1 左键

1 4 2 中键

2 2 3 右键

preventDefault() 取消默认事件

returnValue=false IE中取消默认事件

菜单案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Utils.js"></script>
    <style>
        div
        {
            background-color: deepskyblue;
            ;
        }
    </style>
</head>
<body>
    <script>
        var ul,selectedElem,copyElem;
        var list=["新建","复制","剪切","粘贴","删除"];
        const RECT_W=50;
        const RECT_H=50;
        init();
        function init() {
            ul=Utils.$c("ul",document.body,{
                listStyle:"none",
                padding:0,
                margin:0,
                display:"none",
                position:"absolute",
                zIndex:1
            });
            for(var i=0;i<list.length;i++){
               var li=Utils.$c("li",ul,{
                   padding:"7px 30px",
                   color:"#FFFFFF",
                   backgroundColor:"dodgerblue",
                   cursor: "default"
               });
               li.textContent=list[i];
            }
            ul.addEventListener("mouseover",mouseHandler);
            ul.addEventListener("mouseout",mouseHandler);
            ul.addEventListener("mouseleave",mouseHandler);
            ul.addEventListener("click",clickHandler);
            document.addEventListener("contextmenu",showMenuHandler)
        }
        
        function showMenuHandler(e) {
            e.preventDefault();
            ul.style.display="block";
            ul.style.left=e.clientX-20+"px";
            ul.style.top=e.clientY-10+"px";
        }
        
        function mouseHandler(e) {
            if(e.type==="mouseover" && e.target instanceof HTMLLIElement){
                e.target.style.backgroundColor="deepskyblue";
            }else if(e.type==="mouseout" && e.target instanceof HTMLLIElement){
                e.target.style.backgroundColor="dodgerblue";
            }else if(e.type==="mouseleave"){
                this.style.display="none";
            }
        }

        function clickHandler(e) {
            var index=list.indexOf(e.target.textContent);

            switch (index)
            {
                case 0:
                    createElem(e.x,e.y);
                    break;
                case 1:
                    if(!selectedElem) break;
                    copyElem=selectedElem.cloneNode(false);
                    break;
                case 3:
                    if(!copyElem) break;
                    var pasteElem=copyElem.cloneNode(false);
                    document.body.appendChild(pasteElem);
                    pasteElem.addEventListener("click",selectedElemHandler);
                    pasteElem.style.left=e.x-RECT_W/2+"px";
                    pasteElem.style.top=e.y-RECT_H/2+"px";
                    pasteElem.style.border="none";
                    break;
                case 2:
                    if(!selectedElem) break;
                    copyElem=selectedElem.cloneNode(false);
                case 4:
                    if(!selectedElem) break;
                    selectedElem.removeEventListener("click",selectedElemHandler);
                    selectedElem.remove();
                    selectedElem=null;
                    break;
            }
            ul.style.display="none";
        }
        
        function createElem(x,y) {
            var elem=Utils.$c("div",document.body,{
                RECT_W+"px",
                height:RECT_H+"px",
                backgroundColor:Utils.randomColor(),
                position:"absolute",
                left:x-RECT_W/2+"px",
                top:y-RECT_H/2+"px"
            });
            elem.addEventListener("click",selectedElemHandler);
        }

        function selectedElemHandler(e) {
            if(selectedElem){
                selectedElem.style.border="none";
                Utils.dragOff(selectedElem);
            }
            selectedElem=this;
            selectedElem.style.border="1px solid #000000";
            Utils.dragOn(selectedElem);
        }



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

点击创建拖拽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/Utils.js"></script>
</head>
<body>
    <script>
        var time;
        var bool=false;
        init();
        function init(){
            document.addEventListener("click",clickHandler);
            document.addEventListener("mousedown",mouseHandler);
            document.addEventListener("mouseup",mouseHandler);
        }
        function clickHandler(e){
            if(bool) {
                bool=false;
                return
            }
            var w=Utils.randoms(100,20);
            var div=Utils.ce("div",{
                w+"px",
                height:w+"px",
                backgroundColor:Utils.randomColor(),
                position:"absolute",
                left:e.clientX-w/2+"px",
                top:e.clientY-w/2+"px"
            });
            document.body.appendChild(div);
            Utils.dragOn(div);
        }

        function mouseHandler(e){
            if(e.type==="mousedown"){
                time=new Date().getTime();
            }else if(e.type==="mouseup"){
                bool=new Date().getTime()-time>200;
            }
        }
    </script>
</body>
</html>

点击创建元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/Utils.js"></script>
</head>
<body>

    <script>

        init();
        function init(){
            document.addEventListener("click",clickHandler);
        }


        function clickHandler(e){
            createRect(e.clientX,e.clientY);
        }

        function createRect(x,y){
            var w=Utils.randoms(80,40);
            var rect=Utils.ce("div",{
                w+"px",
                height:w+"px",
                backgroundColor:Utils.randomColor(),
                position:"absolute",
                left:x-w/2+"px",
                top:y-w/2+"px"
            });
            document.body.appendChild(rect);
        }

/* 
        function ce(type,style){
            var elem=document.createElement(type);
            // 将style对象的所有属性复制到elem.style对象上，IE8以上
            Object.assign(elem.style,style);
            return elem;
        }

        function randoms(max,min){
            if(min===undefined) min=0;
            return Math.floor(Math.random()*(max-min)+min);
        }

        function randomColor(){
            var col="#";
            for(var i=0;i<6;i++){
                col+=randoms(16).toString(16);
            }
            return col;
        }
 */
    </script>
</body>
</html>

计算器：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .con {
         500px;
        height: 600px;
        border: 1px solid #000000;
        position: relative;
        margin: auto;
      }
      .show {
         300px;
        height: 40px;
        border: 1px solid #000000;
        margin: auto;
        margin-top: 20px;
        line-height: 40px;
        text-align: right;
        padding: 5px;
      }
      .bn {
         60px;
        height: 60px;
        padding: 20px;
        line-height: 60px;
        float: left;
        text-align: center;
        border: 1px solid #000000;
        margin-top: 25px;
        margin-left: 18px;
      }
    </style>
  </head>
  <body>
    <div class="con">
      <div class="show"></div>
      <div class="bn">1</div>
      <div class="bn">2</div>
      <div class="bn">3</div>
      <div class="bn">4</div>
      <div class="bn">5</div>
      <div class="bn">6</div>
      <div class="bn">7</div>
      <div class="bn">8</div>
      <div class="bn">9</div>
      <div class="bn">0</div>
      <div class="bn">+</div>
      <div class="bn">-</div>
      <div class="bn">*</div>
      <div class="bn">/</div>
      <div class="bn">C</div>
      <div class="bn">=</div>
    </div>
    <script>
      var show;
      var value1 = "";
      var value2 = "";
      var type = "";
      init();
      function init() {
        show = document.querySelector(".show");
        var con = document.querySelector(".con");
        con.addEventListener("click", clickHandler);
      }

      function clickHandler(e) {
        if (e.target.className !== "bn") return;
        if (isNaN(e.target.textContent)) {
          setType(e.target);
        } else {
          setValue(e.target);
        }
        show.textContent = value1 + (type === "" ? "" : type + value2);
      }

      function setValue(elem) {
        if (type === "") {
          value1 += elem.textContent;
          value1 = Number(value1);
        } else {
          value2 += elem.textContent;
          value2 = Number(value2);
        }
      }

      function setType(elem) {
        switch (elem.textContent) {
          case "+":
          case "-":
          case "*":
          case "/":
            type = elem.textContent;
            break;
          case "C":
            value1 = "";
            value2 = "";
            type = "";
            break;
          case "=":
            count();
            break;
        }
      }

      function count() {
        var sum = 0;
        switch (type) {
          case "+":
            sum = Number(value1) + Number(value2);
            break;
          case "-":
            sum = value1 - value2;
            break;
          case "*":
            sum = value1 * value2;
            break;
          case "/":
            sum = value1 / value2;
            break;
        }
        value1 = sum;
        value2="";
        type = "";
      }
    </script>
  </body>
</html>

拖拽元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .con {
         500px;
        height: 600px;
        border: 1px solid #000000;
        position: relative;
        margin: auto;
      }
      .show {
         300px;
        height: 40px;
        border: 1px solid #000000;
        margin: auto;
        margin-top: 20px;
        line-height: 40px;
        text-align: right;
        padding: 5px;
      }
      .bn {
         60px;
        height: 60px;
        padding: 20px;
        line-height: 60px;
        float: left;
        text-align: center;
        border: 1px solid #000000;
        margin-top: 25px;
        margin-left: 18px;
      }
    </style>
  </head>
  <body>
    <div class="con">
      <div class="show"></div>
      <div class="bn">1</div>
      <div class="bn">2</div>
      <div class="bn">3</div>
      <div class="bn">4</div>
      <div class="bn">5</div>
      <div class="bn">6</div>
      <div class="bn">7</div>
      <div class="bn">8</div>
      <div class="bn">9</div>
      <div class="bn">0</div>
      <div class="bn">+</div>
      <div class="bn">-</div>
      <div class="bn">*</div>
      <div class="bn">/</div>
      <div class="bn">C</div>
      <div class="bn">=</div>
    </div>
    <script>
      var show;
      var value1 = "";
      var value2 = "";
      var type = "";
      init();
      function init() {
        show = document.querySelector(".show");
        var con = document.querySelector(".con");
        con.addEventListener("click", clickHandler);
      }

      function clickHandler(e) {
        if (e.target.className !== "bn") return;
        if (isNaN(e.target.textContent)) {
          setType(e.target);
        } else {
          setValue(e.target);
        }
        show.textContent = value1 + (type === "" ? "" : type + value2);
      }

      function setValue(elem) {
        if (type === "") {
          value1 += elem.textContent;
          value1 = Number(value1);
        } else {
          value2 += elem.textContent;
          value2 = Number(value2);
        }
      }

      function setType(elem) {
        switch (elem.textContent) {
          case "+":
          case "-":
          case "*":
          case "/":
            type = elem.textContent;
            break;
          case "C":
            value1 = "";
            value2 = "";
            type = "";
            break;
          case "=":
            count();
            break;
        }
      }

      function count() {
        var sum = 0;
        switch (type) {
          case "+":
            sum = Number(value1) + Number(value2);
            break;
          case "-":
            sum = value1 - value2;
            break;
          case "*":
            sum = value1 * value2;
            break;
          case "/":
            sum = value1 / value2;
            break;
        }
        value1 = sum;
        value2="";
        type = "";
      }
    </script>
  </body>
</html>

js:

// Utils就是return出来的对象
var Utils=(function(){
    return {
        ce:function(type,style){
            var elem=document.createElement(type);
            // 将style对象的所有属性复制到elem.style对象上，IE8以上
            Object.assign(elem.style,style);
            return elem;
        },
        randoms:function(max,min){
            if(min===undefined) min=0;
            return Math.floor(Math.random()*(max-min)+min);
        },
        randomColor:function(){
            var col="#";
            for(var i=0;i<6;i++){
                col+=this.randoms(16).toString(16);
            }
            return col;
        },
        // 封装版的拖拽
        // 不能再容器内拖拽
        dragOn(elem){
            elem.self=this;
            elem.addEventListener("mousedown",this.mouseHandler);
        },
        dragOff(elem){
            elem.removeEventListener("mousedown",this.mouseHandler);
        },
        mouseHandler(e){
            if(e.type==="mousedown"){
                e.preventDefault();
                // this   是按下的元素
                // document.div=this;
                document.div=e.target;
                document.offset={x:e.offsetX,y:e.offsetY};
                document.self=this.self;
                document.addEventListener("mousemove",this.self.mouseHandler)
                document.addEventListener("mouseup",this.self.mouseHandler)
            }else if(e.type==="mousemove"){
                // this  document
                // this.div  按下的元素
                document.div.style.left=e.clientX-document.offset.x+"px";
                document.div.style.top=e.clientY-document.offset.y+"px";
            }else if(e.type==="mouseup"){
                // this document
                document.removeEventListener("mousemove",document.self.mouseHandler)
                document.removeEventListener("mouseup",document.self.mouseHandler)
            }
        }

    }
})();

相关阅读:
[BZOJ3884] 上帝与集合的正确用法
 [BZOJ3518] 点组计数
 [BZOJ3601] 一个人的数论
 [BZOJ3529] [Sdoi2014]数表
 原生js实现无缝滚动轮播图-点击页码即刻显示该页码的内容
 原生js实现无缝滚动轮播图
 vue封装tinymce富文本组件,图片上传回调方法
 vue-cli项目结合Element-ui基于cropper.js封装vue图片裁剪组件
 js实现多文件上传（二）-- 拖拽上传
 js实现多文件上传（一）-- 图片转base64回显
原文地址：https://www.cnblogs.com/zqm0924/p/13166285.html