事件
一、交互
你对页面或什么东西做了些小动作,浏览器都会返回给你一个效果
- 事件是天然存在的,事件操作是交互体验的核心功能
- 事件类型:发生什么事情;点击、鼠标按下、鼠标抬起、鼠标移入、鼠标移出、键盘按下、键盘抬起…
- 事件流:当某个事件发生的时候,哪些元素会监听到该事件发生,这些元素发生该事件的顺序。
- 当一个元素发生了某个事件时,那该元素的所有祖先元素都发生了该事件
- 事件源、事件目标:事件目标阶段的元素
二、如何绑定事件
1、ele.onXXX = function (event) {}
①兼容性很好,但是一个元素只能绑定一个处理程序
②基本等同于写在HTML行间上
2、ele.addEventListener (type,fn,false);——type是事件类型,fn是函数
①在IE8及以下不兼容,需要使用attachEvent,detachEvent添加和移除事件
②可以为某个元素的同一个事件添加多个处理程序,按照注册的先后顺序运行
③允许开发者控制事件处理的阶段,使用第三个参数,表示是否在捕获阶段触发。(如果元素是目标元素(事件源),第三个参数无效)
④如果要移除事件,不能使用匿名函数
3、ele.attachEvent (‘on’ + type,fn);——type是事件类型,fn是处理函数
①IE独有
②可以一个事件绑定多个处理程序,而且同一个函数可以重复多次绑定
三、事件处理程序的运行环境
1、ele.onXXX = function (event) {} ——程序this指向是dom元素本身
<body>
<-- 当点击方块时,浏览器的控制台会打印出div里面的内容-->
<div style="width:100px; height:100px; background-color:aqua;></div>
<script>
var div = document.getElmentsByTagName("div")[0];
div.onclick = function () {
console.log(this);
}
</script>
</body>
2、obj.addachEventListener(type,fn,false); ——程序this指向是dom元素本身
3、obj.addachEvent(‘on’ +type,fn); ——程序this指向window
封装兼容性的方法addEvent(elem,type,handle);给dom对象添加一个事件处理函数(此方法可以写入工具库中)
function addEvent (elem,type,handle) {
if(elem,addEventListener) {
elem.addEventListener(type,handle,false);
} else {
elem.attachEvent('on' +type,function () {
handle.call(e