JavaScript部分笔记03

事件

鼠标事件：

事件名称                          场景应用

onmousedown                 当鼠标被按下的时候触发

onmouseup                      当鼠标抬起的时候触发

onmouseover                   当鼠标移入的时候触发

onmouseout                     当鼠标移出的时候触发

onclick                              当鼠标点击的时候触发

ondblclick                          当鼠标双击的时候触发

onmousemove                  当鼠标移动的时候触发

oncontextmenu                  当鼠标右键的时候触发（可以自定义右键菜单）

鼠标移入移出变色

鼠标双击、鼠标移动、鼠标右键

键盘事件

事件名称                          场景应用

onkeydown                 当键盘（按键）被按下的时候触发

onkeyup                       当键盘（按键）被抬起的时候触发

键盘事件与keycode使用

表单事件

onsubmit     当表单提交的时候触发

表单事件Demo

onchange      当表单内容改变的时候就会触发改变

onchange应用

onfocus         获取焦点时会触发

onblur            失去焦点时会触发

onfocus和onblur以及onsubmit应用

窗口事件

和窗口有关的事件 window   是js中最顶层的对象  

onload       当窗口加载完成时触发

onresize     当窗口改变时触发

窗口事件示例

事件对象 event

事件对象就是当事件发生时，用来记录事件的相关信息的对象

事件对象理解为：飞机的黑匣子或者行车记录仪

兼容性解决方案：var ev=evt ||event

 event兼容性解决方案：传入的evt也可以是ev

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。

客户区指的是当前窗口

语法：event.clientX

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。

语法：event.clientY

clientX和clientY事件

百度登录框实现拖拽功能的代码应用

实现原理：获取拖拽后的offsetLeft与offersetTop的值来赋到style中

实现代码

用键盘控制box移动的代码实现

用keyCode实现移动

用switch实现的代码：要牢记，不熟悉

事件冒泡

事件冒泡指的是事件会从内到外传播

事件冒泡机制

事件冒泡浅体验

阻止事件冒泡

代码  高版本下可以直接用event.stopPropagation()  或者传入ev后用ev.stopPropagation() 

低版本下代码：

function stopEvent(ev){

var ev=ev||window.event

if(ev&&ev.StopIteration){

ev.stopPropagation()

}else if(window.event){

window.event.cancelBubble=true

}

}

阻止事件冒泡代码

事件源

标准浏览器下target 非标准为srcElement

创建元素：creatElement

添加元素：appendChild

creatElement创建元素appendChild添加元素

以下代码与上面代码一起看

事件冒泡应用场景：事件委托（让它的父级来做）