事件基础知识

meng_qian_nian

已于 2022-03-28 20:51:09 修改

阅读量60

点赞数

文章标签： js

于 2022-03-28 20:50:12 首次发布

本文链接：https://blog.csdn.net/meng_qian_nian/article/details/123805648

版权

事件

方式1(不常用)

内联模式,直接在标签内容指定属性的方式

<button onclick="console.log('hello')">点击</button>

方式2

内联模式,直接在标签内容指定属性的方式

<body>
    <button onclick="handler()">点击</button>
    <script>
            function handler() {
                console.log('hello');
            }
	</script>
</body>

方式3(常用)

脚本模式(使用多)

document.getElementsByTagName(‘button’)[0] 触发事件的元素

onclick 对应的事件执行的操作

function 处理的函数

 <script>

        document.getElementsByTagName('button')[0].onclick = function() {
            console.log('hello');
        }
    </script>

事件函数的特点:

全小写且以on开头

事件分三类

鼠标事件

点击

<body>
    <div id="box" style="width: 50px;height: 30px;background: aqua;">	</div>
    <script>
        var box = document.getElementById('box')
        box.onclick = function() {
            console.log('点击');
        }
        box.ondblclick = function() {
            console.log('双击');
        }
    </script>
</body>

移动

onmouseover和onmouseenter的区别是

onmouseover的子元素也会触发事件

onmouseenter的子元素不会触发事件

<body>
    <div id="box" style="width: 50px;height: 30px;background: aqua;">	</div>
    <script>
        box.onmousedown =function(){
            console.log('鼠标按下了');
        }
        box.onmouseup =function(){
            console.log('鼠标松开了');
        }
        box.onmouseout =function(){
            console.log('鼠标移出了');
        }
        box.onmouseover =function(){
            console.log('鼠标移进了');
        }
        box.onmousemove =function(){
            console.log('鼠标移动了');
        }
        box.onmouseleave =function(){
            console.log('鼠标取消悬停了');
        }
        box.onmouseenter =function(){
            console.log('鼠标悬停了');
        }
    </script>
</body>

键盘事件

<body>
    <div id="box" style="width: 50px;height: 30px;background: aqua;">	</div>
    <script>
        window.onkeydown = function(){
            console.log('键盘按下');
        }
        window.onkeyup = function(){
            console.log('键盘弹起');
        }
        window.onkeypress = function(){
            console.log('键盘按下后,弹起之前');
        }
    </script>
</body>

html事件

<body>
    <form action="#" id="form">
        <button type="submit">提交</button>
    </form>
    <input type="text" id="input">
    <script>
        window.onload = function() {
            console.log('页面加载了');
        }
        document.getElementById('form').onsubmit = function() {
            console.log('提交了');
        }
        document.getElementById('input').onfocus = function() {
            console.log('获取焦点');
        }
        document.getElementById('input').onblur = function() {
            console.log('失去焦点');
        }
    </script>
</body>

arguments

<body>
    <div id="box" style = "width: 100px; height: 100px;
          background-color: aqua; margin: 50px;"></div>
    <button>11</button>
    <script>
        document.getElementsByTagName('button')[0].onclick = function() {
                // 获取参数 发现对应的arguments里面只有一个pointerEvent类型参数(pointerEvent是坐标事件源)
                console.log(arguments);
                console.log(arguments[0]); //获取的是一个pointerEvent 可以获取坐标   x:      y:
                //鼠标事件
                console.log(arguments[0].x); //x坐标
                console.log(arguments[0].y); //y坐标
                console.log(arguments[0].target); //获取触发的元素
                console.log(arguments[0].type); //触发的事件
                //键盘事件
                console.log(arguments[0].altKey); //是否按住alt在点击 返回true或false
                console.log(arguments[0].shiftKey); //是否按住alt在点击 返回true或false
                console.log(arguments[0].ctrlKey); //是否按住alt在点击 返回true或false
                //arguments[0]其实是拿到了我们对应的事件源对象,有内置的事件源对象   window.event
            }
            //KeyboarEvent的事件源对象  也是event
        window.onkeyup = function(e) { //e是形参随便写,建议写e
            console.log(e);
            console.log(window.event); //window.event的对象就是这个e
            e = e || window.event //window.event写后面
            console.log(e.code); //获取你按下的键
            console.log(e.key); //获取你按下的键的值
            console.log(e.keyCode); //获取按键的ASCII值
        }
        var box = document.getElementById('box')
        box.onmousedown = function(e) {
                e = e || window.event
                console.log(arguments[0].button); //鼠标左键0    鼠标右键2   滚轮1
                console.log(e.pageX); //获取鼠标的x坐标  基于页面区域
                console.log(e.pageY); //获取鼠标的y坐标  基于页面区域
                console.log(e.offsetX); //获取鼠标的x坐标  基于div区域
                console.log(e.offsetY); //获取鼠标的y坐标  基于div区域
                console.log(e.screenX); //获取鼠标x的坐标    基于屏幕区域
                console.log(e.screenY); //获取鼠标y的坐标    基于屏幕区域
                console.log(e.clientX); //获取鼠标x的坐标    基于当前可视区域
                console.log(e.clientY); //获取鼠标y的坐标    基于当前可视区域
                console.log(e.path); //元素路径
                console.log(e.ctrlKey); //判断是否按着ctrl键点击 返回true或false
                console.log(e.shiftKey); //判断是否按着shift键点击 返回true或false
                console.log(e.altKey); //判断是否按着alt键点击 返回true或false
            }
            //键盘的事件源对象
        window.onkeydown = function(e) { //e是形参随便写,建议写e
                e = e || window.event //window.event写后面
                console.log(e.code); //获取你按下的键
                console.log(e.key); //获取你按下的键的值
                console.log(e.keyCode); //获取按键的ASCII值 不区分大小写(只返回大写)
                console.log(e.ctrlKey); //判断是否按了ctrl键 返回true或false
                console.log(e.shiftKey); //判断是否按了shift键 返回true或false
                console.log(e.altKey); //判断是否按了alt键 返回true或false
            }
            //只针对字符按键
        window.onkeypress = function(e) {
            console.log('调用了');
            console.log(e.charCode); //获取按键的ASCII值 区分大小写
        }
    </script>
</body>