当前位置：网站首页 > 技术教程 > 正文

javascript自学记录:各类事件 js事件都有哪些

suiw9 2024-11-09 14:51 33 浏览 0 评论

事件太多了，我也严重怀疑这样的学习方式，特别是我觉得这本书完全是本工具书，并不是我们循徐渐进的掌握js知识的好书，我还是认为任务推动型的讲解是让人更容易掌握的方式。

13.4.2 焦点事件

Focusout
Focusin
blur 不支持冒泡
DOMFocusout 支持冒泡，但DOM3时舍弃
Focus 不支持冒泡
DOMFocusin 支持冒泡，但DOM3时舍弃

13.4.3 鼠标与滚轮事件

click
dblclick
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup

1、客户区坐标位置

x与y坐标的信息存放在clientX和clientY中：

window.onclick = function (envet) {
    alert(event.clientX + "," + envet.clientY);
};

2、页面坐标

页面坐标是基于网页的原始0，0坐标计算机位置，无论是否有滚动，都不会影响。

而第1点中的客户区坐标则不同，如果有滚动，那还是以左上角为0，0。

以pageX和pageY来作为页面坐标的值。

3、屏幕坐标

以显示器左上角为原点，以screenX和screenY属值存储坐标值。

4、修改键（配合鼠标使用的功能键）

window.onclick = function (envet) {
    var keys = new Array();
    if (event.shiftKey){
        keys.push("按了shift键");
    }
    if (envet.ctrlKey){
        keys.push("按了ctrl键");
    }
    if (envet.altKey){
        keys.push("按了alt键");
    }
    alert(keys.join(","))
};

5、相关元素

mouseover和mouseout事件发生时，涉及到的元素。可以通过event.relatedTarget属性得到相关信息。

我们新写了一些HTML代码：

<html>
<head>
    <title>Related Elements Example</title>
    <style>
        #myDiv{
            background-color:red;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>
    <script src="js/myjs.js"></script>
</body>
</html>

在对应的js文件中有以下代码：

var div = document.getElementById("myDiv");
div.onmouseover = function (event) {
    console.log(event.relatedTarget.nodeName);
};
div.onmouseout = function (event) {
    console.log(event.relatedTarget.nodeName);
};

当移进移出div的时候，就会在控制台输出BODY。

6、鼠标按钮

event.button的值有0，1，2，分别代表主按钮，中间按钮，次按钮。

7、更多的信息

altLeft
ctrlLeft
offsetX
offsetY
shiftLeft

13.4.4 键盘与文本事件

keydown 按下任意键时触发
keypress 按下字符键时触发
keyup 释放键盘上的键时触发
textInput 在文本插入文本框之前会触发

按字符键触发顺序：

keydown->keypress->文本出现->keyup

如果按住一个键不放，会重复触发keydown->keypress直到松开键为止。

非字符键触发顺序：

keydown->keyup，如果按住不放，则会重复keydown事件。

1、键码

keydown和keyup事件时，event对象的keyCode属性会包含一个ASCII码。

2、字符编码

部分浏览器支持charCode属性，值为ASCII码，这时keyCode=0。跨浏览器需要检测charCode是否有值，如果没有则使用keyCode。

var EventUtil = {
    getCharCode:function (event) {
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
};

接下来就是给文本框增加keypress事件：

var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    alert(EventUtil.getCharCode(event));
});

3.DOM3

DOM3中不再包含charCode，而是key和char

key中存的不是ASCII码，而是字符，按下非字符时，存的是相应键的名。

char与key相同，但按下非字符键时为null。

4.DOM3中新增一个textInput事件，用来替代keypress，不过有区分，任何可获得焦点的对象都可以有keypress事件，但只有可编辑区域才能触发textInput事件。并且只有按下可以输入的字符时才会触发textInput。event的data属性中是按下的字符。

var textbox = document.getElementById("myInput");
EventUtil.addHandler(textbox,"textInput",function (event) {
    event = EventUtil.getEvent(event);
    console.log(event.data);
});

这样在input中输入字符时，会在控制台显示按下的键。

