js事件

Posted 2020-09-20 Sun_

事件

javascript有两种事件实现模式：

1, 内联模式,

2, 脚本模式。

内联模式

内联模式 : 直接在html标签中添加事件.  

//在 HTML中把事件处理函数作为属性执行JS代码

<input type="button" value="按钮" onclick="alert(‘hello‘);" />

//注意单双引号

//在HTML中把事件处理函数作为属性执行 JS 函数

<input type="button"value="按钮" onclick="btnClick();" />

//执行JS 的函数

注: 内联模式调用函数, 则函数不能放到window.onload 里面，否则会找不到该函数。

脚本模式

使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件, 如我们可以采用三种方式来获得节点对象: getElementById(), getElementsByTagName(), getElementsByName()

添加事件方式一 :  通过匿名函数，可以直接触发对应的代码

//给box节点对象添加点击事件onclick

box.onclick = function() {   

         console.log(‘Hello world!‘);

};

添加事件方式二 :  通过指定的函数名赋值的方式 来执行函数

//给box节点对象添加点击事件onclick

box.onclick = func;

function func() {    

         console.log(‘Hello world!‘);

}; 

 

循环添加事件

var aArr = document.querySelectorAll("a");
var sectionArr = document.querySelectorAll("section");

for(var i=0; i<aArr.length; i++){
    aArr[i].index = i;
    aArr[i].onclick = function(){
        for(var i=0; i<sectionArr.length; i++){
            sectionArr[i].classList.remove("active");
            aArr[i].classList.remove("active");
        }
        this.classList.add("active");
        sectionArr[this.index].classList.add("active");
    };
 }


/*以下为用闭包实现方法*/

 for (var i in aArr) {
        aArr[i].onclick = fn(i);
    }

    function fn(index){

        var click = function(){
            for(var j=0;j< aArr.length;j++){
                aArr[j].classList.remove("active");
                sectionArr[j].classList.remove("active");
            }
            aArr[index].classList.add("active");
            sectionArr[index].classList.add("active");

        }
        return click;
    }

 

addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法

