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. [label][javascript-Unit Test][JSLint]A Guide To JSLint Messages

    原文链接: http://www.jameswiseman.com/blog/2011/03/26/coding-convention-an-style-guide/ http://www.james ...

  2. 转载:爬虫技术浅析(Python)

    http://drops.wooyun.org/tips/3915 0x00 前言 网络爬虫(Web crawler),是一种“自动化浏览网络”的程序,或者说是一种网络机器人.它们被广泛用于互联网搜索 ...

  3. 操作XDocument讲解

    1.首先建立好XML .可以通选自定义EXCEL导出XML格式的数据:(如图) 2 读取XML 文件 具体的详细讲解 可以查看 改网址 :https://blog.csdn.net/dyllove98 ...

  4. sharepoint database 操作

    select *from [dbo].[AllLists] where tp_Title='Pages' and tp_WebId='90511126-E1FE-4E4C-8DDF-74DFC89E8 ...

  5. golang plugin的依赖问题

    golang plugin的依赖问题 此文中涉及的plugin运行环境为mac 10.14,go版本为1.11 主要是想讨论一下插件依赖的第三方库的问题. 例子是在https://github.com ...

  6. 【题解】 洛谷P2340 奶牛会展

    传送门 重新开始打代码Day1 第一眼看感觉不对啊,这道题目好像空间开不下,是不是不能dp... 后来想到了一个思路,他要求的是\(dp_{i,j,k}=j+k\),然后这样子不是很奇怪吗? 直接一维 ...

  7. linux命令之用户管理及用户信息查询命令(下)

    1.visudo:编辑sudoers文件 该命令专门用来编辑/etc/sudoers文件,同时提供语法检查等功能. 示例: 1)执行visudo对普通用户授权 [root@boxiaoyuan ~]# ...

  8. ping使用

    while read line do ip=`echo $line | awk '{print $2}' ` -i $ip ];then echo $line | tee -a b fi

  9. 洛谷P5279 [ZJOI2019]麻将(乱搞+概率期望)

    题面 传送门 题解 看着题解里一堆巨巨熟练地用着专业用语本萌新表示啥都看不懂啊--顺便\(orz\)余奶奶 我们先考虑给你一堆牌,如何判断能否胡牌 我们按花色大小排序,设\(dp_{0/1,i,j,k ...

  10. 为什么在AI领域网络安全更重要?先睹为快~

    AI迎来了改变世界的新机遇,同时也迎来了新的网络安全问题,只要是联网的系统就会有漏洞爆出~ 随着大数据的应用,人工智能逐渐走入千家万户并显示出巨大的市场空间,从机器人客服.自动驾驶汽车到无人机等,全都 ...