event还有一个inputMethod属性，代表字符是如何被输入到文本框中的。

0，表示浏览器不确定是怎么输入的。
1，表示是使用键盘输入的。
2，表示文本是粘贴进来的。
3，表示文本是拖放进来的。
4，表示文本是使用IME 输入的。
5，表示文本是通过在表单中选择某一项输入的。
6，表示文本是通过手写输入的（比如使用手写笔）。
7，表示文本是通过语音输入的。
8，表示文本是通过几种方法组合输入的。
9，表示文本是通过脚本输入的。

使用这个属性可以确定文本是如何输入到控件中的，从而可以验证其有效性。

5.设备中的键盘事件

13.4.5 复合事件

是DOM3中新添加的一类事件，用于处理IME输入序列。

compositionstart IME的文本复合系统打开时触发，表示要开始输入了
compositionupdate 在向输入字段中插入新字符时触发
compositionend 在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态。

这3个事件有一个data属性，在不同事件中包含的内容不同：

compositionstart 正在编辑的文本
compositionupdate 正插入的新字符
compositionend 此次输入中的所有字符

13.4.6 变动事件

DOMSubtreeModified DOM结构中发生变化时触发
DOMNodeInserted 一个节点作为子节点插入到另一个节点时触发
DOMNodeRemoved 在节点从其父节点中被移除时触发
DOMNodeInsertedIntoDocument 在一个节点被直接插入文档或通过子树间接插入文档之后触发
DOMNodeRemovedFromDocument 在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发
DOMAttrModified 在特性被修改之后触发。
DOMCharacterDataModified 在文本节点的值发生变化时触发

使用以下代码可以检测浏览器是否支持变动事件：

var isSupported = document.implementation.hasFeature("MutationEvents","2.0");

1、删除节点

使用removeChild()和replaceChild()方法删除节点时，会触发DOMNodeRemoved事件。如果被移除的节点包含有子节点，那么所有子节点与其相继触发DOMNodeRemovedFromDocument事件。

<! DOCTYPE html>
<html>
    <head>
        <title>Node Removal Events Example</title>
    </head>
    <body>
        <ul id="myList">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>

在这个例子中，我们假设要移除<ul>元素。此时，就会依次触发以下事件。

(1) 在<ul>元素上触发DOMNodeRemoved 事件。relatedNode 属性等于document.body。

(2) 在<ul>元素上触发DOMNodeRemovedFromDocument 事件。

(3) 在身为<ul>元素子节点的每个<li>元素及文本节点上触发DOMNodeRemovedFromDocument

事件。

(4) 在document.body 上触发DOMSubtreeModified 事件，因为<ul>元素是document.body

的直接子元素。

2、插入节点

在使用appendChild()、replaceChild()、insertBefore()方法向DOM中插入节点时，会触发DOMNodeInserted事件。

接着在新插入的节点上触发DOMNodeInsertedIntoDocument事件。

最后触发DOMSubtreeModified事件。

13.4.7 HTML5事件

1、contextmenu

下面代码演示了如何定义上下文菜单，以及取消缺省上下文菜单。

<!DOCTYPE html>
<html>
    <head>
        <title>ContextMenu Event Example</title>
    </head>
    <body>
        <div id="myDiv">Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.</div>
        <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver">
            <li><a href="http://www.nczonline.net">Nicholas’ site</a></li>
            <li><a href="http://www.wrox.com">Wrox site</a></li>
            <li><a href="http://www.yahoo.com">Yahoo!</a></li>
        </ul>
        <script src="js/myjs.js"></script>
    </body>
</html>

下面为js代码：

EventUtil.addHandler(window, "load", function(event){
    var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "contextmenu", function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);     // 取消默认上下文菜单

        var menu = document.getElementById("myMenu");
        menu.style.left = event.clientX + "px";
        menu.style.top = event.clientY + "px";
        menu.style.visibility = "visible";
    });
    EventUtil.addHandler(document, "click", function(event){
        document.getElementById("myMenu").style.visibility = "hidden";
    });
});

2、beforeunload

在unload之前发生，意在告诉用户页面将要卸载，是否继续。

