attachEvent,addEventListener事件绑定

兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数). 1.绑定方法: //IE attachEvent(事件名, 函数) oBtn.attachEvent('onclick', aaa); oBtn.attachEvent('onclick', bbb); //FF addEventListener(事件名, 函数, 是否捕获 false) oBtn.addEventListener('click', aaa, false); oBtn.addEventListener('click'…

javascript之事件绑定

曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处本文链接:javascript之事件绑定 1.原始写法 <div onclick="alert('you clicked me just now);'">click me</div> 在刚开始学习前端的时候,我们不免这么将事件绑定写在html中,后来我们想将html和js脚本进行分离便这么写 <div id="test">clic…

兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) { // elem:DOM节点 type:事件类型 handler:事件处理函数 // 最后一个…

监听事件绑定（addEventListener、attachEvent）和移除（removeEventListener、detachEvent）

/** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ function addEvent(target, type, func) { if (target.addEventListener) //非ie 和ie9 target.addEventListener(type, func, false); else if (target.attachEvent) //…

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的this不是指向执行当前事件的dom而是window切记,感觉这一点IE做的太奇怪了!…

js -- 绑定的click addEventListener 事件只触发一次

var btn = document.getElementById('btn'); // 添加事件绑定 btn.addEventListener('click', btnClick, false); // 按钮点击方法 function btnClick() { console.log('hello'); // 删除事件绑定 btn.removeEventListener('click', btnClick, false); }…

js addEventListener事件多次绑定问题

如果为了避免 js addEventListener事件多次绑定问题,可以使用.onclick直接绑定,后一次click绑定会覆盖调前一次.…

事件绑定addEventListener

通过addEventListener监听函数实现的dom事件绑定 addEventListener可以为当前dom添加一个事件(这个事件可以是个已有的事件),这就无法避免我们在写代码的时候重复去绑定同一个事件,这时候该想到removeEventListener来取消事件绑定,但是有时候这个办法并不是那么好使,然后的内存释放就更加的不好做到.到头来还是运用ele.onclick=fn,ele.onclick=null,这种办法效果好. 在今天的项目中就遇到一个事件绑定的内存没有被释放掉最后造成了b…

jQuery 2.0.3 源码分析事件绑定 - bind/live/delegate/on

事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新总结一下 jQuery对事件的绑定分别有几个API http://www.css88.com/jqapi-1.9/…

js事件绑定及深入

学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一传统事件绑定的问题传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme…

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的通过以上这种方式进行事件函数的绑定有个缺点就是…

JavaScript中绑定事件监听函数的通用方法addEvent() 和事件绑定之bindEvent()与 unBindEvent()函数

下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safari.IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['o…

Javascript 事件对象（四）一个事件绑定多个不同的函数

给一个对象绑定多个事件处理函数: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> //给一个对象绑定一个事件处理函数的第一种形式 //obj.onclick = fn; func…

JS 中的事件绑定、事件监听、事件委托

事件绑定要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件我们可以在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeyd…

js 事件绑定

事件绑定的方式 1. DOM 元素行内绑定 <div onclick="alert(1)"></div> 2. js on+eventType document.onclick =function(){alert(2)} 3. addEventListener document.getElementById("myBtn").addEventListener("click", myFunction); functi…

dojo事件驱动编程之事件绑定

什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Programming,简称EDP)的模式. 何谓事件?通俗地说,它是已经发生的某种令人关注的事情.在软件中,它一般表现为一个程序的某些信息状态上的变化.基于事件驱动的系统一般提供两类的内建事件(built-in event):一类是底层事件(low-level event)或称原生事件(native ev…

js事件绑定细节说明

javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触javascript的时候,老师都会这样教导我们怎么触发事件,在页面某个DOM节点上面添加所要触发的事件,比如:onclick,onmousedown,onmouseup,onfocus,onchange等等...看代码 <!DOCTYPE html> <html> <head>…

JQuery实现click事件绑定与触发方法分析

原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为html处理事件的原始方法,使得html和js过分耦合, 即表现层代码和行为层代码耦合: <html> <head> <script src="./jquery.js"></script> </head> <body>…

js事件绑定

事件绑定,常见的是odiv.onclick=function(){..........}; 这种方式绑定事件太单一,如果绑定多个,那么最后一个事件会覆盖掉之前的,也就是说只执行最后一次绑定的事件,这里要说的是addEventListener方法,和IE下的attachEvent方法: html代码如下: <html> <head> </head> <style> #box{ height:400px; width:400px; background: re…

JavaScript事件---事件绑定和深入

发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. var box = document…

JavaScript的事件绑定及深入

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. var box = document.getElementById('box'); //获取元素 box.onclick = function () { //元素点击触发事件 alert(…

JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->…

JS 事件绑定的几种方式小笔记

第一种 var test=document.getElementById('add'); add.onclick=function(){ alert('1'); } 直接在对象上注册事件缺点:如果我想给add再加onchange 就会覆盖掉前面的onclick 优点:简单方便明了第二种 var test=document.getElementById('add'); add.addEventListener('click',eve,false); function eve(){ alert(…

javascript - 工作笔记（事件绑定）

背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAAA();"></div> 2,在javascript中对标签对象绑定数据: <div id="test"></div> var item = document.getElementById("test"); item.…

JS基础——事件绑定

上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理VB VS JS Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click MsgBox("helo!") MsgBox(sender.width) '弹出触发这个事件对象的宽度 Msg…

第一百二十一节，JavaScript事件绑定及深入

JavaScript事件绑定及深入学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. window.onload = function…

JS Event事件流（冒泡机制、捕获机制、事件绑定）

1.事件流事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到window对象,只有IE8及下不这样): 再多说一句,现在的浏览器默认是采用的是事件…

javaScript事件绑定

事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 1.用例子的形式来给大家解释一下,如何在DOM元素中直接绑定. 单击一个按钮,弹出警告框的代码 <inpu…

移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ie6到10) 2.事件名称有on 3.事件函数执行的顺序:标准ie->正序非标准ie->倒序 4.this指向window 标准:obj.addEventListener(事件名称,事件函数,是否捕获); 1.有捕获 2.事件名称没有on 3.事件执行的顺序是正序 4.this触发该事件的对象…

JavaScript(第二十五天)【事件绑定及深入】

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. var box = document.getElementById('box'); //获取元素 box.onclick = function () { //元素点击触发事件 alert(…

【attachEvent,addEventListener事件绑定】的更多相关文章