【js事件解绑与默认行为解除】

于 2023-11-20 22:51:59 发布
阅读量124 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79124729/article/details/134520862
版权
本文展示了如何在HTML中使用JavaScript进行按钮点击事件的绑定与解绑，以及如何阻止链接的默认跳转行为。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>box</button>
    <a href="http://www.baidu.com">百度一下</a>
</body>
<script>
    const btn = document.querySelector('button')

    //事件绑定与解绑（匿名函数不可解绑）
    function fn(){
        alter('点击了')
    }
    btn.addEventListener('click',fn)
    btn.removeEventListener('click',fn)

    const a = document.querySelector('a')

    a.addEventListener('click',function(e){
    //阻止默认行为  跳转
        e.preventDefault
    })
</script>
</html>

原神星铁高手
关注
JS 为按钮解绑多个点击事件（兼容性代码）
夏沐的博客
02-20 687
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=
js绑定和解绑事件
zbbyy2004510的博客
11-09 1063
绑定事件和解绑事件 绑定事件语法: .bind(type,[data],fn) 绑定单个例子: 1.$("div").bind("click",function (){ 2.}) 绑定多个: 1.$("div").bind({"click":function (){ 2. 3.},"click":function(){ 4. 5.} 6.)} 描述: type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。 data
JS 绑定事件处理函数三个方法 及 各自事件解绑方法
qq_45560350的博客
08-27 1450
1 . ele.onxxx = function(event){} xxx：事件类型 event：事件处理程序 div.onclick = function(){ console.log(1); } 兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序 div.onclick = function(){ console.log(1); } div.onclick = function(){ console.log(2); } 这种写法基本等同与写在HTML行间上 即 div
js中邦定事件与解绑支持匿名函数
weixin_30666943的博客
07-29 58
和一个朋友讨论了一下，DOM2绑定方式都是有名的函数，匿名的处理起来有些麻烦，而且即使是有名的函数，在IE低版本的浏览器也是解除不掉的，this指向需要修改，着实费了一番功夫，这个是兼容ie低版本的，可能代码不是最优的，希望朋友们提出优化意见或者需要改进的地方，话不多说，上菜： <!DOCTYPE HTML> <html> <head> <me...
JavaScript事件绑定、事件解绑
最新发布
weixin_52629158的博客
05-03 548
重要事情说三遍：attachEvent是IE浏览器独有的！attachEvent是IE浏览器独有的！attachEvent是IE浏览器独有的！绑定事件 addEventListener() 与 attachEvent()，这两个函数，都可以做事件绑定。this不同，addEventListener中的this是当前绑定事件的对象。addEventListener 中事件的类型（事件的名字）没有on。attachEvent 中事件的类型（事件的名字）有on。attachEvent中的this是window。
【JavaScript-DOM重点核心】事件绑定，解除事件，DOM事件流
zhaochen1127的博客
09-14 1645
js中的DOM核心重点，本篇文章将带你了解，绑定事件，解绑事件，DOM事件流的那些事，以及在使用中的注意点
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
在阻止默认行为和事件冒泡的示例中，展示了`return false`可以同时阻止事件冒泡和取消默认行为。这在处理表单提交或链接点击时很有用，因为它可以防止页面跳转或者表单提交等默认操作。 综上所述，jQuery事件处理...
javascript中的绑定与解绑函数应用示例.docx
01-13
本文详细介绍了 JavaScript 中事件绑定与解绑的方法，并通过具体的代码示例展示了在不同浏览器环境下的实现方式。了解这些基础知识对于前端开发者来说至关重要，能够帮助我们更好地控制页面的行为，提升用户体验。...
jQuery事件详解：绑定、解绑、冒泡与委托
"这篇一万字的文章全面总结了jQuery事件的相关知识，包括事件绑定、解绑、冒泡、默认行为、自定义事件、事件命名空间、事件委托以及jQuery特有的移入移出事件。" jQuery事件是JavaScript中处理用户交互的重要部分，...
JS事件的绑定和解绑
zws_bai的博客
03-22 2653
/* 事件三要素 1、事件源：在谁的身上绑定事件 2、事件类型：什么事件 3、事件处理函数：当行为发生的时候，执行那一个函数 ==>div.onclick=function(){} ==>div:事件源（绑定在div身上的事件） ==>click：事件类型 ...
js移除事件 js绑定事件实例应用
10-27
本文将详细介绍js移除事件 js绑定事件的实现过程，需要了解的朋友可以参考下
js解除绑定事件
weixin_44766633的博客
06-22 1029
js解除绑定事件 特别注意事项：addEventListener和attachEvent在结构里面的函数都需要写出来，然后再在结构里面调用函数，这样可以确保两个结构里面的都是同一个函数。如果说把函数体写入结构里面，那么就相当于深度复制，两个函数体完全不是同一个函数体 注意:用什么方式绑定事件,就应该用对应的方式解绑事件 1.解绑事件 对象.on事件名字=事件处理函数—>绑定事件 对象.on事件名字=null/false; 2.解绑事件 对象.addEventListener(“没有on的事件类型”,
js取消 删除点击事件
h0713的博客
06-28 6477
用js赋予点击事件 var redone=document.getElementById("gd2_3"); redone.addEventListener('click',canbeclick,true); function canbeclick(){ alert("啊，好爽啊!"); } 用js取消/删除点击事件 redone.removeEventListener('click',canbeclick,true); 上面代码亲测有效。 因为看到网上有将redone.οnclick=
js绑定和解除事件
qq_24193261的博客
09-22 829
// 事件绑定 this.bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) {// elem:节点 type:事件类型 handler:事件处理程序
JS解除事件绑定
陈广晗
03-12 2019
很简单的都在代码里面了直接上代码吧 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="JavaScript.js"&gt;&lt
JS解除事件引用
Mr_Yan的博客
04-15 854
之前看红宝书，第十三章，解除事件引用，代码是这样子的，有点不太明白。 // 解除引用失败 var btn = document.getElementById('myBtn') btn.addEventListener( 'click', function() { alert(this.id) }, ...
原生js移除事件处理的3种方式
u010234868的专栏
06-26 2786
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="btn"> <script> // 点击按钮只打印一次 var btn = document.ge.
js解除事件处理程序
小豆子的博客
04-03 380
ele.onclick = false/‘’/null; ele.removeEventListener(type, fn, false); ele.detachEvent(‘on’ + type, fn); ele.onclick = false/‘’/null; &lt;div style="width:100px; height:100px; background-...
js 事件的取消
qq_35187942的博客
01-06 3360
ie:obj.detachEvent(事件名称，事件函数); 标准：obj.removeEventListener(事件名称，事件函数，是否捕获); &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="{CHARSET}"&gt;         &lt;title&gt;&lt;/titl..
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值