JS 10

最新推荐文章于 2023-05-13 08:52:27 发布

palyJOJO

最新推荐文章于 2023-05-13 08:52:27 发布

阅读量334

点赞数

本文链接：https://blog.csdn.net/palyJOJO/article/details/76940466

版权

10.1 事件的概念

事件源

事件名

事件注册

事件处理

事件源：粤商大酒店201房间

事件名：火灾

事件注册：事先已规划好片区所属为南湖区消防支队

事件处理：救火

10.2 常用事件

鼠标：单击事件

<body>
<p id="p1" οnclick="fun()">单击事件测试</p>
</body>
<script>
    function fun(){
        //获取指定元素
        var p1 = document.getElementById("p1");
        p1.innerText ="hello word";
        p1.style.fontSize="60px"
    }
</script>

事件源是id为“p1”的元素，事件名是单击，事件注册是οnclick="fun()"，单击“p1”时会触发fun函数

双击事件

<body>
<div id="div1" οnclick="zoomout()" οndblclick="Ad()">

</div>
</body>
<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width="200px";
        div1.style.height="200px";

div1.style.backgroundColor="lime";
    }
    function Ad(){
        var div1 = document.getElementById("div1");
        div1.style.width="500px";
        div1.style.height="500px";
        div1.style.backgroundColor="red";
    }

鼠标按下、弹起事件 onmousedown/onmouseup

鼠标移入/离开onmouseenter/onmouseleave

onmouseover/onmouseout

用到了冒泡的原理，当有两层时，移动到里层时会先显示完里层，然后再会显示外层

与移入/离开类似

鼠标移动onmousemove

滚轮onmousewheel

键盘事件

keypress，只能捕获可以打印的字符

function search(e){
    if(e.keyCode == 13){
        var what = document.getElementById("what");
        alert("开始搜索："+what.value)
    }
}

keyCode记录按下键的编码

keydown、keyup捕获所有的键（个别除外）

使用top导致上下移动失败，原因是和window.top冲突

如果把两个变量移入函数中，发现每次只能移5px，原因是调用函数内部的变量每次都会初始化

其他事件：onload（页面）、onfocus（焦点）、onblur（失去焦点）

10.3 事件的注册

三种

（1）使用onXXX的属性

（2）通过JS去设置元素的onXXX属性

（3）通过addEventListener设置新的属性

第2、3种将页面的内容、样式和行为分离，分离后有利于分工合作

第三种方式的第一个参数事件名，第二个参数事件处理函数。可以添加事件监听，也可以移除，用removeEventListener，参数与之前的相同。可以通过这两个去动态的注册不同的事件处理程序

10.4 捕获与冒泡

<body>
    <div id="div1">
        <p id="p1">去吧，皮卡丘</p>
    </div>
</body>
<script>
    var div1 = document.getElementById("div1");
    var p1 = document.getElementById("p1");
    p1.addEventListener("click",click1);
    div1.addEventListener("click",click2);

    function click1(){
        alert("战斗失败");
    }
    function click2(){
        alert("战斗获胜");
    }
</script>