事件与函数 单词总结

- 事件介绍

- 三要术

1，事件源

<button>按钮</button>

2，事件类型

3，事件处理函数

click  + 事件处理函数

btn.onclick = function(){ // 当事件触发时执行代码 }

一、 事件类型

1， 浏览器事件

load    文档加载完成事件

scroll    滚动事件

resize     窗口尺寸改变事件

2， 鼠标事件

click        鼠标点击事件

dbclick         鼠标双击事件

contextmenu        鼠标右键事件

mouseover         鼠标移入事件

mouseout          鼠标移出事件

mousemove         鼠标移动事件

mousedown        鼠标按下事件

mouseup         鼠标弹起事件

3， 表单事件

e.preventDefault 阻止默认action行为

submit            表单提交事件onsubmit

change          内容转变事件onchange

input              输入事件

4， 焦点事件

foucs        获取焦点onfocus

blur          失去焦点onblur

5， 键盘事件

-------------------------keycode   获取键码----------火狐2.0需要which-----

------------兼容性写法： var kecode = e.keycode || e.which------------- 

keydown     按下按键

keyup    弹起按键 （松开按键时）

keypress            按住事件

6， 触摸事件

touchstart     触摸开始（开始触摸）

touchmove         触摸移动  （手指在屏上来回滑动时）

touchend       触摸结束 （触摸结束 手指离开时）

 

二， 事件对象 event

btn.onclick = function(e){

e = e || window.event // 事件对象

}

- 事件对象获取光标位置相关属性

e.offsetX e.offsetY 自身

e.clientX e.clientY 浏览器

e.pageX e.pageY 页面

addEventLisitner  事件监听

removeEventListener 解绑事件监听

事件对象  event

事件目标对象   target

兼容IE  var target = e.target || e.srcElement

阻止事件传播 e.stopPropagation()

事件监听:addEventListener  attachEvent 

arguments 对象（类数组）

右键事件 contextmenu

阻止默认行为==>e.preventDefault()

阻止默认行为==><a href="javascript:void(0)" ></a>

函数:

事件的绑定方式

DOM0级

1. 事件属性方式

2. 赋值式

DOM2级

3. 事件监听

ele.addEventLisitner(事件类型,functiion(){

})

兼容性问题

兼容IE7、8

ele.attachEvent(事件类型,事件处理函数)

注： 事件类型前加'on' onclick

区别:

1. 事件赋值与事件监听 同 事件属性相比，实现了结构与行为分离

2. 事件赋值与事件监听

事件监听方式 后面的事件不会覆盖前面的事件(事件源和事件类型相同)

事件解绑

1. 解绑赋值式绑定事件

btn2.onclick = null

2. 解绑事件监听

btn3.removeEventListener('click',事件处理函数名)

事件对象  event

事件目标对象   target

当前选中的元素节点  e.target

兼容IE  e.srcElement

var target = e.target || e.srcElement

this关键字: 在事件处理函数中this表示事件源

console.log('this ',this)

事件传播

1. 嵌套的元素, 事件会传播

2. 事件传播方向问题

+ 事件冒泡

从事件目标对象开始 -> window对象结束

由内向外传播的事件方式称为事件冒泡 (默认传播行为)

+ 事件捕获

由外向内传, window对象 -> 事件目标对象

3. 事件监听第三个参数设置true表示事件捕获,默认false表示事件冒泡

4. 阻止事件传播

e.stopPropagation()

兼容ie浏览器

e.cancelBubble = true

e.stopPropagation?e.stopPropagation():e.cancelBubble = true

事件监听:

addEventListener : 非 IE 7 8 下使用

attachEvent ：IE 7 8 下使用

事件代理(委托) 利用 事件冒泡实现

事件委托使用场景

当要给多个元素循环绑定事件的时候可以考虑使用事件委托简化操作

注： 不支持事件冒泡的不能使用 如:焦点事件

好处:

减少了事件绑定的数量；

对后来动态创建的元素依然有效，

解决动态添加的元素节点无法绑定事件的问题

默认行为：

1. a标签 默认行为 href执行链接跳转

2. form表单action

3. 右键事件 contextmenu

阻止默认行为==>e.preventDefault()

扩展

a 标签阻止默认行为的扩展写法：<a href="javascript:void(0)" >确定</a>

函数:

自调用函数

函数定义和调用写在一块

(function(){// 函数体})()封装代码==>封装私有变量，独立于全局变量

function fun(){  // arguments 类数组形式存在

console.log(arguments)

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

console.log(arguments[i])

}

}

arguments 对象（类数组）=> 函数所有实参的集合=> 函数体中直接使用=> 函数可变参数

this关键字=> this表示当前对象=> 在同场景下this表示不同的对象

1. 事件处理函数中的this

this->事件源

===============================

2. 普通函数中this

this -> window对象

3. 定时器中this

this -> window对象

4. 自调用函数中this

this -> window对象

===============================

5. 对象方法中的this

Object

var obj = {

name:'jack',

say:function(){

this

}

}

this->调用该方法引用变量指向的对象

- 案例

+ 小区块随光标移动

- 移入显示小区块

- 移出隐藏小区块

- 小区块随光标移动

获取光标位置赋值给小区块

光标闪烁问题

光标在小区域中间

边界检查

+ 表单验证

submit

e.preventDefault 阻止默认action行为

location.href  // 手动跳转地址

+ 拖拽案例

按住区块，区块随光标移动，抬起区块停止移动

// 1.按住区块

div.onmousedown = function(){

// 2. 区块随光标移动

document.onmousemove = function(e){

e = e || window.event

// 3. 光标位置x,y

var x = e.clientX

var y = e.clientY

// 4. 光标位置赋值给区块, 注:区块定位

div.style.top = y + 'px'

div.style.left = x +'px'

}

}

// 5. 抬起区块

document.onmouseup = function(){

//停止移动- 让光标移动事件失效-事件注销

document.onmousemove = null

}