JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理
1、JS里面的事件流
DOM2级事件模型中规定了事件流的三个阶段:捕获阶段、目标阶段、冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段
捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素。
冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面。
关于js事件,这里有一篇非常详细的介绍,可以看下:http://www.cnblogs.com/hyaaon/p/4630128.html
2、IE和W3C不同绑定事件解绑事件的方法有什么区别,参数分别是什么,以及事件对象e有什么区别
绑定事件:
W3C:target.addEventListener(event, listener, useCapture);
event —— 事件类型;
listener —— 事件触发时执行的函数;
useCapture —— 指定事件是否在捕获或冒泡阶段执行,为true时事件句柄在捕获阶段执行,为false(默认false)时,事件句柄在冒泡阶段执行。
btn.addEventListener('click',function(){
//do something...
},false)
对应的事件移除:
removeEventListener(event,function,capture/bubble);
IE:target.attachEvent(type, listener);
type - 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener —— 实现了 EventListener 接口或者是 JavaScript 中的函数。
btn.attachEvent('onclick',function(){
//do something...
})
对应的事件移除:
detachEvent(event,function);
3、事件的委托(代理 Delegated Events)的原理以及优缺点
委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的,
优点是:
(1)可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
(2)可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
缺点是:
事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。
var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
var button = e.target;
if(!button.classList.contains("active"))
button.classList.add("active");
else
button.classList.remove("active");
});
4、手写原生js实现事件代理,并要求兼容浏览器
// 简单的事件委托
function delegateEvent(interfaceEle, selector, type, fn) {
if(interfaceEle.addEventListener){
interfaceEle.addEventListener(type, eventfn);
}else{
interfaceEle.attachEvent("on"+type, eventfn);
} function eventfn(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if (matchSelector(target, selector)) {
if(fn) {
fn.call(target, e);
}
}
}
}
/**
* only support #id, tagName, .className
* and it's simple single, no combination
*/
function matchSelector(ele, selector) {
// if use id
if (selector.charAt() === "#") {
return ele.id === selector.slice();
}
// if use class
if (selector.charAt() === ".") {
return (" " + ele.className + " ").indexOf(" " + selector.slice() + " ") != -;
}
// if use tagName
return ele.tagName.toLowerCase() === selector.toLowerCase();
} //调用
var odiv = document.getElementById("oDiv");
delegateEvent(odiv,"a","click",function(){
alert("");
})
5、事件如何派发也就是事件广播(dispatchEvent)
一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
IE下的例子:
//document上绑定自定义事件ondataavailable
document.attachEvent('ondataavailable', function (event) {
alert(event.eventType);
});
var obj=document.getElementById("obj");
//obj元素上绑定click事件
obj.attachEvent('onclick', function (event) {
alert(event.eventType);
});
//调用document对象的createEventObject方法得到一个event的对象实例。
var event = document.createEventObject();
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.fireEvent('ondataavailable', event);
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
obj.fireEvent('onclick', event);
};
高级浏览器(chrome,firefox等)的例子:
//document上绑定自定义事件ondataavailable
document.addEventListener('ondataavailable', function (event) {
alert(event.eventType);
}, false);
var obj = document.getElementById("obj");
//obj元素上绑定click事件
obj.addEventListener('click', function (event) {
alert(event.eventType);
}, false);
//调用document对象的 createEvent 方法得到一个event的对象实例。
var event = document.createEvent('HTMLEvents');
// initEvent接受3个参数:
// 事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent("ondataavailable", true, true);
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent('HTMLEvents');
event1.initEvent("click", true, true);
event1.eventType = 'message';
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
obj.dispatchEvent(event1);
};
JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理的更多相关文章
- 移动端三合一瀑布流插件(原生JS)
没有前言,先上DEMO(手机上看效果更佳)和 原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高 这种形式实现起来非常容易,这里就不再多说. 二.等宽 ...
- chart.js 里添加图表的清单:
chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...
- JQuery&原生js ——实现剪刀石头布小游戏
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...
- 通过案例来剖析JQuery与原生JS
首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: ...
- 通过游戏认识 --- JQuery与原生JS的差异
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write ...
- 原生js仿jquery一些常用方法
原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
- 放弃jQuery,使用原生js吧!
转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...
- 原生JS实现简单富文本编辑器2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
随机推荐
- BZOJ.1023.[SHOI2008]cactus仙人掌图(DP)
题目链接 类似求树的直径,可以用(类似)树形DP求每个点其子树(在仙人掌上就是诱导子图)最长链.次长链,用每个点子节点不同子树的 max{最长链}+max{次长链} 更新答案.(不需要存次长链,求解过 ...
- Codeforces Round #375 (Div. 2) F. st-Spanning Tree 生成树
F. st-Spanning Tree 题目连接: http://codeforces.com/contest/723/problem/F Description You are given an u ...
- 理解JVM模型
概括 JVM运行时数据区可以划分为5部分,分别是:程序计数器.虚拟机栈.本地方法栈.堆.方法区 程序计数器(Program Counter Register) 相当于当前线程所执行字节码的行号指示器. ...
- 【Hadoop】HDFS - 创建文件流程详解
1.本文目的 通过解析客户端创建文件流程,认知hadoop的HDFS系统的一些功能和概念. 2.主要概念 2.1 NameNode(NN): HDFS系统核心组件,负责分布式文件系统的名字空间管理.I ...
- 使用 IntraWeb (9) - JavaScript
IW 依赖 js 构建(我数了数, 在当前版本它的资源文件默认携带了 26 个 js); 但 IW 尽可能地让用户少用或不用 js, 但如果你对 js 也不陌生, IW 提供了多种途径与方便. 我给它 ...
- android依据区域高度切割文本问题
android字体显示涉及例如以下參数:1. 基准点是baseline:2. Ascent是baseline之上至字符最高处的距离:3. Descent是baseline之下至字符最低处的距离.4. ...
- Golang 特性简介
by sheepbao 主要大概介绍go语言的历史和特性,简单的入门. 来历 很久以前,有一个IT公司,这公司有个传统,允许员工拥有20%自由时间来开发实验性项目.在2007的某一天,公司的几个大牛, ...
- OOP设计模式[JAVA]——04命令模式
命令模式 命令模式的意图 命令模式属于对象的行为模式.别名又叫:Action或Transaction. 命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请求 ...
- Modbus读写模拟量寄存器具体解释
读可读写模拟量寄存器: 发送命令(主机向从机)格式: [设备地址] [命令号03] [起始寄存器地址高8位] [低8位] [读取的寄存器数高8位] [低8位] [CRC校验的低8位] [CRC校验的高 ...
- 基于设备树的controller学习(2)
作者 彭东林 pengdonglin137@163.com 平台 TQ2440 Linux-4.10.17 概述 上一篇大概介绍了一下demo-controller的结构,下面结合驱动分析. 正文 ...