js添加事件attachEvent和addEventListener的用法示例

最新推荐文章于 2023-08-09 08:56:04 发布
最新推荐文章于 2023-08-09 08:56:04 发布
阅读量705 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wyqwclsn/article/details/39930255
本文详细阐述了如何通过条件判断，在不同浏览器中实现表单提交事件的监听，确保了代码的通用性和兼容性。重点讨论了事件名在不同浏览器中的区别，并提供了具体的代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

if (test_form.addEventListener) 
{
    test_form.addEventListener("submit", my_onsubmit_function, false);
} 
else if(test_form.attachEvent) 
{
    test_form.attachEvent("onsubmit", my_onsubmit_function);
}

由于应对不同的浏览器，所以需要做一下判断，使用不同的方案。
注意：事件名一个要加on，一个不加。其他事件同样。
JavaScript事件监听（attachEvent、 addEventListener）
dayewandou的博客
10-22 1071
事件监听：同一个事件绑定多个事件处理程序 IE：（IE8及以下查看效果） 对象.attachEvent(‘事件（on）’，‘事件处理程序’) 添加事件 对象.detachEvent(‘事件（on）’，‘事件处理程序’) 删除事件案例：给一个div绑定两个处理程序，查看执行顺序（需要在IE8下查看效果）<!doctype html> <html l
attachEvent和addEventListener详解
weixin_30865427的博客
04-14 508
attachEvent方法可以动态的为网页内的元素添加一个事件．通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用attachEvent则不必这样做．你把写好的事件准备好，在需要的时候给元素绑定上再执行．而且attachEvent支持为某个元素绑定多个事件．执行顺序是，后绑定的先执行．那么我在什么时候使用该方法呢，当然在你需要时．不过如今的Web2.0追求的是分...
[ javascript ] attachEvent事件!
杨有梦的博客
04-21 1279
最近在看本司徒大神的博客，发现其中很是有还多可以发掘的东西的! 如下: Document var E = { on:function(el,type,fn){ el.addEventListener? el.addEventListener(type,fn,false):el.attachEvent("on" + type,function()
html行为只触发一次,如何使用Javascript addEventListener()来覆盖HTML Form默认的submit()行为...
weixin_36320737的博客
06-28 490
如何使用addEventListener()为HTML表单的Submit按钮分配处理程序，类似于对按钮的'onclick'属性的赋值，而不触发表单的默认submit()行为？我可以将“自定义”功能分配给“提交”按钮的“onclick”属性。自定义函数执行各种步骤，然后创建Ajax请求对象并使用它将数据发送到服务器。不会触发默认的submit()行为。submitButton.onclick = f...
关于form提交事件
weixin_53983124的博客
04-03 1464
1.因为表单的默认提交事件，点击提交后会跳转页面，而具体跳转到哪是由表单的action属性决定的，如果action没有值或者没写action也会跳转，只是跳转到自己的页面，达到一个页面刷新的效果。由于表单的默认行为，导致我们控制台没有打印我们想要的结果，那么我阻止他的默认行为，这样我们就可以在控制台看到我们想要的结果了。2.表单中的按钮 如果没有去设置类型，那么默认 type=输出结果：刷新页面有 1 闪过。1.表单的事关于件监听。结果：控制台输出 1。
事件绑定demo——attachEvent/addEventListener
Front-End严黑C的博客
06-20 400
attachEvent事件和addEventListener 一个是在IE下兼容一个是在Chrome和FF下兼容，对事件的写法一个需要+on如onclick，一个不需要加‘on’如click,所以在函数传参时ev写不用加on的事件.
javascript attachEvent和addEventListener使用方法
10-30
本知识点将介绍 JavaScript 中两种常用的方法：attachEvent 和 addEventListener，以及它们在不同浏览器中的应用和区别。 首先，attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法，它的语法是：...
attachEvent和addEventListener 使用方法
03-15
在JavaScript中，`...以上就是关于 `attachEvent` 和 `addEventListener` 的使用方法及其区别的详细介绍，它们在JavaScript事件处理中起着至关重要的作用。正确理解和使用这些方法可以提高代码的健壮性和兼容性。
JS在IE和FF下attachEvent,addEventListener学习笔记
10-29
本文将探讨在 Internet Explorer (IE) 和 Firefox (FF) 浏览器中处理事件的方法，特别关注 `attachEvent` 和 `addEventListener` 的使用。 #### 二、事件处理概述 在 JavaScript 中，事件是指由用户或浏览器引发的...
addEventListener和attachEvent二者绑定的执行函数中的this不相同
09-05
在JavaScript中，`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法，但它们之间存在一些关键差异，特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分，被大多数现代浏览器支持...
addEventListener 的用法示例介绍
09-04
`addEventListener` 是JavaScript中用于添加事件监听器的方法，它允许我们为同一个元素绑定多个事件处理函数，这对于构建复杂的交互式网页非常有用。在不同的浏览器环境中，`addEventListener` 的使用略有差异，尤其...
事件处理方式on、addEventListener和attachEvent
handy_csdn的博客
02-06 612
on 绑定事件处理程序 ele.onxxx = function(){} 如下添加一个点击事件，使用onclick，程序中this指向事件对象本身 不能给同一个对象绑定相同的处理事件，后面的会把前面的覆盖掉 解除事件处理程序 ele.onxxx = false/''/null; 解除绑定就是给onclick属性重新赋值为false或者空串或者null addEventListener 绑定事件处理程序 ele.addEventListener(type,fn,false);
attachEvent报错原因
Ultraman_and_monster的博客
04-07 5296
document.attachEvent is not a function出错的原因 报错原因有： （1）、利用attachEvent()直接在谷歌浏览器打开，我就是犯这种低级错误的。 重要事情说三遍：attachEvent是IE浏览器独有的！！！attachEvent是IE浏览器独有的！！！attachEvent是IE浏览器独有的！！！ （2）、在IE11版本浏览器打开运行程序，I...
js按钮的click事件，给Input（submit）按钮添加事件监听addEventListener存在问题
weixin_45881103的博客
06-26 3703
一、提交按钮的点击事件 目的：html中表单按钮，想给提交按钮添加一个点击事件，当点击时实现相应函数功能。 存在问题：点击页面函数执行很快，结果不正确。如图： （1）、HTML部分代码 <form> <input type="submit" class="logbtn" value="Login" id="test"> </form> （2）、JavaScript部分代码 let test=document.getElementById('te
attachEvent() / addEventListener()
.NET技术专栏
03-06 1945
有時候當某一物件的某一事件被觸發時，它所要執行的程式可能是一大串，有可能是要呼叫某一函式，也有可能同時又要呼叫另一函式。做法其實很多種啦，現在一一的介紹一下。我們先來看看比較常見的做法是怎樣做的。    1  
addEventListener方法
最新发布
m0_57263959的博客
08-09 1994
是一种强大的机制，可以用于在 JavaScript 中实现对 DOM 元素的事件响应，从而创建丰富的交互式用户界面。，您可以指定在特定事件发生时执行的函数，从而实现对用户交互或其他类型的事件的响应。函数会被调用，并在控制台输出 "Button clicked!示例：在 JavaScript 中使用。是 JavaScript 中用于向。DOM 元素添加事件监听器。将点击事件监听器绑定到。元素上，当按钮被点击时，
addEventListenter和attachEvent事件兼容代码
qq_36090419的博客
06-08 1019
在浏览器中，绑定事件方法由于IE和chrome等支持W3C标准的浏览器有所区别。本文针对addEventListener和attachEvent的这两个进行了一些分析，最后给出了一个比较完整的兼容代码 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.oncl
[JavaScript]onclick、addEventListener、attachEvent详解
热爱思考、活力满满、开朗爱笑的年轻人
04-13 2351
onclick addEventListener attachEvent onclickonclick 最初的样子：<input type="button" value="按钮" onclick="alert('sssss');"> window.addEventListener("click", function(){}, false); window.attchEvent("click", fu);
HTML addEventListener() 方法和attachEvent()区别分析
ssisse的博客
05-06 3994
本文转自：http://www.runoob.com/jsref/met-element-addeventlistener.html 语法 element.addEventListener(event, function, useCapture) 参数值 参数 描述 event 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例
JavaScript事件处理：addEventListener与attachEvent对比解析
"这篇文章主要探讨了JavaScript中处理事件的两种主要方法：addEventListener()和attachEvent()，以及它们在Mozilla和Internet Explorer（IE）环境下的差异。理解这些差异对于JavaScript开发者来说至关重要，特别是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值