JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理
2018-07-26 23:25
477 查看
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(0) === "#") { return ele.id === selector.slice(1); } // if use class if (selector.charAt(0) === ".") { return (" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1; } // if use tagName return ele.tagName.toLowerCase() === selector.toLowerCase(); } //调用 var odiv = document.getElementById("oDiv"); delegateEvent(odiv,"a","click",function(){ alert("1"); })
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实现事件代理和事件模型和事件广播的学习
- 1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并要求兼容浏览器
- 原生js实现必应自动搜索功能(事件绑定和事件代理和键盘事件),亲测chrome实现
- 关于iOS自定义控件:在view上实现事件和代理
- 关于原生js中bind函数的简单实现
- 按钮点击事件的实现方式---原生js
- 原生js实现下拉到底事件
- 通过原生JS实现为元素添加事件
- 关于用原生js实现tab栏的切换:
- 原生js实现自定义事件
- 通过原生JS实现为元素添加事件的方法
- js原生事件委托的实现
- 原生js 事件代理方法
- 原生js实现下拉框功能(支持键盘事件)
- 原生js 实现document ready事件,出自犀牛书
- 原生JS实现AJAX、JSONP及DOM加载完成事件
- 原生JS如何利用冒泡减少事件的触发,只代理给共有的父元素。
- 关于js中文乱码问题和js事件代理动态生成div
- IOS 中关于自定义Cell 上的按钮 开关等点击事件的实现方法(代理)
- 关于JS事件冒泡与JS事件代理(事件委托)