JS事件流、事件监听、事件对象、事件委托
JS事件流:
01、DOM级别和DOM事件
02、JS事件流:页面中接收事件的顺序
事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面)
03、捕获:从外向里;冒泡:从里向外。外window-Document-html-body-box1-box2...里
<div class="box" id="box1">
<div class="box" id="box2">
<div class="box" id="box3">
<div class="box" id="box4">
<div class="box" id="box5">
<div class="box" id="box6">
点击
</div>
</div>
</div>
</div>
</div>
</div>
04、事件处理程序:就是响应某个事件的函数。事件处理程序是以on开头的,事件没有on
HTML事件处理程序:<button onclick="alert('hello')"></button> --如果写函数就太麻烦了
DOM0级事件处理程序:btn.onclick=function(){} --不能给一个事件绑定多个函数,后面的函数替代前面的(和相同HTML代码覆盖前面一样)
DOM2级事件处理程序:btn.事件监听器(事件名,事件处理的函数,Boolean值:false默认冒泡 true捕获) 事件名无on ----绑定多个函数,但不支持IE
IE事件处理程序:btn.事件监听器(on事件处理函数名称,事件处理函数) 事件处理函数名称有on 更早的IE只支持冒泡,所以没有第三个参数 -----IE
跨浏览器的事件处理程序:(做兼容) -----兼容所有浏览器
兼容:
事件监听:btn.addEventListener()/btn.removeEventListener() IE:btn.attachEvent()/btn.deatchEvent()
05、事件对象:事件对象是用来记录事件发生时的相关信息的对象,只有在事件发生时才会产生,而且只能在事件处理函数中访问,事件触发完后就会销毁。
事件对象的属性和方法如图:
方法对IE不兼容:
兼容:
事件对象: event = event || window.event;
事件对象方法preventDefault(): IE:window.event.returnValue=false
事件对象方法stopPropagation():IE:window.event.cancelBubble=true
06、事件委托:原理就是利用事件冒泡,只指定一个事件处理程序,管理一类型的事件。核心是利用e.target属性
兼容:
事件对象target的接口: IE:event.srcElement
本文只涉及概念的理解部分,代码部分没怎么写。
最新文章
- 2016-08-16: 检测函数是否存在的C++模板
- Suse碎碎念
- js-JavaScript高级程序设计学习笔记14
- CentOS6.5 本地源搭建Ceph
- 验证控件插图扩展控件ValidatorCalloutExtender(用于扩展验证控件)和TextBoxWatermarkExtender
- Servlet的生命周期及filter,servletRequest和servletResponse
- 51nod 1297 管理二叉树
- php引用详解
- POJ 2983 Is the Information Reliable?(差分约束系统)
- 为SharePoint 2010中的FBA创建自定义登录页面
- 转:CI引入外部js与css
- 认识Backbone (三)
- LeetCode: Best Time to Buy and Sell Stock II [122]
- 日志分析工具-ApexSQL介绍
- python自学日志--基础篇(1)
- BZOJ_4320_ShangHai2006 Homework_分块
- CA 工作流程
- BZOJ3022 : [Balkan2012]The Best Teams
- Java 关于密码处理的工具类[MD5编码][AES加密/解密]
- URL与视图