自学分享: JavaScript -- dom的事件调用

1、事件

1.1什么是事件?

当用户与web页面进行某些类型的交互时，事件就会发生。

1.2事件类型

鼠标
click dblclick mouseup mousedown mouseover mousemove(鼠标移动) contextmenu(鼠标右键事件)

键盘
keypress keyup(键盘按下) keydown(键盘起来)

HTML 事件
on-load on-resize 页面加载成功之后触发的事件

表单事件
change blur focus input (输入事件) select(下拉选项) submit 表单的提交事件 reset(重置)

触摸事件
touchstart

1.3 事件处理程序

响应某个事件的函数就叫事件处理程序.

2. 事件添加的方式

添加事件方式1:
dom0级(只支持冒泡)
Element.on事件名 = function(){ }

添加事件方式2:
按钮function fn() {
console.log( 'fn ')
}

删除事件:
Element.on事件名 = null

2.2dom2级

添加事件(事件监听):
Element.addEventListener(事件名, function, boll) 事件名一般引用都要’'号.
//bool: 用于决定冒泡事件还是捕获事件,false就是冒泡事件,true是捕获事件.

//IE 事件监听(只支持冒泡)
Element.attachEvent(on事件名, function)

移除事件
Element.removeEventListener(与添加的事件名一致,与添加函数一致,与添加的bool一致)

//IE
datachEvent(event, function)

2.3事件流(概念:捕获优先执行)

概念
描述的是从页面中接收事件的顺序

分类
*冒泡事件:由最具体的元素开始执行,然后逐级向上传递到window对象.
ch -->fa -->body --> html -->document -->window

*捕获事件:当事件发生的时候,从外层开始执行事件,然后逐级向下传递,一直传递到最具体的元素.
window --> document -->html --> body -->fa -->ch

*W3c标准事件流:当事件发生的时候，先执行捕获，再冒泡
window – document --> html – body --> fa --> ch --x fa -->body --> html–>document --> window

3. 事件对象

3.1概念

代表事件的状态,比如事件发生在那个元素上面,鼠标的位置,按下了哪一个键盘等的.

事件对象只会出现由事件触发的函数里.

3.2 获取事件对象的方法

元素.onclick = function(){//event就是事件对象
var e = event ||window.event;
//event == arguements[0];
}

3.3 常见事件对象属性

type: 事件类型

触发此次事件的目标元素: (点的是谁就是谁)
e.target || e.srcElement

注册这个事件的监听对象: (事件写在谁的身上就是谁)
e.currentTarget

鼠标在浏览器内容区域的坐标点:
e.clientX, e.clientY;

鼠标相对屏幕的坐标点
e.screenX,e.screenY

鼠标在事件元素内部的坐标点
e.offsetX, e.offsetY

键盘码(只能是键盘事件才能获取)
event.keycode || event.charcode;

例:
txt.onkeypress = function (e) {
var event = e || window.event;
var k = event.keycode
}
console.log(‘键盘码:’+k);

3.4阻止事件冒泡

event.stopPropagation()
只阻止当前自己
event.cancelBubble = true;//IE写法

3.5阻止默认行为(a标签的跳转,表单提交事件)

event.preventDefault()

window.event.returnValue = false;//IE写法

4.事件委托(事件代理)难点

4.1概念

利用事件冒泡的原理,将事件添加到父元素上.

4.2好处

• 提高性能:
• 可以随时添加子元素;

4.3使用

  list.onclick = function(e) {
    var e = e || window.event;
    var target = e.target || e.srcElement; // 触发事件的目标

    if(target.className.toLowerCase() == 'item') {
      console.log(target.innerText);
    }
  }

总结:批量添加事件都可以使用事件委托.

DOM文档对象模型和基础调用方法

实例 js数据渲染