分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

js和jQuery中的事件绑定与普通事件

发布时间:2023-09-06 01:44责任编辑:熊小新关键词:jsjQuery

普通事件,是指直接对元素进行事件注册,然后触发

而事件绑定是将事件注册到元素上

两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个)

而事件绑定是可以重复绑定多个事件,而且都可以触发

<html> ???<a class="ack1">点击触发绑定事件</a><br><br> ???<a class="ack2">点击触发普通事件</a></html><script> ???function foo1(){ ???????alert(‘触发点击1‘); ???} ???function foo2(){ ???????alert(‘触发点击2‘); ???} ???var ack1=document.getElementsByClassName("ack1"); ???ack1.addEventListener(‘click‘,foo1); ???ack1.addEventListener(‘click‘,foo2); ???//弹出 触发点击1 和 触发点击2 ???var ack2 = document.getElementsByClassName("ack2"); ???ack2.onclick = foo1; ???ack2.onclick = foo2; ???//只会弹出 触发点击2</script>

而在jQuery中则有点不同,而且jQuery本身允许通过普通事件添加多个触发函数

 ???function foo1(){ ???????alert(‘触发点击1‘); ???} ???function foo2(){ ???????alert(‘触发点击2‘); ???} ???//都会触发两个函数 弹出 触发点击1 触发点击2 ???$(".ack1").on(‘click‘,foo1); ???$(".ack1").on(‘click‘,foo2); ???????$(".ack2").click(foo1); ???$(".ack2").click(foo2); ???//都会触发两个函数 弹出 触发点击1 触发点击2

jQuery中事件绑定是指为动态创建的元素绑定上事件触发,不只是为元素绑定多个事件

注意对元素动态绑定事件,一般需要通过父类元素为其绑定,才会使该子类(刚刚添加的元素)可以被触发

 ???$(document).on(‘click‘,‘.ack1‘,foo1); ???$(".ack1").click(function(){ ???????var ele=$(this).clone(); ???????$(this).after(ele);  //后克隆的元素依旧可以触发foo1事件函数 ???}); ???$(".ack2").click(foo2); ???$(".ack2").click(function(){ ???????var ele=$(this).clone(); ???????$(this).after(ele);  //无法触发foo2事件函数 ???});

js和jQuery中的事件绑定与普通事件

原文地址:https://www.cnblogs.com/ssyfj/p/8492101.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved