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插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
随机推荐
- Windows 7 MBR的修复与Linux产品正确卸载
这几天折腾系统很令人崩溃,但也明白了开机引导流程具体如何. 觉得Centos 7不好用,想卸载Redhat安装Ubuntu,为了图方便直接把红帽的硬盘区格式化了.于是开机引导崩溃,咨询了下大神,大神叫 ...
- 2010-2011 ACM-ICPC, NEERC, Moscow Subregional Contest Problem D. Distance 迪杰斯特拉
Problem D. Distance 题目连接: http://codeforces.com/gym/100714 Description In a large city a cellular ne ...
- 重写对象ToString方法
重写对象ToString方法,引入Newtonsoft.Json public override string ToString() { JsonSerializerSettings settings ...
- centos 7 安装 rvm 超时
关于 rvm 建议没有变成基础的朋友不要选择这种方式安装 不然很有可能到 对ruby很感兴趣想学到放弃的 因为ruby实在是太麻烦 太麻烦 你会遇到各种各样的问题 我之前安装过一次rvm ...
- Bootstrap入门学习(三)——简单项目
此样例来自Bootstrap官网提供的入门级模版.仅仅有主要的东西:引入了预编译版的 CSS 和 JavaScript 文件,页面仅仅包括了一个 container 元素. 引入Bootstrap 创 ...
- ZOJ 2702 Unrhymable Rhymes 贪心
贪心.能凑成一组就算一组 Unrhymable Rhymes Time Limit: 10 Seconds Memory Limit: 32768 KB Special Judge ...
- 如何让PictureBox背景色透明
winform程序中的PictureBox载入了一张带有透明度的PNG图片,悬浮于其他控件之上,但是它的背景不是透明的,即使把它的BackColor设置为Color.Transparent,或者是0x ...
- Git+SourceTree使用时出现的问题
今天重新用Git+SourceTree添加代码,出现了很多问题,记录下: 1.安装了我SourceTree后克隆项目,粘贴网址后出现Url不正确的情况. 解决: (寻找了些资料,大仙大部分都是说直接选 ...
- XE5 修复 安卓 输入法隐藏 后 无法退出的问题 3.1
(****************************************************)(* *)(* 编写:爱吃猪头肉 & Flying Wang *)(* 上面的版权声 ...
- 将 tomcat 安装成 windows 服务
1.下载 tomcat 的windows 压缩包,一般以 .zip ,而且文件名中有 bin 的文件就是 2.解压下载的文件到某一个目录下,eg: TOMCAT_HOME 3.打开 cmd ,运行 % ...