1、eleObj.addEventListener(eventName,handle,useCapture);

  eleObj:DOM元素;

  eventName:事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。

  handle:事件句柄函数,即用来处理事件的函数;

  useCapture:Boolean类型,是否使用捕获,一般用false;

2、eleObj.attachEvent(eventName,handle);

  eleObj:DOM元素;

  eventName:事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等;

  handle:事件句柄函数,即用来处理事件的函数;

注意:addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。

javascript绑定事件addEventListener与attachEvent的更多相关文章

  1. JavaScript绑定事件的方法[3种]

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HT ...

  2. day51—JavaScript绑定事件

    转换学开发,代码100天——2018-05-06 今天学习JavaScript的绑定事件.因为浏览器的原因绑定事件需要考虑兼容性问题. attachEvent     IE浏览器 ,ie9以上事件执行 ...

  3. javascript绑定事件

    本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type ...

  4. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  5. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...

  6. 监听事件绑定(addEventListener、attachEvent)和移除(removeEventListener、detachEvent)

    /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ funct ...

  7. ie和火狐事件addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...

  8. 绑定事件 addEventListener

    addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可以向一个元素添加多个事件句柄. 你可以向 ...

  9. javaScript绑定事件委托 demo

    事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...

随机推荐

  1. Give $20/month and provide 480 hours of free education

    Hi , Hope all is well. Summer is right around the corner, and the Khan Academy team is excited to sp ...

  2. DATASNAP远程方法返回TSTREAM正解

    DATASNAP远程方法返回TSTREAM正解 DATASNAP远程方法返回TSTREAM,如果数据大小超过32K是会报错的.许多DELPHIER栽在这个上头,甚至开始怀疑TSTREAM返回数据的可行 ...

  3. mysql in语句在java中的使用

    做权限的时候,通过role角色中的roleid,在auth权限中查找角色对应的权限. sql语句: SELECT authName from auth where authId in (1,2,3,4 ...

  4. Visual Studio for mac从入门到放弃1

    MAC  第一步:从微软官网下载:https://www.visualstudio.com/vs/visual-studio-mac/ 第二步:安装软件过程出现 It was not possible ...

  5. elasticsearch不能使用root启动问题解决

    问题: es安装好之后,使用root启动会报错:can not run elasticsearch as root [root@iZbp1bb2egi7w0ueys548pZ bin]# ./elas ...

  6. airport 抓包

    链接airport命令: ln -s /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources ...

  7. ADO.NET操作SQL Server:数据库操作类(已封装)

    1.增.删.改通用方法 /// <summary> /// 增.删.改通用方法 /// </summary> /// <param name="commandT ...

  8. swagger 在本地正常调试 发布后出现500 : {"Message":"出现错误。"}

    点击项目属性 勾上xml 解决

  9. Cookie客户端缓存.Session.Application

    Cookie客户端缓存. 1.引言 随着浏览器的处理能力不断增强,越来越多的网站开始考虑将数据存储在「客户端」,那么久不得不谈本地存储了. 本地存储的好处: 一是避免取回数据前页面一片空白,如果不需要 ...

  10. ADV三星

    #include <iostream> using namespace std; #define SIZE 12 int data[SIZE]; int data1[SIZE]; int ...