首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在JavaScript中使用attachEvent()/ addEventListener()添加的访问事件

在JavaScript中,attachEvent()addEventListener()都可以用于添加事件监听器。attachEvent()是IE浏览器特有的方法,而addEventListener()是其他现代浏览器支持的方法。

在JavaScript中,attachEvent()的语法如下:

代码语言:javascript
复制
element.attachEvent(event, function);

其中,event是事件类型,例如onclickonmouseover等;function是事件触发时执行的函数。

addEventListener()的语法如下:

代码语言:javascript
复制
element.addEventListener(event, function, useCapture);

其中,event是事件类型,例如clickmouseover等;function是事件触发时执行的函数;useCapture是一个布尔值,表示是否在捕获阶段触发事件,默认为false,表示在冒泡阶段触发事件。

在实际使用中,为了兼容不同的浏览器,通常会使用以下方式添加事件监听器:

代码语言:javascript
复制
if (element.attachEvent) {
  element.attachEvent("on" + event, function);
} else if (element.addEventListener) {
  element.addEventListener(event, function, false);
}

这样可以确保在不同的浏览器中都能正确添加事件监听器。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端JavaScript动态事件添加

前言 在前端开发,交互性是至关重要。动态事件添加是一种JavaScript实现交互重要技术。本文将介绍动态事件添加概念和优势,并详细介绍两种常用动态事件添加方法。...减少重复代码: 可以通过动态事件添加方式,避免HTML为每个元素都编写相同事件处理代码。...可以通过以下步骤动态添加事件: 1.获取需要添加事件DOM元素。 2.使用addEventListener()方法,指定要添加事件类型和对应事件处理函数。...3.父元素事件处理函数,通过判断事件目标元素,确定要执行操作。 总结 动态事件添加是前端开发实现交互性重要手段。通过动态事件添加,我们可以实现灵活、可扩展交互效果,减少重复代码编写。...本文介绍了两种常用动态事件添加方法:使用addEventListener()方法和事件委托。了解和掌握这些方法,可以为前端开发交互效果提供更多选择和实现方式。

29720

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

HTML事件处理程序 元素支持事件,都可以使用与相应事件处理程序同名HTML特性来指定。这个特性值能支持一定JavaScript代码。...这个函数是单独定义script脚本,当然也可以定义一个外部文件事件处理程序代码,可以访问全局方法。上面的代码,同样可以传递event参数以及this参数。...通过事件处理程序能够访问到元素,this和元素处在同一个作用域链。   通过DOM2级可以通过添加多个事件处理程序。事件处理程序会按照添加顺序依次触发。...("onclick",callback);   上面的代码通过attachEvent添加事件处理程序,但是attachEventaddEventListener不一样。...attachEvent事件处理程序函数this是指向window,我们无法获取元素对象。

