展开

关键词

addEvent.js源码解析

* Props to Dean Edwards' addEvent library for many of the ideas. */ jQuery.event = { } Dean Edwards 的 addEvent.js (http://dean.edwards.name/weblog/2005/10/add-event/)库为 jQuery 的事件绑定提供了很多想法,我们就来看下 2005 年的 addEvent.js 。 id addEvent.guid = 1; function addEvent(element, type, handler) { // assign each event handler 最后: 完整代码请看https://github.com/AttackXiaoJinJin/jQueryExplain/blob/master/addEvent.js.html ----

26610

Dean-Edward的事件系统实现

现在自己贴出根据DE模型,自己修改后的事件系统: addEvent.guid = 1; addEvent.events = {}; //简单缓存系统 function addEvent(el,type, $$guid = addEvent.guid++; } if(!el.$$guid){ el. $$guid = addEvent.guid++; } if(!addEvent.events[el.$$guid]){ addEvent.events[el. fns){ fns = addEvent.events[el. $$guid in addEvent.events[el.$$guid][type]){ delete addEvent.events[el.$$guid][type][fn.

34380
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    100个最常问的JavaScript面试问答-第2部分(共10部分)

    function addEvent(el, event, callback, isCapture = false) { if (!el || !event || ! (child, 'click', function (e) { console.log('child'); }); addEvent(parent, 'click', function (e) { console.log('parent'); }); addEvent(grandparent, 'click', function (e) ('document'); }); addEvent('html', 'click', function (e) { console.log('html'); }) (child, 'click', function (e) { console.log('child'); }, true); addEvent(parent, 'click

    12920

    js通过闭包实现多个相同事件只需绑定一次

    // 闭包的使用场景:一个方法要被多次调用,并且共享一个数据 // 防抖和节流 // 自执行函数省去单独调用一次 let addEvent = (function() { of obj[eventName]){ fn(); } }) } } })() addEvent ('mouseover',function () { console.log("鼠标进入") }) addEvent('click',function () { console.log( "click1") }) addEvent('click',function () { console.log("click2") }) addEvent('click',function () { console.log("click3") }) addEvent('click',function () { console.log("click4") })

    28420

    JavaScript经典面试题

    在冒泡阶段,事件冒泡,或者事件发生在它的父代、祖父母, 祖父母的父代, 直到到达window为止 function addEvent(el, event, callback, isCapture = true (child, 'click', function (e) { console.log('child'); }); addEvent(parent, 'click', function (e) { console.log('parent'); }); addEvent(grandparent, 'click', function (e) { console.log('grandparent'); }); addEvent(document, 'click', function (e) { console.log ('document'); }); addEvent('html', 'click', function (e) { console.log('html'); }

    7700

    惰性模式

    const event = {}; event.addEvent = function(dom, type, fn) { if(dom.addEventListener) { const event = {}; event.addEvent = function(dom, type, fn) { if(dom.addEventListener) { event.addEvent = function(dom, type, fn) { dom.addEventListener(type, fn, false); ("on" + type, fn); } }else{ event.addEvent = function(dom, type, fn) { dom["on" + type] = fn; } } event.addEvent(dom, type, fn); }; 每日一题 https://github.com/

    24820

    JavaScript设计模式--桥梁模式--引入

    1.使用情况 (1)事件的监控 #1,利用页面的button来选择宠物的例子(思路) button.addEvent(element,"click",getPetByBame); function id='+id,function(pet){ consols.log("request pet"+pet.resopnseText) }) } #2,addEvent 函数 /*obj:需要增加事件的对象 * type:事件名称 * fn:执行事件的函数 * */ function addEvent(obj,type,fn){//addEvent:为某个文档节点增加事件的方法 id='+id,function(pet){ callBack(pet) }) #2,桥梁 //定义一个桥梁叫抽象和实现相互联系在一起 addEvent(

    27920

    JavaScript 事件绑定

    function addEvent(obj, type, fn) {//取代传统事件处理函数 var saved = null;//保存每次触发的事件处理函数 if (typeof obj['on' + (这里就不做了) addEvent(window, 'load', init);//注册第一次 addEvent(window, 'load', init);//注册第二次,应该忽略 function  ('box'); addEvent(box, 'click', toBlue); }); function toRed() { this.className = 'red'; addEvent(this addEvent(window, 'load', function () { var text = document.getElementById('text'); addEvent(text, 'contextmenu addEvent(document, 'mousewheel', function (evt) {//非火狐 alert(getWD(evt)); }); addEvent(document, 'DOMMouseScroll

    48960

    JavaScript专题之惰性函数

    }; return foo(); }; 更多应用 DOM 事件添加中,为了兼容现代浏览器和 IE 浏览器,我们需要对浏览器环境进行一次判断: // 简化写法function addEvent } else if(window.attachEvent){ el.attachEvent('on' + type, fn); } } 问题在于我们每当使用一次 addEvent 利用惰性函数,我们可以这样做: function addEvent (type, el, fn) { if (window.addEventListener) { addEvent el.addEventListener(type, fn, false); } } else if(window.attachEvent){ addEvent (type, el, fn) { el.attachEvent('on' + type, fn); } } } 当然我们也可以使用闭包的形式: var addEvent

    22820

    JS自定义事件原生

    _listener = {}; }; EventTarget.prototype = { constructor: this, addEvent: function(type, fn) for (type in obj) { if ( type && typeof obj[type] === "function") { this.addEvent el: document; }; $.init.prototype = { constructor: this, addEvent: function(type, fn, capture ; }; // 测试用的张小姐图片 var elImage = document.getElementById("image"); $(elImage) .addEvent("click ", fnClick) .addEvent("alert", funAlert1) .addEvent("alert", funAlert2); // 删除自定义事件按钮 var elButton

    94520

    浅谈JavaScript的事件(事件类型)

    1 EventUtil.addEvent(window,"load",function(){ 2 console.log(document.getElementById( 1 var img=document.getElementById("imgtest"); 2 EventUtil.addEvent(img,"load",function(event 1 EventUtil.addEvent(window,"resize",function(event){ 2 alert("resize"); 3 1 var img=document.getElementById("imgtest"); 2 EventUtil.addEvent(img,"mousedown",function 1 EventUtil.addEvent(document.getElementById("inputtext"),"keyup",function(event){ 2 event

    43450

    文本框根据输入内容自适应高度

    window.opera.toString().indexOf('Opera'), addEvent = function (type, callback) { elem.currHeight = parseInt(style.height); }; }; addEvent ('propertychange', change); addEvent('input', change); addEvent('focus', change);

    42240

    JavaScript设计模式与开发实践 - 高阶函数的应用

    比如我们需要一个在各个浏览器中能够通用的事件绑定函数addEvent,常见的写法如下: 方案一: var addEvent = function(elem, type, handler) { if addEvent = function(elem, type, handler) { elem.addEventListener(type, handler, false) ) { elem.attachEvent('on' + type, handler); } } addEvent( elem, type, handler); }; 此时addEvent依然被声明为一个普通函数,在函数里依然有一些分支判断。 但是在第一次进入条件分支之后,在函数内部会重写这个函数,重写之后的函数就是我们期望的addEvent函数,在下一次进入addEvent函数的时候,addEvent函数里不再存在条件分支语句。

    49130

    一文看懂 JavaScript 函数柯里化 - 什么是柯里化

    const addEvent = function(element, type, listener, useCapture) { if(window.addEventListener) { (div, 'click', (e) => {console.log('点击了 div');}, true); addEvent(p, 'click', (e) => {console.log('点击了 addEvent 函数,都会进行 if...else... // 使用立即执行函数,当我们把这个函数放在文件的头部,就可以先进行执行判断 const addEvent = (function() { if(window.addEventListener) (div, 'click', (e) => {console.log('点击了 div');}, true); addEvent(p, 'click', (e) => {console.log('点击了

    5.4K71

    原生js编写的安全色拾色器

    =typeof document.body.scrollTop&&(a=[document.body.scrollLeft,document.body.scrollTop]);return a},addEvent text"===this.offset.getAttribute("type");0==h.cache.length&&c.createColorData();this.createPacker().addEvent =function(){c.addEvent(i.elem[4],"mouseover",function(a){i.eventContrl(a)},! 1);c.addEvent(this.elem[4],"click",function(a){i.eventContrl(a)},! 1);c.addEvent(this.elem[3],"click",function(){i.kill()},!

    64750

    鼠标滚轮事件介绍

    1 addEvent = function(type,callback,useCapture){ 2 if(window.addEventListener){ 3 this.addEventListener document.createEvent('MouseScrollEvents'); 13 type = 'DOMMouseScroll'; 14 }catch(e){} 15 el.addEvent = addEvent; 16 el.addEvent(type,function(e){ 17 e = e || window.event; 18 var wheelDelta

    65260

    window.scroll 方法只能存在一次该如何解决?

    function addEvent(type, toDo) { if (window.attachEvent) { window.attachEvent('on' + type, toDo.call(window) }) } else { window.addEventListener(type, toDo, false) } } addEvent ('scroll', function(){ console.log('第一次调用window.scroll') } addEvent('scroll', function(){ console.log

    12010

    HTML5的Histroy API

    <script> 1:  2:  3: var addEvent [title], title, event.target.href); 84: reportData(data[title]); 85: } 86: }); 87: 88: addEvent (event.state || { url: "unknown", name: "undefined", location: "undefined" }); 92: }); 93: 94: addEvent (window, 'hashchange', function (event) { 95: reportEvent(event); 96: }); 97: 98: addEvent(window , 'pageshow', function (event) { 99: reportEvent(event); 100: }); 101: 102: addEvent(window, 'pagehide

    39430

    扫码关注腾讯云开发者

    领取腾讯云代金券