element.addEventListener(event, function, useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
function	必须。指定要事件触发时执行的函数。  当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

 

 

 

事件处理函数

所有的事件处理函数都会都有两个部分组成，on+ 事件名称;

注: 事件处理函数一般都是小写字母

JavaScript 可以处理的事件种类有三种：

 1, 鼠标事件、

 2, 键盘事件、

 3, HTML事件。

 

鼠标事件

click： 当单击鼠标按钮并在松开时触发     boxNode.onclick = function() { };

dblclick： 当双击鼠标按钮时触发。ondbclick = function() { };

mouseover：当鼠标移入某个元素的那一刻触发。onmouseover = function() { };

mousedown：当按下了鼠标还未松开时触发。 onmousedown = function() { };

mousemove：当鼠标指针在某个元素上移动时触发。onmousemove = function() { };  

mouseup： 释放鼠标按钮时触发。 onmouseup = function() { };

mouseout：当鼠标刚移出某个元素的那一刻触发。 onmouseout = function() {  };

 

键盘事件

键盘事件，在键盘上按下键时触发的事件;

(一般由window对象或者document对象调用)

keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。

window.onkeydown = function() { };

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

window.onkeypress = function() { };

keyup：当用户释放键盘上的某个键触发。 

window.onkeyup = function() { };

 

Keypress和keydown的区别

KeyDown：在控件有焦点的情况下按下键时发生。会重复触发

KeyPress：在控件有焦点的情况下按下键时发生。会重复触发

KeyUp：在控件有焦点的情况下释放键时发生。

1.KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符 KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）

2.KeyPress 只能捕获单个字符KeyDown 和KeyUp 可以捕获组合键。

3.KeyPress 可以捕获单个字符的大小写

4.KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。

5.KeyPress 不区分小键盘和主键盘的数字字符。KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。

6.其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

系统组合键的判定

在使用键盘的时候，通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。对于此，我们如何来判定？

通过KeyUp 事件能够来处理（这里说明一下为什么不用KeyDown，因为在判定KeyDown的时候，CTRL、SHIFT和ALT 属于一直按下状态，然后再加另外一个键是不能准确捕获组合键，所以使用KeyDown 是不能准确判断出的，要通过KeyUp 事件来判定 ）

 

 

HTML事件

load：当页面完全加载后触发 window.onload = function() { };

unload：当页面完全卸载后触发window.onunload = function() { };

select：当用户选择文本框(input 或 textarea)中的内容触发。 

input.onselect = function() { }; 

change：当文本框(input 或 textarea)内容改变且失去焦点后触发。

input.onchange = function() { };

focus：当页面或者元素获得焦点时触发。 input.onfocus = function() { };

blur：当页面或元素失去焦点时触发。input.onblur = function() {  };

submit：当用户点击提交按钮在<form>元素节点上触发。

 form.onsubmit = function() {  };

reset：当用户点击重置按钮在<form>元素节点上触发。

form.onreset = function() { };

scroll：当用户滚动带滚动条的元素时触发。

window.onscroll= function() { };

 

事件处理的三个组成部分

事件处理由三个部分组成：

1, 触发事件的节点对象

2, 事件处理函数

3, 事件执行函数。

 

this关键字 

在JS事件中, this表示触发事件的元素节点对象;this指向函数的所有者

var box = document.getElementById(‘box‘);

box.onclick = function() {

      console.log(this.nodeName);  //this表示box对象

};

 

 

event对象的获取

event对象(事件对象)是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在arguments数组中.

 

box.onclick = function(evt){

     var oEvent  = evt || event; //获取到event对象(事件对象)

     alert(oEvent);

};

 

 

event对象的属性

1.button属性

document.onclick = function(evt) {

        var oEvent  = evt || event;

        console.log(oEvent.button);

};

 

（右键属性在mousedown中可以显示）；

2.可视区坐标及屏幕坐标

事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区坐标，另一组是屏幕区坐标。

 

Client 是到window的坐标，screen是到整个电脑屏幕的坐标

 

document.onmousedown= function(evt) {

       var oEvent  = evt || event;

        console.log(oEvent.clientX + ‘,‘ + oEvent.clientY);

        console.log(oEvent.screenX + ‘,‘ + oEvent.screenY);

};

 

event对象的属性/键盘事件(修改键)

有时，我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为： Shfit、Ctrl、Alt 和 Meat(Windows 中就是 Windows 键，苹果机中是 Command 键)，它们经常被用来修改鼠标事件和行为，所以叫修改键。

 

 

event对象的属性/键盘事件(键码)

1. 键码 : keyCode属性 

       所有按键, 包括功能键(control, alt,shift, tab, 方向键等), (不包括亮度,音量..的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应, 大写字母或小写的编码相同, 为大写字母。

document.onkeydown = function(evt) {

      var oEvent = evt || window.event;

      alert(oEvent.keyCode);  //按任意键，得到相应的 keyCode

};

 

 

event对象的属性/键盘事件(字符码)

2.字符编码 : charCode属性 

Firefox、Chrome 和 Safari 的event对象支持charCode属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的 ASCII 编码。此时的keyCode通常等于0或者也可能等于所按键的编码

( 键盘上的数字, 字母(区分大小写), 字符, 空格, 回车) 

document.onkeypress = function(evt) {

var oEvent = evt || event;

console.log(oEvent.charCode);

}

 

注：可以使用 String.fromCharCode()将 ASCII 编码转换成实际的字符

 

事件的目标(target属性)

target: 目标对象,存放绑定事件的元素节点对象

document.onclick = function(evt) {

     var oEvent = evt || event;

     console.log("document: " + oEvent.target); //HTMLHtmlElement

}

 

 

事件的冒泡

事件流

        事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候， 那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围 的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。

事件冒泡是从里往外逐个触发。事件捕获，是从外往里逐个触发。那么现代的浏览器 默认情况下都是冒泡模型

事件的冒泡: 指的是在页面上层节点触发的事件会继续传递给下层节点, 这种传递方式,我们称之为事件的冒泡传递;

 

阻止冒泡的方式有两种:

( 在指定不想再继续传递事件的节点的事件执行函数中使用)

//1, 取消冒泡

     oEvent.cancelBubble = true;     //这个用的比较多

//2, 停止传播

     oEvent.stopPropagation();  //不支持IE8以下

 

阻止右键菜单事件

阻止右键菜单

在之前使用event对象的button属性时, 点击鼠标右键会弹出系统菜单, 如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单

document.oncontextmenu = function(){

alert("右键被按下");

return false;

}

 

 

 

超链接的拦截

<a>标签有属性href, 在用户点击超链接标签<a>时, 实际上内部会调用onclick事件，那么如果我们需要在超链接跳转前做一些判断处理, 则可以将onclick指向我们自己的函数,并返回true或者false来决定是否允许超链接跳转;

var oA = document.getElementsByTagName("a")[0];

oA.onclick = function() {

return (confirm("你确定要跳转吗?"))；

}

 

<a href="http://www.baidu.com">百度一下</a>

 

拖拽

所谓拖拽: 就是按住元素后移动位置, 最后松开的过程

1, 实现拖拽相关的三大事件:

onmousedown : 鼠标按下

onmousemove : 鼠标移动

onmouseup : 鼠标松开

 

实现拖拽思路：

    1, 给目标元素添加onmousedown事件(鼠标按下事件)

        在鼠标按下的瞬间, 记录鼠标所在位置与目标元素左边界的距离disX, 以及与上边界的距离disY

    2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)

    在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:

    公式: 目标元素的left = oEvent.clientX – disX + “px”;

             目标元素的top = oEvent.clientY – disY + “px”;

3, 在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件; 

onmousedown触发事件的对象: 目标元素(即要拖拽的元素);

onmousemove触发事件的对象: document

onmouseup触发事件的对象: document

onmousemove和onmouseup的触发事件对象都是document, 意味着鼠标在网页的任意位置移动鼠标或松开鼠标，都会触发对应的事件;

onmousemove和onmouseup 都要写在onmousedown事件中, 这样就可以保证鼠标按下后才可以移动目标元素(onmousemove)或停止移动(onmouseup) 

取消事件的方法：把该事件等于null,(divNode.onmousedown = null;)

 

事件监听器

      事件监听器, 是JS事件中的一种事件触发机制, 我们可以通过添加事件监听器的方式给元素添加事件及执行函数

1, 添加事件监听器

   box.addEventListener("click", func, false) : 给box元素添加点击事件(click), 以及事件执行函数func

针对该函数的三个参数作说明:

      第一个参数(“click”) : 事件名称(前面没有on)

      第二个参数(func): 事件执行函数名称(没有双引号, 也没有())

匿名函数写法：function(){}

      第三个参数(false/true) : 是否使用捕捉(反向冒泡)，默认false，为冒泡 

注: IE8及其以下不支持，火狐和谷歌支持。 

2, 移除事件监听器 

   box.removeEventListener("click", func) : 将box元素的点击事件(click), 以及对应的事件执行函数func移除 

注: 这里只会删除使用box.addEventListener()方法添加的事件监听器 

 

获取style样式

Var cssStyle = box.currentStyle || getComputedStyle(box, null);

 

例子：console.log(getComputedStyle(box, null).width);

修改style属性的时候只能用   doxNode.style.width =’100px’;

 

offsetParent参照物父元素(只能取值，不能赋值)

当某个元素的父元素或以上元素都未进行CSS定位时，则返回body元素，也就是说元素的偏移量（offsetTop、offsetLeft）等属性是以body为参照物的

当某个元素的父元素进行了CSS定位时（absolute或者relative），则返回父元素，也就是说元素的偏移量是以父元素为参照物的

当某个元素及其父元素都进行CSS定位时，则返回距离最近的使用了CSS定位的元素

Offsetwidth 类似于 style.width,此处取到的是自身的宽度   Offsetheight 类似于 style.height，此处取到的是自身的高度

oEvent.offsetX 就是鼠标点击的位置距离其所属对象左边界的距离

oEvent.offsetY 就是鼠标点击的位置距离其所属对象上边界的距离

以上是关于js事件的主要内容，如果未能解决你的问题，请参考以下文章

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

原生js禁止页面滚动

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程