一.DOM 是什么?
文档对象模型(Document Object Mobel 简称DOM),是W3C组织推荐的处理可扩展标记语言
通过这些DOM接口可以改变网页的内容,结构和样式
1.对于javascript,为了能够是javascript操作html.javascript就有了一套自己的dom编程接口
2.对于HTML,dom使得html形成一颗dom树,包含文档,节点,元素
二.什么是注册事件?
给元素添加事件,称为注册事件或绑定事件
三.注册事件有两种方式:
传统方法和方法监听事件
传统注册方法:
利用on开头的事件onclick
<button onclick="alert('hello world')"></button>
btn.onclick=function(){}
特点:注册事件的唯一性
注意:
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
方法监听事件 :
w3c标准
addEventListener()是一个方法
ie9之前不支持这个方法,可以使用attachEvent()代替
特点:同一个方法 可以注册多个监听器
addEventListener事件监听方式
dom对象.addEventListener(type,listener [usecapture])
dom对象.addEventListener ()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
该方法接收三个参数︰
type:事件类型字符串,比如click、mouseover ,注意这里不要带onlistener:事件处理函数,事件发生时,会调用该监听函数
useCapture : 布尔值 事件流的类型 默认false事件冒泡流 如为true,则是事件捕获流
ie10及以下版本
dom对象.attachEvent(参数1,参数2)
添加监听事件
参数1:事件 on+事件名
参数2:函数 事件触发后调用的函数
注册事件兼容性解决方案
function addEventListener(element, eventName, fn) {
//判断当前浏览器是否支持addEventListener方法
if (e1ement.addEventListener) {
element.addEventListener(eventName, fn);
//第三个参数默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else i
//相当于element.onclick = fn;
element['on' + eventName] = fn;
}
//兼容性处理的原则: 首先照顾大多数浏览器, 再处理特殊浏览器
删除事件(解绑事件)
dom对象.removeEventListener(参数1,参数2,参数3)
删除监听事件
参数1:事件名 不带on
参数2:函数 事件触发后调用函数
参数3:布尔值 事件流的类型 默认false事件冒泡流 如为true,则是事件捕获流
ie的
dom对象.detachEvent(参数1,参数2)
删除监听事件
参数1:事件 on+事件名
参数2:函数 事件触发后调用的函数