javascript学习笔记整理（事件）

Posted 2020-06-13

一、事件驱动

1.事件javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)

2.事件源引发事件的元素(发生在谁的身上)

3.事件处理程序对事件处理的程序或是函数 (发生了什么事)

二、事件的分类

1.鼠标事件

onclick　　　　　　　鼠标点击事件

ondblclick    　　　　鼠标双击事件

onmousedown    　 鼠标按下

onmouseup      　　鼠标松开

onmousemove       鼠标移动

onmouseover         鼠标移入

onmouseout          鼠标移出

2.键盘事件

onkeyup               某个键盘被松开

onkeydown           某个键盘被按下

onkeypress           某个键盘按键被按下并松开

3.表单事件

onsubmit            确认按钮被点击

onblur                元素失去焦点

onfoucs              元素获得焦点

onchange           元素域内容改变

4.页面事件

onload                 页面或图片加载完成时

onunload              用户退出页面

onbeforeunload    当页面关闭的时候弹出对话框(确定关闭)，刷新的话也会调用到

二、绑定事件

1.在脚本中绑定

<div id="chen"></div>
<script>
    document.getElementById(‘chen‘).onclick=function(){
        alert(‘taojiaqu‘);
    }
</script>

 

 2.直接在HTML元素绑定

<div id="chen" onclick="alert(‘taojiaqu‘);"></div>

 

//不推荐
<script for="two" event="onclick">
    alert("我是DIV2");
</script>

 

 二、同一个事件绑定多个事件处理程序都不支持匿名函数的删除

IE(6-8)

对象.attachEvent("事件(on)","处理程序")---添加

对象.detachEvent("事件(on)","处理程序")---删除

FF,IE9+,谷歌

对象.addEventListener("事件","处理程序",布尔值)---添加

对象.removeEventListener("事件","处理程序",布尔值)---删除

 

javascript事件对象实例

一、事件对象（用来记录一些事件发生时的相关的信息的对象）

1.只有当事件发生的时候才产生，只能在处理函数内部访问

2.处理函数运行结束后自动销毁。

二、如何获取事件对象

IE：    window.event

FF:    对象.on事件=function (e){}

三、事件对象的属性

1.关于鼠标事件的事件对象

相对于浏览器位置的

clientX---当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置

clientY---当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置

相对于屏幕位置的

screenX---当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置

screenY---当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置

相对于事件源的位置

IE，谷歌

offsetX---当鼠标事件发生的时候，鼠标相对于事件源X轴的位置

offsetY---当鼠标事件发生的时候，鼠标相对于事件源Y轴的位置

FF

layerX---当鼠标事件发生的时候，鼠标相对于事件源X轴的位置

laterY---当鼠标事件发生的时候，鼠标相对于事件源Y轴的位置

2.关于键盘事件的事件对象

keyCode---获得键盘码, 用法 e.keyCode
type---返回发生的事件的类型(主要是用于多个事件通用一个事件处理程序的时候)
altKey---判断alt键是否被按下,按下是true 反之是false(布尔值)
ctrlKey---判断ctrl键是否被按下,按下是true 反之是false(布尔值)    
shiftKey---判断shift键是否被按下,按下是true 反之是false(布尔值)

 

按键             码值

方向左           37
方向上           38
方向右           39
方向下        　40
空格        　　32