JavaScript-事件续

迈不过友情╰ 2022-05-26 03:52 108阅读 0赞

#### **事件分类：** ####

鼠标事件：

click(点击事件。右键不触发），mousedown(鼠标点击下去事件） mouseup(鼠标弹起事件)

click=mousedown+mouseup;  (click事件是比较迟缓的）

看如下代码：

document.οnclick=function() {
                console.log('click');
            }
            document.οnmοusedοwn=function() {
                console.log('mousedown');
            }
            document.οnmοuseup=function() {
                console.log('mouseup');
            }

![70][]看的应该很清楚的，对时间精度要求比较的话，mousedown好一些（比如游戏技能的释放）

判断是鼠标表示左键还是右键还是滚动轮点击，需要看mousedown或者mouseup的event里面的button属性

button：左键为0，滑轮点击1，右键为2

![70 1][]左键点击。

dom3规定：click事件只能监听左键，只能通过mousedown和mouseup来监听鼠标键。

mouseover(鼠标移入的事件） mouseout(鼠标移出的事件）

<div class='demo' ></div>
            <script type="text/javascript">
            var div=document.getElementsByTagName('div')[0];
            div.οnmοuseenter=function() {
                div.style.background='green';
            }
            div.οnmοuseleave=function() {
                div.style.background='red';
            }

当鼠标移入div变绿，移出变红

如何区分mousedown和click，简单的说拖拽事件不与click事件混淆，也就是拖拽时不发生click事件。

关键在时间的处理上。

contextmenu(右键产生菜单事件）

键盘类事件

keypress(按键事件） keydown(按键时按下）keyup(按键时弹起）

注意这里的keypress!=keydown+keyup

document.οnkeypress=function() {
                console.log('press');
            }
            document.οnkeydοwn=function() {
                console.log('down');
            }
            document.οnkeyup=function() {
                console.log('up');
            }

![70 2][]keydown>keypress>keyup（keypress与它们没关系）

![70 3][]而且它们可以连续触发。

keypress和keydown的区别

keydown可以对键盘上的任何键做出响应，而keypress只能对字符类的键盘按键做出响应（像shift啊什么的，做不了相应)

文本类操作事件：input focus blur change

input 和change事件

<input></input>
            <script type="text/javascript">
            var input=document.getElementsByTagName('input')[0];
            input.οninput=function() {
                console.log(this.value);
            }
            </script>

![70 4][]![70 5][]只要我们input标签里面的内容发生变化就触发

我们改成change![70 6][]输入123时没有发生任何变化，当鼠标的失去焦点时（比如点击其他位置），如果内容发生变化那么触发事件。

focus当鼠标焦点在input上时就触发.

onblur 属性在元素失去焦点时触发。

常用于表单验证代码（例如用户离开表单字段）。![70 7][]![70 8][]这种东西也是。

scroll事件,当滑轮滑动时触发（window上事件）

window.οnscrοll=function() {
                console.log('cyl');
            }

当滑轮滚动时，输出cyl。

[load事件][load]这个可以去看看这个博主的，感觉很详细。

[70]: /images/20220526/b7b6edba5e6d4b4d968f48cbfcc89675.png
[70 1]: /images/20220526/aed7cbde94634d1ba2d527246f89628d.png
[70 2]: /images/20220526/df31824a3b6b48679fbbddd01938e914.png
[70 3]: /images/20220526/fde0b7ddd50b4b29ba077b97a21e384b.png
[70 4]: https://img-blog.csdn.net/20180424195448503?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: /images/20220526/ca521686e4c24ed794462dcddc7704bd.png
[70 6]: /images/20220526/7ec71896aa0d489a8e2053562cce117a.png
[70 7]: https://img-blog.csdn.net/20180424200327671?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: /images/20220526/742bf0fce69b45f4af312e15a399a289.png
[load]: https://blog.csdn.net/a__loser/article/details/71186922