js事件鼠标事件、表单事件、键盘事件、UI事件、event对象、事件流、阻止事件冒泡

涛T

已于 2022-02-24 18:59:24 修改

阅读量901

点赞数

文章标签： javascript

于 2022-02-24 17:04:44 首次发布

本文链接：https://blog.csdn.net/qq_52977867/article/details/123110867

版权

1.鼠标事件

onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onmouseout	鼠标从某个元素上离开
onmouseover	鼠标移到某个元素上
onmouseenter	鼠标从元素移入
onmouseleave	鼠标从元素移出
onmousedown	某个鼠标按键按下的时候
onmouseup	某个鼠标按键松开的时候
onmousemove	鼠标被移动的时候

onmouseover、nmouseout&onmouseenter、onmouseleave的区别：

onmouseover、nmouseout：鼠标移动到自身时候会触发事件，移动到其子元素身上也会触发事件
onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，移动到其子元素身上不会触发事件

    <style>
        div{
            border: 1px solid black;
            background-color: rgb(26, 214, 214);
            padding: 50px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
</body>
</html>
<script>
    //获取div
    var div_ = document.getElementsByTagName('div')[0];
    //鼠标单击
    /* div_.onclick = function(){
        this.style.backgroundColor =  'red';
    } */

    //鼠标双击
    /* div_.ondblclick = function(){
        this.style.backgroundColor = 'green';
    } */
    //鼠标移到某个元素上
    //祸及子孙  当离开到儿子上的时候都会弹出
    /* div_.onmouseover = function(){
        console.log('我是onmousrover');
    }
    //鼠标从某个元素上离开
    div_.onmouseout = function(){
        console.log('我是onmousrout');
    } */
    
    //不祸及子孙
    //鼠标从元素移入
    /* div_.onmouseenter = function(){
        console.log('我是onmouseenter');
    }
    //鼠标从元素移出
    div_.onmouseleave = function(){
        console.log('我是onmousleave');
    } */

     // 鼠标按下和松开
     div_.onmouseup = function(){
        console.log('鼠标松开：onmouseup');
    }

    div_.onmousedown = function(){
        console.log('鼠标按下：onmousedown');
    }

    // 鼠标移动
    div_.onmousemove = function(){
        console.log('鼠标移动onmousemove');
    }

2.表单事件

onfocus	元素获得焦点
onblur	元素失去焦点
onchange	用户改变域的内容
onreset	表单重置时触发[绑定在form上]
onsubmit	表单提交时出发[绑定在form上]
oninput	用户输入时

<body>
    <form action="" onsubmit="fn()">
        姓名：<input type="text" id="username">
        <span></span>
        <br>
        <input type="submit">
        <br>
        <input type="reset" id="reset">
    </form>>
</body>
</html>

<script>
    var name_ = document.getElementById('username');
   /*  name_.value = '请输入';//默认值
    name_.onfocus = function(){
        name_.value = '';//获取焦点后清空
        name_.style.color = 'green';
    } */

    //元素失去焦点 onblur    用户输入完后  提示文字判断是否正确
    /* name_.onblur = function(){
        alert('失去焦点');
    } */

    //改变内容时 onchange
    /* name_.onchange = function(){
        alert('改变内容');
    } */

    //用户输入时  oninput
    /* var span_ = document.getElementsByTagName('span')[0];
    name_.oninput = function(){ 
        // alert('用户输入时');
        var str = name_.value;
        span_.innerHTML = str;
    } */


    //表单提交时 onsubmit   绑定在form上
    function fn(){
        alert('提交');
    }


    //表单重置时 onreset 绑定在form上
    var form_ = document.getElementById('form')[0];
    form_.onreset = function(){
        alert('重置');
    }
</script>

3.键盘事件

onkeydown	某个键盘被按下
onkeypress	某个键盘的键被按下并释放一个键时发生
onkeyup	某个键盘的键被松开

    <style>
        div{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 是否可以编辑 -->
    <div contenteditable="true"></div>
</body>
</html>
<script>
    //事件次序  onkeydown  onkeypress onkeyup
    //获取div
    var div_ = document.getElementsByTagName('div')[0];
    //onkeydown 某个键盘的键被按下
    div_.onkeydown = function(){
        console.log('down按下');
    }
    //onkeypress 某个键盘的键被按下释放时发生
    div_.onkeypress = function(){
        console.log('press释放');
    }
    //onkeyup  某个键盘的键被松开
    div_.onkeyup = function(){
        console.log('up松开');
    }
</script>

4.UI事件

onlozd	某个页面或图像完成加载时
onresize	窗口或框架被调整时
onscroll	当文档被滚动时发生的事件

    <style>
        div{
            height: 1800px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<script>
    var div_ = document.getElementsByTagName('div')[0];
    //某个页面或图像加载时 onlozd
    div_.onlozd = function(){
        console.log('页面加载时');
    }
    //窗口或框架被调整时 onresize
    div_.onresize = function(){
        console.log('窗口或框架被调整时');
    }
    //当文档被滚动时发生的事件 onscroll
    div_.onscroll = function(){
        console.log('当文档被滚动时发生的事件');
    }
</script>

5.event对象

用来获取事件的详细信息：鼠标位置、键盘按键

就是一个js对象，里面包含了事件的详细具体信息

语法：

oEvent=e||window.event;//ie

例如：

<style>
        div {
            height: 300px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

<script>
    var div_ = document.getElementsByTagName('div')[0];
    div_.onclick = function (e) {
        e = e || window.event;//兼容ie
        console.log(e);
    }
</script>

查看event对象

<body>
    <div></div>   
</body>
</html>

<script>
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function(e){
        console.log(e);//打印事件对象
    }
</script>

此时，我们在ie中打开，发现没有效果

需要编写兼容ie的情况

<script>
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function(e){
        e = e|| window.event;
        console.log(e);
    }
</script>

event对象属性

如图所示，假设页面中灰色圆点是鼠标点击处，黄色区域是鼠标触发事件对象

鼠标位置

1、screenX 和screenY

参照点：电脑屏幕左上角screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量

2、clientX和clientY

参照点：浏览器内容区域左上角 dom区域clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水平滚动的距离）clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量（不会计算垂直滚动条的距离）3、pageX和pageY

参照点：网页的左上角pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是clientX加上水平滚动条的距离pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是clientY加上垂直滚动条的距离4、offsetX和offsetY

offsetX：鼠标点击位置相对于触发事件对象的水平距离offsetY：鼠标点击位置相对于触发事件对象的垂直距离

    <style>
        div{
            width: 40%;
            height: 300px;
            background-color: antiquewhite;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<script>
    var div_ = document.getElementsByTagName('div')[0];
    div_.onclick = function(e){
        e = e||window.event;//兼容
        // console.log(e);
        console.log(e.clientX,e.clientY);

        //offsetX offsetY参照触电区域
        console.log(e.offsetX,e.offsetY);

        //电脑屏幕距离
        console.log(e.screenX,e.screenY);
    }
</script>

键盘按键

key	键盘按下的键如按下0 显示key：0
keyCode	按键对应的unicode编码

绑定keydown事件，然后通过event取值

    <style>
        div{
            width: 500px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div contenteditable="true"></div>
</body>
</html>
<script>
    var div_ = document.getElementsByTagName('div')[0];
    div_.onkeydown = function(e){
        e = e||window.event;
        console.log(e);
        console.log(e.key,e.keyCode);
        /* if(e.key == 'Enter'){
            alert('enter')
        } */

        // 组合键
        if(e.key=='Enter' && e.ctrlKey){
            alert('发送')
        }
    }
</script>

6.事件流

所谓事件流，就是从页面中接收事件的顺序

冒泡型和捕获型事件传播：

如上图页面结构，若所有的元素全部绑定了事件，冒泡性时间传播即从最底层的点击事件开始，逐级向上全部触发事件。

如果是捕获型时间传播，若点击的是最后的div事件，则时间是从最外层的document开始逐级向下开始触发事件。

事件冒泡：

定义：就是事件从开始目标，往上一直冒泡到页面最顶层对象（window）。

**语法：！！！事件默认都是冒泡模式**

语法：

dom.addEventListener('eventName', fn, false) 默认是false

或默认绑定事件，所有事件默认是冒泡型

<style>
        div{
           
            padding: 50px;
            border: 2px solid rgb(233, 142, 142);
        }
    </style>
</head>
<body>
    <div onclick="fn('out')">
        <div onclick="fn('inner')">
            <div onclick="fn('content')"></div>
        </div>
    </div>

    <script>
        function fn(v){
            alert(v);
        };
    </script>
</body>
</html>

弹出过程为： content- inner - out 从内到外的触发过程

事件捕获：

定义： 事件从被点击元素是层级最高的祖先元素（设置捕获-true）开始，一直渗透到其下所有的子元素

语法：

dom.addEventListener('eventName', fn, true)

<style>
        div{
            padding: 50px;
            border: 2px solid brown;
        }
    </style>
</head>
<body>
    <div id="p1">
        <div id="p2">
            <div id="p3"></div>
        </div>
    </div>
    
</body>

<script>

    p1.addEventListener('click',function(){
        alert('p1');
    },true);

    p2.addEventListener('click',function(){
        alert('p2');
    },true);

    p3.addEventListener('click',function(){
        alert('p3');
    },true);
</script>
</html>

弹出过程为： p1- p2 - p3 从外到内的触发过程

7.阻止事件冒泡

事件流的弊端：

牵一发而动全身

一个元素会把他接收到的事件传递给他的父级元素，一直到winow

所以，我们需要阻止事件冒泡

阻止事件冒泡

非IE下：event.stopPropagation();
IE下：event.cancelBubble=true;

    <style>
        div{
            padding: 20px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div onclick="fn('爷爷')">爷爷
        <div onclick="fn('爸爸')">爸爸
            <div onclick="fn('小美女')">小美女</div>
        </div>
    </div>
</body>
</html>

<script>
    function fn(v){
        // 阻止冒泡  
        //因为函数在调用的时候指定好了参数，所以此时不能再使用e
        //需要通过window.event 调用 可以默认写为event
        // event.stopPropagation();
        // event.cancelBubble=true;//兼容ie

        window.event ? window.event.cancelBubble = true : event.stopPropagation();

        alert(v+"出手了");
    }
</script>

涛T

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js事件鼠标事件、表单事件、键盘事件、UI事件、event对象、事件流、阻止事件冒泡

js事件鼠标事件、表单事件、键盘事件、UI事件、event对象、事件流、阻止事件冒泡
复制链接

扫一扫

js事件 鼠标事件、表单事件、键盘事件、UI事件、event对象、事件流、阻止事件冒泡

1.鼠标事件

2.表单事件

3.键盘事件

4.UI事件

5.event对象

查看event对象

event对象属性

鼠标位置

键盘按键

6.事件流

7.阻止事件冒泡

js事件鼠标事件、表单事件、键盘事件、UI事件、event对象、事件流、阻止事件冒泡