1.5K50
  • 事件

    给元素添加事件处理程序 方法一:HTML内联方式 元素支持每个事件都可以使用一个相应事件处理程序同名HTML属性指定。...button时候,由于事件冒泡,bodyclick事件也会触发,但是调用这句后,事件会停止传播 IE事件对象 访问IEevent对象有几种不同方式,取决于指定事件处理程序方法。...attachEvent添加,那么就会有一个event对象被传入事件处理程序 var handler = function (e) { alert(e.type); } var btnClick...DOM2级事件监听使用方式上有什么区别?...参数个数不相同,这个最直观,addEventListener有三个参数,attachEvent只有两个,attachEvent添加事件处理程序只能发生在冒泡阶段,addEventListener第三个参数可以决定添加事件处理程序是捕获阶段还是冒泡阶段处理

    1.4K30

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

    事件处理是JavaScript中非常重要概念,我们使用客户端软件往往都是事件驱动,所以面试官特别喜欢问一些事件相关知识,这里记录几个常见问题,供大家学习。...添加事件有几种方式(以click事件为例)? HTML添加onclick属性,值使用JS字符串来表示要执行事件。...比如添加click事件那么attachEvent第一个参数是”onclick”。 addEventListenerthis指向DOM元素,而attachEventthis指向window。...attachEvent如果添加多个事件处理程序那么先执行后添加后执行先添加,这与addEventListener恰好相反(IE9和IE10修改了执行顺序和addEventListener一样了,先添加先执行...使用事件委托,如表格删除某一行可以把事件添加到表格上而不是td标签,然后判断那一个元素出发,然后对特定元素做处理,这样既可以减少事件监听数量有可以不用关系新增元素时间。

    1.1K30

    【JS】395-重温基础:事件

    作用域链异常 由于不同浏览器JavaScript引擎遵循标识符解析规则存在差异,导致访问非限定对象成员时出错,表现为事件处理程序作用域链不同浏览器结果不同。...,这里事件处理程序也会是元素作用域中执行,因此this也是指向元素,可以访问元素任何属性和方法。...使用DOM2级方法,可以添加多个事件处理程序,并按照添加顺序触发: var leo = document.getElementById('leo');leo.addEventListener('click...访问IE事件对象 event,方法有多种,取决于事件处理程序方法: DOM0级方法,使用 window.event var leo = document.getElementById('leo'...6.1 DOM事件模拟 document对象上使用 createEvent()方法创建一个 event对象。 createEvent()接收一个参数,即要创建事件类型字符串。

    1K60

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

    live、delegate 不多用,Jquery1.7已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高一种,作用就是选择到元素上绑定特定事件类型监听函数...JavaScript支持标签中直接绑定事件 2.JavaScript代码onXXX绑定:JavaScript代码绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发...3.绑定事件监听函数:绑定事件另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。 一. DOM元素中直接绑定 1....JavaScript代码onXXX绑定 JavaScript代码绑定事件语法为: elementObject.onXXX=function(){     // 事件处理代码 } 其中: elementObject...jQuery 事件绑定具有叠加性,JavaScript 事件绑定则是可覆盖

    5.7K20

    使用原生 JavaScript 页面加载完成后处理多个函数

    网页 JavaScript 脚本运行是需要通过事件去触发。一般做法就是在网页,直接编写几个函数,有的代码被加载时候就被浏览器处理,或者使用类似下面的代码来触发实现函数相关功能。...以前需要在 HTML 中加上一些触发事件来触发 JavaScript 相关函数,而现在直接在 JavaScript 对某个元素使用监听器,监听这个元素事件,如果这个元素被触发了某些事件监听器又定义了这个事件对应处理函数...使用监听器方法很简单,就是先获取页面某个元素,然后对这个元素使用监听器,定义监听事件和对应事件处理函数,就上文例子可以使用下面语句代替: document.getElementById('link...window.onload 事件 onload 事件只有整个页面已经完全载入时候才会被触发,我们将 JavaScript 代码写进 onload 事件,就可以保证 HTML 元素被加载完成之后,...结合监听器和 window.onload 实现页面加载完处理多个函数 这里需要特别提到监听器一个优势:可以为一个元素上同一个事件添加或者去除多个处理函数。

    2.8K20

    以jq为案例查看外观模式

    前言 套餐服务–外观模式,属于大类结构型设计模式一种,通常是为一组复杂子系统接口提供一个更高级统一接口,通过这个接口让使用者对子系统接口更加容易访问。...js中有时也会对底层结构兼容性做统一封装来简化用户使用。 备注:本文案例以es5为主,部分会涉及jq代码,大家理解思想就好。如果你有es6以及目前三大框架实例应用案例,欢迎分享。...; } } } 结论:从上面可以看出一个简单添加事件就用了外观模式,而实际上add事件本身在jq看来也是属于封装底层...整个jq框架兼容写法上、向上封装上不断地运用了外观模式来设计。...vue、react框架也一定不缺少这样例子,去找找看吧 参考文档 张容铭《javascript设计模式》

    68030

    JS 事件绑定、事件监听、事件委托详细介绍 转

    JavaScript学习,我们经常会遇到JavaScript事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢?...JavaScript,有三种常用绑定事件方法: DOM元素中直接绑定; JavaScript代码绑定; 绑定事件监听函数。...; } JavaScript代码绑定事件 JavaScript代码(即 script 标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。...; } 使用事件监听绑定事件 绑定事件另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍,事件监听。...实际代码 我们可能用到jQuerylive()、delegate()、bind()、on()等。 事件委托优点 1、提高JavaScript性能。

    8.8K31

    chromev8JavaScript事件循环分析

    君子和而不同,美美与共,天下大同,并不是说JavaScript只有单线程操作就很落后,随着时代发展,现如今人们也意识到,单线程保证了执行顺序同时也限制了JavaScript效率,因此开发出了...,甚至是自己,其结果不过是执行栈添加一个执行环境。...我们可以通过使用 Loupe(Loupe是一种可视化工具,可以帮助您了解JavaScript调用堆栈/事件循环/回调队列如何相互影响)工具来了解上面代码执行情况。...页面渲染事件,各种IO完成事件等随时被添加到任务队列,一直会保持先进先出原则执行,我们不能准确地控制这些事件添加到任务队列位置。...事件循环中,每进行一次循环操作称为tick,每一次tick任务处理模型是比较复杂,但关键步骤如下: 执行一个宏任务(栈没有就从事件队列获取) 执行过程如果遇到微任务,就将它添加到微任务任务队列

    4K40

    onclick与addEventListener区别

    具体事件分析可查看另一篇文章 结论: 1.onclick事件同一时间只能指向唯一对象 2.addEventListener给一个事件注册多个listener 3.addEventListener对任何...对于多个相同事件处理器,不会重复触发,不需要手动使用removeEventListener清除 5.IE9使用attachEvent和detachEvent 探究: onclick添加事件: element.onclick...,javascript代码 运行结果: 可想而知,只会弹出一个弹出框,虽然绑定了两次,‘我是click2’ 一个click处理器同一时间只能指向唯一对象。...通过addEventListener添加事件必须通过相对应为removeListener注销事件。...对于IE9之前,相对应attachEvent和detachEvent 总结: 1.onclick事件同一时间只能指向唯一对象 2.addEventListener给一个事件注册多个listener

    1.5K10

    javascript-继承之jquery

    它封装了 JavaScript 常用功能代码,提供一种简便 JavaScript 设计模式,优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。...js: 使用 querySelectorAll 来查询 DOM 节点; 使用 fetch 来代替 ajax; 事件处理使用事件代理; 使用 DOM 标准化写了 polyfill; 使用了自定义元素。...(把对象挂载到 jQuery prototype 属性,来扩展一个新 jQuery 实例方法) .fn.extend方法初衷是我们扩展之后可以用("").newMetod()这样访问,实际上就是给原型加一个...jQuery.extend(object); 为扩展 jQuery 类本身,为自身添加方法。...$.xxx() jQuery.fn.extend(object);给 jQuery 对象添加方法 $('#test').xxx() $.extend 常见用法 //jquery全局对象扩展一个net

    1.1K30

    【Golang语言社区】H5游戏开发-纯javascript模仿微信打飞机小游戏

    JavaScript模仿微信打飞机游戏,做网页小游戏借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅。...具有分数统计,里面的JS封装类包括有创建飞机类、飞机移动行为控制,创建子弹类,产生min到max之间随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove...,true); //为body添加判断本方飞机移出边界事件 bodyobj.addEventListener("mousemove...">//为暂停界面的继续按钮添加暂停事件 suspenddiv.getElementsByTagName("button")[].attachEvent("onclick",zanting...="color: #0000ff">//为暂停界面的返回主页按钮添加事件 suspenddiv.getElementsByTagName("button")[].attachEvent(

    2.1K70

    JS高级测试: 下列事件说法不正确是?

    考核内容:JAVASCRIPT事件委托与代理,事件冒泡或事件捕获 题发散度: ★ 试题难度: ★ 解题思路: 事件委托作用 支持为同一个DOM元素注册多个同类型事件 可将事件分成事件捕获和事件冒泡机制... 冒泡 ,内部元素事件会先被触发,然后再触发外部元素,即: 元素点击事件先触发,然后会触发 元素点击事件。... 捕获 ,外部元素事件会先被触发,然后才会触发内部元素事件,即: 元素点击事件先触发 ,然后再触发 元素点击事件。 ?...addEventListener() 方法用于向指定元素添加事件句柄。...但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄: element.attachEvent(event, function);element.detachEvent(event

    96620
    领券