EventUtil.addHandler(window, "beforeunload", function(event){
   event = EventUtil.getEvent(event);
   var message = "I'm really going to miss you if you go.";
   event.returnValue = message;
   return message;
});

需要为event.returnValue属性设置提示文本，最后还要return 提示文本。

3、DOMContentLoaded

不同于load，本事件只在DOM树形成后就触发，而load则是会连图像、javascript文件、CSS文件或其他资源加载完而发生。

4、readystatechange事件

节点有readyState属性，值有以下几个：

uninitialized（未初始化）
loading(正在加载)
loaded(加载完毕)
interactive(交互)
complete(完成)

5、pageshow和pagehide事件

pageshow会在load事件触发后触发，如果是bfcache中的页面，则会在页面状态恢复的那一刻触发。需要将事件添加到window上。

(function(){
    var showCount = 0;
    EventUtil.addHandler(window, "load", function(){
        alert("Load fired");
    });
    EventUtil.addHandler(window, "pageshow", function(){
        showCount++;
        alert("Show has been fired " + showCount + " times.");
    });
})();

event有一个persisted属性，如果页面被保存到了bfcache中，则值为true。

pagehide事件发生在unload之前，也是需要添加到window对象上。

6、hashchange事件

URL的参数列表发生变化时的事件。

该事件需要指定给window，event对象有oldURL和newURL两个属性。

EventUtil.addHandler(window, "hashchange", function(event){
    alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});

以下代码可以检测浏览器是否支持事件：

var isSupported = ("onhashchange" in window);
var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);

13.4.8 设备事件

1、orientationchange

苹果Safari浏览器中有orientationchange事件，不同的设备方向时window.orientation属性会有不同值。

EventUtil.addHandler(window, "load", function(event){
    var div = document.getElementById("myDiv");
    div.innerHTML = "Current orientation is " + window.orientation;
    EventUtil.addHandler(window, "orientationchange", function(event){
        div.innerHTML = "Current orientation is " + window.orientation;
    });
});

2、MozOrientation

当设备的加速计检测到设备方向改变时触发。有x,y,z三个属性。

3、deviceorientation

4、devicemotion

13.4.9 触摸与手势事件

1、触摸事件

touchstart 当手指触摸屏幕时触发
touchmove 当手指在屏幕上滑动时连续的触发
touchend 当手指从屏幕上移开时触发
touchcancel 当系统停止跟踪触摸时触发

常用属性：

bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey

2、手抛事件

gesturestart 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
gesturechange 当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend 当任何一个手指从屏幕上移开时触发

loadjs

上一篇：JS面试宝典 js面试2021
下一篇：深入理解 window.onload 深入理解课文对朗读时更好的处理重音有何帮助

javascript自学记录:各类事件 js事件都有哪些

13.4.2 焦点事件

13.4.3 鼠标与滚轮事件

1、客户区坐标位置

2、页面坐标

3、屏幕坐标

4、修改键（配合鼠标使用的功能键）

5、相关元素

6、鼠标按钮

7、更多的信息

13.4.4 键盘与文本事件

13.4.5 复合事件

13.4.6 变动事件

1、删除节点

2、插入节点

13.4.7 HTML5事件

1、contextmenu

2、beforeunload

3、DOMContentLoaded

4、readystatechange事件

5、pageshow和pagehide事件

6、hashchange事件

13.4.8 设备事件

1、orientationchange

2、MozOrientation

3、deviceorientation

4、devicemotion

13.4.9 触摸与手势事件

1、触摸事件

2、手抛事件

相关推荐

取消回复欢迎 你 发表评论:

Linux:Ubuntu22.04上安装python3.11，简单易上手

宝马阿布达比分公司推出独特M4升级套件，整套升级约在20万

MATLAB中图片保存的五种方法(一)（matlab中保存图片命令）

别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了

Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器

如何提取、修改、强刷A卡bios a卡刷bios工具

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

日本组合“岚”将于2020年12月31日停止团体活动

SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索

tinymce 号称富文本编辑器世界第一，大家同意么?

取消回复欢迎你发表评论: