首页
学习
活动
专区
工具
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()方法和事件委托。了解和掌握这些方法,可以为前端开发中的交互效果提供更多的选择和实现方式。

30820

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

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

1.5K50
  • 事件

    给元素添加事件处理程序 方法一:HTML内联方式 元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。...button的时候,由于事件冒泡,body的click事件也会触发,但是调用这句后,事件会停止传播 IE中的事件对象 访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。...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”。 addEventListener中的this指向DOM元素,而attachEvent中的this指向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

    在chromev8中的JavaScript事件循环分析

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

    4K40

    以jq为案例查看外观模式

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

    68630

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

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

    8.8K31

    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

    【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

    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

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

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

    97520
    领券