JS之事件名称与事件对象

最新推荐文章于 2022-12-12 15:19:23 发布

liurongsheng123

最新推荐文章于 2022-12-12 15:19:23 发布

阅读量2.2k

点赞数 2

分类专栏：前端文章标签：事件 ev js mouse

本文链接：https://blog.csdn.net/liurongsheng123/article/details/79490318

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JS之事件

事件名称

鼠标事件一般加给div 
键盘事件一般加给document 输入框
提交与重置事件是加给整个form表单
<head>
    <style type="text/css">
        .redDiv{
            width:200px;
            height:200px;
            background-color:red;
        }
        body{
        // 为了出现纵向滚动条
            height:3000px;
        }
    </style>
</head>
<body>
    <div class="redDiv"></div>
    <form action="" id="uName">
        <input type="text" id="uName" />  // 创建文本框
        <input type="submit" id="submit" />  // 创建提交按钮
        <input type="reset" id="reset" />  // 设置重置按钮
    </form>
</body>
<script type="text/javascript">
    var redDiv = document.getElementsByClassName('redDiv')[0];
    var reg = document.getElementById('reg');
    var uName = document.getElementById('uName');

    // 鼠标事件
    redDiv.onmousemove = function(){
        console.log("鼠标移动的时候触发");
    }
    redDiv.onclick = function(){
        console.log("单击事件");
    }
    redDiv.ondblclick = function(){
        console.log("双击事件");
    }
    redDiv.onmousedown = function(){
        console.log("鼠标按下事件");
    }
    redDiv.onmouseup = function(){
        console.log("鼠标抬起事件");
    }
    redDiv.oncontextmenu = function(){
        console.log("鼠标右击事件");
        // 不添加返回值,右击时会出现菜单栏
        // 添加这个返回值,右击时菜单栏不会再出现
        return false;
    }

    // over和out会在鼠标从redDiv的父级移到子集的时候触发,先触发out,再触发over
    // leave和enter从redDiv(父级)移到blueDiv(子集)的时候不会触发
    // 只有鼠标离开/移入整个redDiv的时候才会触发
    redDiv.onmouseover = function(){
        console.log("over鼠标移入");
    }
    redDiv.onmouseout = function(){
        console.log("out鼠标移出");
    }
    redDiv.onmouseenter = function(){
        console.log("enter鼠标移入");
    }
    redDiv.onmouseleave = function(){
        console.log("leave鼠标移出");
    }

    // 键盘事件
    document.onkeydown = function(){
    // 按下任意键时触发
        console.log("down键盘按下");
    }
    document.onkeypress = function(){
    // 按下任意键触发
        console.log("press键盘按下");
    }
    // press与down的区别
    // press区分大小写,但不支持特殊键
    // dowm 不区分大小写,但支持特殊键
    document.onkeyup = function(){
    // 松开键时触发
        console.log("键盘拾起事件");
    }

    // 表单事件
    uName.oninput = function(){
        console.log(input内容发生改变后触发);
    }
    uName.onchange = function(){
        console.log(change内容发生改变后触发);
    }
    // text框中,移入一个英语单词,每当输入一个字母时,就会触发oninput事件
    // 当输入完毕,离开文本框时,会触发onchange事件
    uName.onfocus = function(){
    // 点击text文本框时触发
        console.log("聚焦");
    }
    // 再点击其他地方时,触发onblur事件
    uName.onblur = function("失焦");

    // 给form表单绑定事件
    reg.onsubmit = function(){
        console.log("提交");
        // 没有return false的时候,点击提交按钮会刷新页面
        // 有return false的时候,点击提交按钮不会刷新页面
        return false;
    }
    reg.onreset = function(){
    // 没有return false的时候,可以重置text框体内容
    // 有return false的时候,重置将会失败
        console.log("重置");
        return false;
    }

    // window事件
    window.onresize = function(){
        console.log("窗口尺寸发生变化的时候触发");
    }
    window.onscroll = function(){
    // 前提是要有滚动条
        console.log("窗口内容滚动的时候触发");
    }
    // 图片加载完成后 会触发这个方法
    img.onload = function(){

    }
    // 窗口加载完毕后,会触发这个方法
    window.onload = function(){
        console.log("窗口加载完毕后触发");
    }
</script>

事件对象

<head>
    <meta charset = "utd-8" />
    <title>事件对象</title>
    <style type="text/css">
        .body{
            height:3000px;
        }
        .redDiv{
            width:200px;
            height:200px;
        }
        p{
            margin:0px;
            height:100px;
            margin-left:100px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class = "redDiv">
        <p></p>
    </div>
</body>
<script text="text/javascript">
    var dic = document.getElementsByClassName('redDiv')[0];
/*
为什么JS事件函数里面都有一个参数(ev)?
因为ev是事件的参数,在ev里面包含了事件触发时的参数,比如click事件中的ev中包含着e.pageX,e.pageY,keyDown事件中
包含着ev.keyCode等,在ie中,ev是全局的,可以通过window.event来获取,在其他浏览器中都是作为参数传入的.
所以好多事件函数都这样写:
mydiv.onclick = function(ev){
    if(!ev){
        ev = window.event; // 这句话也可以简写成:ev = window.event || ev;
    }
}
这么写为了兼容各个浏览器
在火狐浏览器中,事件绑定的函数要获取到事件本身,需要从函数中传入,而IE等浏览器则可以直接使用event或者window.event得到事件本身.
这一句话的用途:需要获取和事件相关的信息时使用
*/
    redDiv.onclick = function(ev){
        evObj = window.event || ev;
        // 触发事件的元素(触发事件的元素不一定是绑定事件的元素)
        // 各元素之间有关联的时候,触发一个事件,可能会影响到另外一个事件的触发
        console.log(evObj.target);
        // 鼠标距离窗口顶部的坐标 p标签本身有一个marginTop
        console.log(evObj.clientY);
        // 鼠标距离页面顶部的坐标
        console.log(evObj.pageY);
        // 鼠标举例target顶部的坐标
        console.log(evObj.offsetY);
    }
    document.onkeypress = function(ev){
    // keyCode标示按哪一个按键
        console.log("press" + ev.keyCode);
    }
    document.onkeydown = function(ev){
        console.log(ev.keyCode);
        if(ev.keyCode == 66){
            console.log("按了B");
        }
        // ev.metaKey
        if(ev.keyCode == 66 && ev.metaKey){
            console.log("按了command+b");
        }
    }
</script>

liurongsheng123

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS之事件名称与事件对象

JS之事件事件名称鼠标事件一般加给div 键盘事件一般加给document 输入框提交与重置事件是加给整个form表单&lt;head&gt; &lt;style type="text/css"&gt; .redDiv{ width:200px; height:200px; bac...
复制链接

扫一扫