事件 相关内容

事件介绍

事件处理由三部分组成:

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

2.事件处理函数

3.事件执行函数

例如:单击文档任意处.

document.onclick = function(){

console.log('单击了文档页面某一个地方')

};

在上面的程序中:

docunment:是触发事件的对象,表示触发事件的元素所在区域

onclick:表示一个事件处理函数(on+事件类型click)

function(){};匿名函数是被执行的函数,用于触发事件后执行

所有的事件处理函数都会有两部分组成,on+事件类型;

例如:onclick事件处理函数就是on加上click

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

事件的分类

JavaScript可以处理的事件种类分有三种:鼠标事件,键盘事件和HTML事件

1.鼠标事件:页面所有元素都可以触发鼠标事件

click:当单击鼠标按钮并在松开时触发

onclick = function(){

console.log('单击了鼠标')

}

dblclick:当双击鼠标按钮时触发

onclick = function(){

console.log('双击了鼠标')

}

mousedown:当前按下了鼠标还未松开时触发

onmousedown = function(){

console.log('按下了鼠标')

}

mouseup:释放鼠标按钮时触发

mouseover:当鼠标移入某个元素的那一刻触发

mouseout:当鼠标移出某个元素的那一刻触发

mousemove:当鼠标指针在某个元素上移动时触发

mouseenter:当鼠标移入某个元素的那一刻触发

mouseleave:当鼠标刚移出某个元素的那一刻触发

mouseover和mouseenter的区别是:

mouseover:元素的子元素移入也会触发事件

mouseenter:元素的子元素移入不会触发事件

键盘事件

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

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

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

window.onkeydown = function(){

        console.log('按下了键盘上的某个键')

}

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

keyup:当用户释放键盘上的某个按键时触发

HTML事件

        HTML事件,跟HTML页面相关的事件

load:当页面完全加载后触发

window.onload = function(){

        console.log('页面已经加载完毕')

}

unload:当页面完全卸载后触发

window.unload = function(){

        console.log('页面已经卸载完毕')

}

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

input onselect = function(){

        console.log('选择了文本框中的内容')

}

change:当文本框(input或者 textarea)中的内容改变且失去焦点后触发

input.onchange = function(){

        console.log('文本框中内容改变了')

}

focus:当页面或者元素获得焦点时触发

input.onfocus = function(){

        console.log('文本框获得了焦点')

}

blur:当页面或者元素失去了焦点时触发

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

form.onsubmit = =function(){

        console.log('提交form表单')

}

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

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

window.onscroll = function(){

        console.log('滚动了滚动条')

}

事件对象Event

1事件对象(event对象)是什么?

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

2事件对象的属性

button:鼠标按下了哪个键

例如:

document.onclick = function(evt){

        var e = evt || event

        console.log(e.button)

}

clienX:浏览器可视区域的X坐标

clienY:浏览器可视区域的Y坐标

pageX: 浏览器内容区域的x坐标

pageY: 浏览器内容区域的y坐标

screenX: 显示器屏幕的x坐标

screenY: 显示器屏幕的y坐标

offsetX: 鼠标点击的元素位置距离元素左边界的x坐标

offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

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

3.键盘事件的组合键

键盘上某些键可以配合鼠标来触发一些特殊的事件,比如Shift,Ctrl,Alt

shiftkey:判断是否按下了Shift键

ctrlkey:判断是否按下了ctrl键

altkey:判断是否按下了alt键

键码:keyCode属性

        所有按键在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应.对数字字母字符集,keyCode属性的值与ACSII码中对应

注意大写字母或小写字母的编码相同,都为大写字母的编码

字符编码:charCode属性

        Firefox, Chrome和Safari的event对象支持charCode属性, 只有按下字符键并且使用keypress事件时才会得到charCode, 这个charCode的值和ASCII码对应, 和keyCode也类似, 但是charCode的字母区分大小写. ( 字符键: 数字, 字母(区分大小写), 字符, 空格, 回车 )

事件中的this

在JS事件中, this表示触发事件的元素节点对象;

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

box.onclick = function() {

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

};

通过for循环添加事件, 使用this

var aInput = document.getElementsByTagName('input');

for (var i=0; i<aInput.length; i++) {

        aInput[i].index = i;

        aInput[i].onclick = function() {

       console.log(this.index);

        };

}