绑定事件的几种方式

绑定事件分为3种:
1、内联模式:将函数名直接作为标签属性的属性值(注意:这里是带括号的,不带括号不生效,但是在vue中可以加括号也可以不加括号,如果需要穿参数就加括号,不需要传参数可以不加,vue中也不加on,因为on已经在左边了
在这里插入图片描述
这种没有实现结构、样式、行为三者分离
2、脚本模式:获取节点并给节点添加属性
在这里插入图片描述
先获取节点,再给节点添加事件(也就是匿名函数),这种只能添加一个事件,再添加事件就会被覆盖

3、监听模式:
在这里插入图片描述
注意:这里是click不是onclick,可以添加多个事件,也可以移除事件

vue中时间写法:
在这里插入图片描述

jQuery是一个流行的JavaScript库,用于简化DOM操作和事件处理。它提供了多种方便的方式绑定事件到元素上。以下是jQuery中常见的几种事件绑定方式: 1. **直接绑定**: 使用`.on()`方法可以一次性为元素添加多种类型的事件处理器。例如: ```javascript $('#element').on('click', function() { // 事件处理代码 }); ``` 2. **链式绑定** (简写): 对于已经存在的DOM元素,可以直接在选择器后面使用`.click()`、`.hover()`等方法进行事件绑定,这种方式会立即创建处理器: ```javascript $('#element').click(function() { ... }); ``` 3. **委托模式**: 当你需要给动态生成的元素绑定事件时,可以将事件绑定到它们的共同祖先元素上,利用事件冒泡原理来处理: ```javascript $('#container').on('click', '.childElement', function() { ... }); ``` 4. **简写语法** (`.delegate()`方法,现已弃用,但仍然可用):主要用于处理以前动态添加的元素,示例: ```javascript $('#parent').delegate('.child', 'click', function() { ... }); ``` 5. **`bind()`、`live()` 和 `delegate()` 的替代品 - `.on()` 中的 `livequery` 特性(已废弃),适用于处理元素插入文档后触发事件的情况。 6. **`one()` 方法**: 只执行一次事件处理,适合作为一次性操作或回调函数: ```javascript $('#element').one('click', function() { ... }); ``` 记得在使用这些方法时,确保你的jQuery版本支持这些功能,并确保代码是在document ready阶段或者元素存在时绑定事件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值