欢迎光临散文网 会员登陆 & 注册

千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到

2023-07-12 11:45 作者:sscrrr  | 我要投稿

### 1.键盘事件及事件对象


```javascript

键盘事件的事件元素通常都为document

 1.键盘弹起的时刻触发(onkeyup)

 document.onkeyup = function(){

        console.log("嘿嘿嘿");

    }

 2.键盘按下的时刻触发 (onkeydown)

    document.onkeydown = function(){

        console.log("嘿嘿嘿");

    }


 3.生成一个字符时触发 (onkeypress)

    document.onkeypress = function(){

        console.log("嘿嘿嘿");

    }


document.onkeypress = function (evt) {

   key:键盘录入的字符

        console.log(evt.key);

  字符对应的asc码值

        48 97 65 13   32   10

        0  a  A  回车 空格  ctrl+回车

        console.log(evt.keyCode);

        console.log(evt.which);

        console.log(evt.charCode);

 总和 var myKeyCode = evt.keyCode || evt.which || evt.charCode;

        console.log(myKeyCode);


  ctrlKey:判断ctrl是否被按下

        console.log(evt.ctrlKey);

    }

```


### 2.事件绑定的方式


```javascript

1.通过HTML元素绑定

    <button onclick="f1()">点击1</button>

 function f1(){

        console.log("嘤嘤嘤");

    }


2.通过dom节点方式绑定

    var oBtn = document.getElementsByTagName("button")[1];

    oBtn.onclick = function(){

        console.log("哈哈哈");

    }

缺陷:

    a.无法为同一个元素多次绑定相同的事件

    b.无法决定事件流的传递是冒泡还是捕获


解决方案:

事件监听

   dom节点.addEventListener("去掉on的事件名",事件体回调函数,[冒泡false/捕获true]);


好处:a.可以为同一个元素多次绑定相同的事件

    document.addEventListener("click",function(){

        console.log("111");

    });

    document.addEventListener("click",function(){

        console.log("222");

    });

  b.

document.addEventListener("click", function () {

        alert("document捕获");

    }, true);

document.addEventListener("click", function () {

        alert("document冒泡");

    }, false);

捕获和冒泡同时存在,则先捕获后冒泡

```


### 3.事件的解绑


```javascript

事件的解绑就是将事件赋值为null

1.普通解绑方式

  HTML绑定和dom绑定

解绑原理:将事件绑定覆盖掉

    oBtn.onclick = function(){

        document.onclick = null;

    }


2.事件监听的解绑

 var fun = function () {

        console.log("heihei");

    }

  document.addEventListener("click", fun);

    oBtn.onclick = function () {

dom对象.removeEventListener("去掉on的事件类型",绑定时的同一个回调函数)

        必须解绑的回调函数和绑定的回调函数是同一个

        document.removeEventListener("click", fun);

    }

```


### 4.事件的委托


```javascript

委托:你的事,让别人干

事件的委托:子元素触发的事件,但是功能由父元素完成

    事件委托依赖于事件流的冒泡

好处1:可以将批量绑定的子元素事件,绑定至父元素,从而大大提高程序运行效率

好处2:可以为未来的元素,提前添加事件

   var oUl = document.querySelector("ul");

    oUl.onclick = function(evt){

        this.style.backgroundColor = "yellow";

        问题:怎么获取真实触发事件的事件元素

        获取真实触发事件的事件元素 evt.target || evt.srcElement

        var target = evt.target || evt.srcElement;

        target.tagName触发事件的真实元素的标签名,大写

        console.log(target,target.tagName);

        if(target.tagName == "LI"){

            target.style.backgroundColor = "red";

        }

    }

例1.

    var oUl = document.querySelector("ul");

 oUl.addEventListener("click", function (evt) {

        var target = evt.target || evt.srcElement;


        if (target.tagName == "LI") {

            target.style.backgroundColor = "red";

        }

    });

例2.

<input type="text" name="" id=""><br><br>

    <ul>

        <li>蔡徐坤</li>

        <li>炎亚纶</li>

    </ul>

    <br> <br>

    <button>添加</button>

    var oBtn = document.querySelector("button");

    var oInput = document.querySelector("input");

    var oUl = document.querySelector("ul");

oUl.addEventListener("mouseover", function (evt) {

        var target = evt.target || evt.srcElement;


        if (target.tagName == "LI") {

            target.style.backgroundColor = "green";

        }

    });


    oUl.onmouseout = function (evt) {

        var target = evt.target || evt.srcElement;


        if (target.tagName == "LI") {

            target.style.backgroundColor = "";

        }

    }


    oBtn.onclick = function () {

        if (oInput.value != "") {

            var oLi = document.createElement("li");

            oLi.innerHTML = oInput.value;

            oUl.appendChild(oLi);

            oInput.value = "";

        }

    }

```


### 4.拖拽


```javascript

按下    onmousedown        box

移动    onmousemove   document

抬起   onmouseup     document

    先有down,再有move和up

可视窗口的宽和高

     console.log(window.innerWidth);

     console.log(window.innerHeight);

<style>

        #box {

            width: 100px;

            height: 100px;

            position: absolute;

            background-color: gold;

            cursor: move;

        }

    </style>

<body>

    <div id="box"></div>

</body>

var oBox = document.querySelector("#box");


    oBox.onmousedown = function (evt) {

        var offsetX = evt.offsetX;

        var offsetY = evt.offsetY;

        document.onmousemove = function (evt) {

            var left = evt.pageX - offsetX;

            var top = evt.pageY - offsetY;


            if (left < 0) {

                left = 0;

            }


            var maxLeft = window.innerWidth - oBox.offsetWidth;


            if (left > maxLeft) {

                left = maxLeft;

            }


            if (top < 0) {

                top = 0;

            }


            var maxTop = window.innerHeight - oBox.offsetHeight;


            if (top > maxTop) {

                top = maxTop;

            }


            oBox.style.left = left + "px";

            oBox.style.top = top + "px";


        }

        document.onmouseup = function () {

            document.onmousemove = null;

        }

    }


    console.log(window.innerWidth, window.innerHeight);

```



千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到的评论 (共 条)

分享到微博请遵守国家法律