js事件

时间 2019-11-12

标签事件栏目 JavaScript 繁體版

原文原文链接

事件

JavaScript有两种事件实现模式：css

1, 内联模式,html

2, 脚本模式。node

内联模式数组

内联模式 : 直接在HTML标签中添加事件. 浏览器

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

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

//注意单双引号this

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

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

//执行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("你肯定要跳转吗?"))；

}

拖拽

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

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 就是鼠标点击的位置距离其所属对象上边界的距离