事件讲解(记忆力不好的小伙伴们建议保存)

快乐的光头佬

已于 2022-03-29 12:36:18 修改

阅读量130

点赞数 1

分类专栏： javascr 文章标签： javascript

于 2022-03-28 21:13:43 首次发布

本文链接：https://blog.csdn.net/D____ppx/article/details/123804425

版权

javascr 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.什么是js事件？

js事件是指我们使用鼠标或者键盘做了某些事件来触发对应的处理函数

比如onclick是事件表示点击事件执行的操作

function是处理的函数表示我们要做的事情


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

2.分为2种模式内联模式和脚本模式

内联模式直接在标签内容以指定属性的方式用的比较少有2种方法

脚本模式也叫外联模式是js和html分离规范使用比较多

3.事件组成由三部分

1.触发事件的元素节点对象

2.事件处理函数一般都是小写字母都是2部分组成 on+事件类型

3.事件执行函数

4.事件分类

1.鼠标事件鼠标的一切操作都是鼠标事件

点击相关点击 onclick 双击 ondblclick

移动相关鼠标按下onmousedown 鼠标弹起onmouseup 鼠标移出onmouseout

鼠标移进onmousever 鼠标移动onmousemove 鼠标取消悬停了onmouseleave

鼠标悬停onmouseenter

onmouseover和onmouseenter的区别

onmouseover：元素的子元素移入也会触发事件

onmouseenter：元素的子元素移入不会触发事件

2.键盘事件一般操作是给整体加

键盘按下onKeydown 键盘弹起onKeyup 键盘按下与弹起之间onKeypress

3.html事件页面加载事件默认触发执行一下

页面加载了onload

4.onsubmit事件提交按钮触发的事件一般触发的元素是表单form

失去焦点获取焦点常用于input

失去onblur 获取 onfocus

5.html事件补充

（重点要记）onchange 修改当里面的值value发生变化以后失去焦点的时候触发加给表单元素

onselect 选择（一般用于复制粘贴半重点） onunload 卸载 onreset 重置加给form onscroll 滚动栏滚动

5.事件源对象

function里面是可以使用arguments来获取参数数组

但是只有一个参数这个参数类型为pointerEvent (是坐标事件源)

  <button>点击</button>
    <script>
        document.getElementsByTagName('button')[0].onclick = function() {
            //获取参数 发现对应的arguments里面只有一个参数  这个参数类型为pointerEvent
            //这个pointerEvent是什么？  坐标事件源
            console.log(arguments);
            console.log(arguments[0]); //获取的是一个pointerEvent  可以获取坐标x:34 y:18  就是我们鼠标的坐标
            //鼠标事件中
            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); //是否按了shift键  是返回true不是返回false
            console.log(arguments[0].ctrlKey); //是否按了ctrl键  是返回true不是返回false
            //这个arguments[0]其实是拿到了我们 对应的事件源对象
            //但是像上面的这样写太长了 所以我们有内置的事件源对象 window.event
            //鼠标按下的是那边的  0左  1滚轮  2右
            console.log(arguments[0].button);



            //keyboardEvent的事件源对象  键盘事件源 他也是个event
            window.onkeyup = function(e) { //e是形参  随便写  一般建议写e(规范)
                //console.log(arguments[0]); e是不是就相当于arguments[0] 获取第一个参数
                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码
                console.log(e.altKey); //是否按下的是alt键  不常用
                console.log(e.shiftKey);
                console.log(e.ctrlKey);
            }

        }
    </script>

6.event的相关属性

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.getElementsByTagName('div')[0]

        div.onmousedown = function(e) {
            e = e || window.event //表示事件源对象
                //鼠标点击的键 button 0表示左键 1表示滚轮 2表示右键
            console.log(e.button);
            console.log(e.target); //目标元素
            console.log(e.type); //事件类型
            console.log(e.x); //获取鼠标的x坐标  基于可视区域
            console.log(e.y); //获取鼠标的y坐标
            console.log(e.pageX); //获取鼠标的x坐标 基于页面的可视区域
            console.log(e.pageY);
            console.log(e.offsetX); //获取鼠标的x坐标 基于div偏移的x离div的左上角顶点  不要计算margin值
            console.log(e.offsetY);
            console.log(e.screenX); //screen获取屏幕信息 在屏幕上的x  
            console.log(e.screenY);
            console.log(e.clientX); //获取鼠标的x坐标 基于当前可视区域的x
            console.log(e.clientY);
            console.log(e.path); //元素路径
            console.log(e.ctrlKey); //判断是否按着ctrl键  按着为true  没有为false
            console.log(e.shiftKey);
            console.log(e.altKey);


            //键盘的事件源对象
            window.onkeydown = function(e) {
                    e = e || window.event
                    console.log(e.key); //获取按键的值
                    console.log(e.code); //获取按键
                    console.log(e.keycode); //获取按键的ascii码
                    console.log(e.ctrlKey);
                    console.log(e.shiftKey);
                    console.log(e.altKey);
                    console.log(e.charCode); //字符编码 只有在按字符的时候才有 一般加给keypress事件
                    console.log(e.target); //目标元素
                    console.log(e.type); //事件类型

                }
                //在弹起之前按下之后 针对字符按键 a-z 以及0-9  charCode只在这里有效(其他按键不会执行)
            window.onkeypress = function(e) {
                console.log('调用了');
                console.log(e.charCode); //他会返回对应的字符的编码 ascii码 区分大小写
            }

        }
    </script>

7.this讲解

<a href="#">1</a><a href="#">2</a><a href="#">3</a>
<b>a</b><b>b</b><b>c</b>
 <script>
        var a = document.getElementsByTagName('a')
        //this会执行触发的元素  e.target
        function handlerClick(){
            console.log('a点击了'+htis.innerText);
        }
        for(var i in a){
            a[i].onclick = handlerClick  //相当于下面的
            // a[i].onclick = function handlerClick(){
            //     console.log('a点击了'+htis.innerText);
            // }
        }
        function handlerClick(that){
            console.log('a点击了'+htis.innerText);
        }
        var b = document.getElementsByTagName('b')
        for(var i in b){
            console.log(this);  //指向window
            b[i].onclick = handlerClick(this) //后面加()表示调用  这个里面的this指向window的
        }
    </script>