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

于 2023-11-20 22:51:59 发布
阅读量97 收藏
点赞数
文章标签： 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>

原神星铁高手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS 绑定事件处理函数三个方法 及 各自事件解绑方法
qq_45560350的博客
08-27 1424
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 46
和一个朋友讨论了一下，DOM2绑定方式都是有名的函数，匿名的处理起来有些麻烦，而且即使是有名的函数，在IE低版本的浏览器也是解除不掉的，this指向需要修改，着实费了一番功夫，这个是兼容ie低版本的，可能代码不是最优的，希望朋友们提出优化意见或者需要改进的地方，话不多说，上菜： <!DOCTYPE HTML> <html> <head> <me...
【JavaScript-DOM重点核心】事件绑定，解除事件，DOM事件流
zhaochen1127的博客
09-14 1580
js中的DOM核心重点，本篇文章将带你了解，绑定事件，解绑事件，DOM事件流的那些事，以及在使用中的注意点
JS事件的绑定和解绑
zws_bai的博客
03-22 2603
/* 事件三要素 1、事件源：在谁的身上绑定事件 2、事件类型：什么事件 3、事件处理函数：当行为发生的时候，执行那一个函数 ==>div.onclick=function(){} ==>div:事件源（绑定在div身上的事件） ==>click：事件类型 ...
js移除事件 js绑定事件实例应用
10-27
本文将详细介绍js移除事件 js绑定事件的实现过程，需要了解的朋友可以参考下
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
11-27
在JavaScript的世界里，...总结，jQuery的事件处理机制简化了JavaScript中的事件操作，提供了事件绑定、解绑、阻止事件冒泡和阻止默认行为等实用功能。通过合理利用这些工具，开发者可以创建出更丰富的交互式网页。
HTML前端学习（3）--JS事件
05-13
5. 其他jQuery事件函数：如`$.event.preventDefault()`阻止默认行为，`$.event.stopPropagation()`阻止事件冒泡。 三、页面节点查找与操作 1. DOM操作：jQuery提供了方便的DOM操作方法，如`$(selector)`选择元素，...
javascript实现相同事件名称，不同命名空间的调用方法
12-08
这样只解绑了`click.plugin`事件，而保留了默认的`click`事件。 总结来说，JavaScript（尤其是jQuery）中的命名空间机制提供了在同名事件上区分不同处理逻辑的功能，使得代码更加模块化，也便于管理和维护。在实际...
javascript在事件监听方面的兼容性小结
12-03
4. **阻止默认事件行为**： - 在IE中，要阻止事件的默认行为，需要在事件处理函数中设置 `event.returnValue = false;`。 - W3C 浏览器使用 `event.preventDefault();` 来达到相同效果。 5. **事件捕获支持**： ...
[jQuery] 事件和动画详解
10-17
jQuery的事件处理函数接收一个`event`参数，可以利用这个参数来控制事件行为： - `event.stopPropagation()`: 阻止事件继续向父元素冒泡，防止父元素上的事件处理函数被执行。 - `event.preventDefault()`: 阻止...
js解除绑定事件
weixin_44766633的博客
06-22 997
js解除绑定事件 特别注意事项：addEventListener和attachEvent在结构里面的函数都需要写出来，然后再在结构里面调用函数，这样可以确保两个结构里面的都是同一个函数。如果说把函数体写入结构里面，那么就相当于深度复制，两个函数体完全不是同一个函数体 注意:用什么方式绑定事件,就应该用对应的方式解绑事件 1.解绑事件 对象.on事件名字=事件处理函数—>绑定事件 对象.on事件名字=null/false; 2.解绑事件 对象.addEventListener(“没有on的事件类型”,
js取消 删除点击事件
h0713的博客
06-28 6330
用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 790
// 事件绑定 this.bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) {// elem:节点 type:事件类型 handler:事件处理程序
JS解除事件绑定
陈广晗
03-12 1988
很简单的都在代码里面了直接上代码吧 &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 802
之前看红宝书，第十三章，解除事件引用，代码是这样子的，有点不太明白。 // 解除引用失败 var btn = document.getElementById('myBtn') btn.addEventListener( 'click', function() { alert(this.id) }, ...
原生js移除事件处理的3种方式
u010234868的专栏
06-26 2625
<!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 357
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中取消事件的两种方式
yuanmei1986的博客
03-02 3827
取消事件：2种情况：            1. 在html中绑定事件处理函数：2个return function validate(obj) { if (confirm("提交表单?")) { alert(obj.value); return true; } else { alert
js 事件的取消
qq_35187942的博客
01-06 3334
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..
js事件触发和解绑的方法
最新发布
06-12
在 JavaScript 中，事件触发和解绑的方法如下： 事件触发： 1. 使用 addEventListener() 方法添加事件监听器。 ```javascript element.addEventListener(event, function, useCapture); ``` 其中，element 表示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值