展开

关键词

从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

addAnyEventListener(my$(btn), click, function() { console.log(事件3); }); my(dv).onclick == my$(dv) 3、绑定事件的区别方名不同 ;参数个数不同,addEventListener有三个参数,attachEvent有两个参数;addEventListener中事件的类型没有 on,attachEvent中事件的类型有on;chrome ----二、为元素解绑事件1、三种方式1.1、方式一如果使 元素.onclick = function(){}; 的方式绑定对象的话,解绑的方式为 元素.onclick = null;1.2、方式二如果使 ,因为需要同一个事件处理函数,而两个匿名函数是两个不同的函数,所以需要使命名函数。 1.3、方式三如果使 元素.attachEvent(onclick, f1); 的方式绑定对象的话,解绑方式为 元素.detachEvent(onclick, f1);2、解绑事件兼容代码 为任意元素绑定任意事件

18130

JS示例35-事件绑定方式二

document.getElementById(btn2); 绑定方式一 btn1.onclick = function() { alert(绑定方式一~onclick) } 绑定方式二 if(btn2.attachEvent ) { btn2.attachEvent(onclick, function() { alert(绑定方式二~attachEvent); }) } else { btn2.addEventListener (click, function() { alert(绑定方式二~addEventListener); }, false) } } 封装 无标题文档 封装成通 function myAddEvent

16620
  • 广告
    关闭

    云产品限时秒杀

    云服务器1核2G首年38元,还有多款热门云产品满足您的上云需求

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

    Javascript 的addEventListener()及attachEvent()区别分析

    useCapture :是否使捕捉,一般 false 。  attachEvent 按钮onclick IE中使 addEventListener方 按钮click fox中使 两者使的原理:可对执行的优先级不一样,下面实例讲解如下: attachEvent,为某一事件附加其它的处理事件。 (不支持Mozilla系列) addEventListener方 于 Mozilla系列 举例: document.getElementById(btn).onclick = method1; document.getElementById = “undefined” 程序代码可以判断使者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使attachEvent.参考:http:www.jb51.netarticle18220

    52460

    attachEvent和addEventListener区别

    function(){ 默认皆为冒泡 handler.call(element); }); }else{ element = handler; DOM0级 } };addEventListener的使方式 ,false为冒泡,true为捕获attachEvent使方式:主要是IE中使target.attachEvent(type, listener);type是事件类型,注意是这种形式:”onclicklistener 监听的函数默认使冒泡的方式相应的,解除事件的方:removeEventListener(event,function,useCapture);detachEvent(event,function); ,method2);btn1Obj.attachEvent(onclick,method3); 执行顺序为 method3->method2->method1 如果是Mozilla系列,并不支持该方, 需要到addEventListener var btn1Obj = document.getElementByIdx(btn1);element.addEventListener(type,listener

    27220

    面试官:考你几个简单的事件问题吧

    function handleClick(){ console.log(按钮被点击了); } 给DOM元素添加onclick方,如下 var btn = document.getElementById (btn); btn.onclick = function (){ console.log(按钮被点击了); }; DOM元素使addEventListener(IE使attachEvent)来添加方 addEventListener可以添加多个方,而onclick只能添加一个。 addEventListener与attachEvent有什么不同?addEventListener适于正常的W3C浏览器,而attachEvent于IE浏览器(注:Edge都不支持这玩意)。 attachEvent第一个参数,需要带”on”。比如添加click事件那么attachEvent的第一个参数是”onclick”。

    16530

    前端学习(50)~事件的绑定和事件对象

    在IE8中可以使attachEvent来绑定事件(详见下一小段)。 DOM2的写attachEvent(IE8及以下版本浏览器) element.attachEvent(onclick, function () { });参数解释: 参数1:事件名的字符串(注意,有 attachEvent()中的this,是window 兼容性写上面的内容里,需要强调的是: addEventListener()中的this,是绑定事件的对象。 attachEvent()中的this,是window。 既然这两个写的this不同,那么,有没有一种兼容性的写可以确保这两种绑定方式的this是相同的呢?我们可以封装一下。 * * addEventListener()中的this,是绑定事件的对象 * attachEvent()中的this,是window * 需要统一两个方this * * * 参数: * element

    19420

    的web方 web API(一)

    本文主要讲解web API常的方,主要内容如下:1:绑定事件的几种方式2:解绑事件的几种方式3:创建元素的几种方式4:获取节点的几种方式一、为元素绑定事件三种方式:1 对象.on+事件类型=事件处理函数 addEventListener(事件类型,事件处理函数,false);      例子: my$(btn).addEventListener(click,function(){},false);3 对象.attachEvent (on+事件类型,事件处理函数); 例子: my$(btn).attachEvent(onclick,function(){});为元素解绑事件三种方式1 对象.on事件类型=null(同一个元素,注册了多个相同的事件 的区别   addEventListener 谷歌和火狐值,IE11支持,IE8不支持        三个参数,第一个参数是没有on的        这里的this是当前的对象    attachEvent IE8支持,谷歌和火狐不支持,IE11不支持        两个参数,第一个参数有on        这里的this是window对象最后:什么方式绑定事件,就对应的方式解绑事件二、百度搜索大项目

    30150

    js事件冒泡

    移除事件监听如果要移除 addEventListener() 添加的事件监听,就要使removeEventListener(),语是:removeEventListener(event, function 兼容性IE 8及更早的版本,和Opera 7.0及更早的版本,不支持 addEventListener() 和 removeEventListener() 方,他们使的是一下方代替:添加事件:attachEvent (event, function)移除事件:detachEvent(event, function) 可以以下方解决兼容性问题:if (div1.addEventListener) { div1.addEventListener (click, function () { console.log(支持) });} else if (div1.attachEvent) { div1.attachEvent(onclick, function ()方 } else { window.event.cancelBubble = true; 否则,我们需要使IE的方式来取消事件冒泡 }}?

    20542

    Web开发的基本功

    , false);btn.removeEventListener(click,handler,false);相较DOM0级方, DOM2级方的优势为:可以添加多个事件先后执行。 IE事件处理程序:IE(以及Opera)实现了attachEvent()和detachEvent()方进行事件绑定与解绑,绑定事件会被添加到冒泡阶段。 output true};btn.attachEvent(onclick,handler); bindbtn.detachEvent(onclick,handler); unbind需要注意的几点:attachEvent attachEvent的作域为全局作域,this == windows, 而DOM0中,this为被绑定元素。attachEvent可以绑定多个事件,与dom2类似。 stopImmediatePropagation(): 这是dom3级事件中新增的方,在取消进一步冒泡与捕获的同时,阻止任何事件处理程序被调

    445130

    JQuery分析及实现part5之事件模块功能及实现

    remove 方功能:将筛选出来的所有 dom 元素删除掉实现思路遍历 this 上的所有 dom 元素;获取当前 dom 元素的父节点,调 removeChild 方删除自己;循环结束,返回 this ,提前返回事件绑定方如果浏览器符合 W3C 标准,使 addEventListener 来绑定事件否则就使 attachEvent 来绑定事件提前返回var addEvent = function , useCapture) { elem.addEventListener(type, callback, useCapture || false); }; } else { 否则就使IE标准的 attachEvent ,提前返回事件移除方如果浏览器符合 W3C 标准,使 removeEventListener 来移除事件处理函数否则就使 detachEvent 来移除事件处理函数提前返回var removeEvent : 给 itcast 对象上的所有的 dom 元素绑定单击事件处理函数的语: itcast对象.click(callback);实现思路遍历 this 上的所有 dom 元素调 addEventListener

    23650

    JS事件流模型

    DOM2级模型DOM2事件模型是W3C制定的标准模型,支持捕获型事件和冒泡型事件,调事件的处理阶段依次为捕获、目标、冒泡。 实例当点击id为i3的时,浏览器会依次弹出0 1 3 2,addEventListener方的第三个参数为声明绑定的事件为捕获型还是冒泡型,默认为false,也就是冒泡型。 注意绑定监听事件使的区别在DOM0中直接绑定函数执行时,后定义的函数会覆盖前边绑定的函数,下面这个例子只执行alert(1)而不执行alert(0)。 click()是一个对象事件,点击即触发onclick()绑定的方,onclick()是对象的属性,将其绑定函数后即为click()事件触发后执行的方。 (i1).attachEvent(onclick,function(e){ alert(1); }) 执行

    22830

    事件

    给元素添加事件处理程序方一:HTML内联方式元素支持的每个事件都可以使一个相应事件处理程序同名的HTML属性指定。 event对象包含与创建它的特定事件有关的属性和方,触发事件的类型不同,可的属性和方也不同,但是所有事件都会包含? 二者区别:使Dom2级方添加事件处理程序的主要好处是可以添加多个事件处理程序,而Dom0级为一个事件添加多个事件处理程序时,后面的程序会覆盖前面的。 2: attachEvent与addEventListener的区别? (onclick,onload)事件处理程序的作域不相同,addEventListener的作域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是

    35530

    「面试常问」系统理解浏览器之事件机制

    btn.addEventListener(click, handler)btn.removeEventListener(click, handler) IE 事件处理函数由于 addEventListener 无兼容 IE8 及更早版本,所以此时就可以使 attachEvent 添加事件处理程序和 detachEvent 移除事件处理程序。 ,但是触发顺序是后定义的先触发;通过 detachEvent 移除事件处理程序的时候,处理函数必须是和注册的同一个,这点和 addEventListener 保持一致;attachEvent 和 detachEvent ,比如 keydown、keypress;合成事件(CompositionEvent):在使某种 IME(Input Method Editor,输入编辑器)输入字符时触发,比如 compositionstart 比如在 Vue 中经常会将事件绑定到每个列表项中: {{item}} 其实更好的做是利事件委托,将事件绑定到 ul 上: {{item}} handleClick(event) { let target

    9520

    浅谈JavaScript的事件(事件处理程序)

    这个特性是通过JavaScript来实现的,不能在其中使未经转义的HTML语字符,例如和号(&)、双引号()、单引号()、小于号()。   DOM2级事件处理程序定义了两个方于处理指定和删除事件处理程序的操作:addEventListener和removeEventListener。 方移除事件处理程序,但是并没有起作。 对于IE8以及IE8以下浏览器来说,它们并没有上述的两个方,但是提供了attachEvent和detachEvent两个方。这两个只需要传递两个参数:第一参数事件程序名称,第二个事件处理程序函数。 在attachEvent的事件处理程序函数中this是指向window的,我们无获取元素对象。

    34650

    javascript事件详解

    (),obj.attachEvent()三个参数分别表示,(事件,绑定函数,事件流),注意:1.如果必须得删除事件,这种写,不能匿名函数,否则删除函数的时候,不方便。 2.attachEvent的事件名称是onclick,而addEventListener的事件名称是click,且IE中使attachEvent()与使DOM0级方的的主要区别在于事件处理程序的作域 ,在使dom0级情况下,事件处理程序在其所属元素的作域内运行,在使attachEvent()方的情况下,事件处理程序在全局作域下运行,其中的this等于window。 ()方,比如如下,我点击一个连接,按道理是打开一个新连接窗口,但是我使preventDefault()方可以阻止默认行为,阻止打开新窗口;如下代码:HTML:打开新连接JS如下:var alink ()阻止冒泡事件的话,那么在页面中会先弹出1,然后弹出2,如果使stopPropagation()方的话,只会在页面上弹出1,就不会冒泡到body上面去;IE下停止冒泡的话,我们可以使cancelBubble

    44050

    WebComponent魔堂:深究Custom Element 之 从过去看现在

    事件处理函数体,如headingchangehandler() FOR,事件发生的宿主(element,document,window,默认是element) PUBLIC:METHOD, 定义元素公开方   属性 NAME,html文件中使的方名 INTERNALNAME,htc文件内使的方名,默认与NAME一致。 在JScript中实现具体的方体 PUBLIC:DEFAULTS,设置HTC默认配置 HTC生命周期事件 ondocumentready, 添加到DOM tree时触发,在oncontentready element, 所附加到的元素实例 runtimeStyle,所附加到的元素实例的style属性 document,html的文档对象 HTC全局函数 createEventObject(),创建事件对象 attachEvent (evtName, handler), 订阅事件.注意:一般不建议使attachEvent来订阅事件,采来订阅事件,它会自动帮我们执行detach操作,避免内存泄露. detachEvent(evtName

    410100

    事件高级

    该方接收三个参数:●type:事件类型字符串,比如click、 mouseover,注意这里不要带on●listener: 事件处理函数,事件发生时,会调该监听函数useCapture:可选参数,是一个布尔值 该访接收两个参数:●eeventNameWithOn:事件类型字符串,比如onclick、onmouseover, 这里要带on●callback: 事件处理函数,当目标触发事件时回调函数被调注意: IE8 及早期版本支持传统注册事件方监听注册事件ie9 attachEvent var btns = document.querySelectorAll(button); 1. 2. onclick和attachEvent 只能得到冒泡阶段。 ●标准写:利事件对象里面的stopPropagation ()方e.stopPropagation()●非标准写: IE 6-8利事件对象cancelBubble属性e. cancelBubble

    12641

    Atom插件开发-使自己的Chevereto图床API项目简介功能分析代码实现项目地址

    最近一直在 Atom 写写markdown,但无奈上传图片真实太麻烦了。找了好几个插件都是要到 七牛 的账号,由于之前被七牛坑过一次,就没再想他的打算了。 一度放弃后使在线的markdown,例如简书 掘金 这些,可感觉起来还是不太舒服,最终还是折腾起atom插件了。 image根据API文档 我们 Postman 测一下API 看看回调?image嗯 回调的内容很多,我们就挑一个display_url这个字段吧,够就行。 sure always available type: string default: a7bb2b091e3f2961e59551a8cf6e05b2 activate: (state) -> @attachEvent () attachEvent: -> workspaceElement = atom.views.getView(atom.workspace) workspaceElement.addEventListener

    51520

    jQuery 事件绑定 和 JavaScript 原生事件绑定

    该方给 API 带来很多便利,我们推荐使该方,它简化了 jQuery 代码库。注意:使 on() 方添加的事件处理程序适于当前及未来的元素(比如由脚本创建的新元素)。 提示:如需移除事件处理程序,请使 off() 方。提示:如需添加只运行一次的事件然后移除,请使 one() 方。event:必需。规定要从被选元素移除的一个或多个事件或命名空间。 3.绑定事件监听函数:绑定事件的另一种方 addEventListener() 或 attachEvent() 来绑定事件监听函数。一. 在DOM元素中直接绑定1. 原生函数1 2. attachEvent()函数语:(兼容IE)elementObject.attachEvent(eventName,handle); 参数说明 elementObject DOM对象(即DOM元素) ,它使 attachEvent() 来绑定事件监听函数。

    1.1K20

    JavaScript事件探秘

    3、DOM2级事件处理程序DOM2级事件定义了两个方于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。 4、IE事件处理程序在IE中也提供了类似的两个方attachEvent()添加事件detachEvent()删除事件这两个方接收相同的两个参数:事件处理程序名称与事件处理函数 btn3.attachEvent 答案是,能力判断,即你支持attachEvent()的能力就给你这个,你有别的能力你就你其他的能力。 第三个方是 preventDefault(),于取消事件的默认行为。在传入 event 对象后,这个方会检查是否存在preventDefault()方,如果存在则调该方。 首先尝试使 DOM 方阻止事件流,否则就使 cancelBubble 属性。

    20620

    扫码关注云+社区

    领取腾讯云代金券