jQuery之事件绑定&合成事件

最新推荐文章于 2023-06-13 18:43:47 发布
最新推荐文章于 2023-06-13 18:43:47 发布
阅读量694 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011637069/article/details/50235031
版权

jQuery之事件绑定&合成事件


1.事件绑定

    bind(type,fn)


2.绑定方式的简写形式

    click(function(){});

    示例代码：/jQuery01/WebRoot/event/e1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>事件绑定</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	$(function(){
        	/*
        	//事件绑定正式写法
			$('#d1').bind('click',function(){
				$(this).html('hello java');
			});
			*/
			
			//事件绑定简写形式
			$('#d1').click(function(){
				$(this).html('hello java');
			});
			
        });
    </script>
  </head>
  <body>
  	<div id="d1">hello jQuery</div>
  </body>
</html>


3.合成事件

    hover(enter,leave)  --  模拟光标悬停事件

    toggle(fn1,fn2...)  --  模拟鼠标连续单击事件

    示例代码：/jQuery01/WebRoot/event/e2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>合成事件</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <style type="text/css">
    	.s1{
    		width:100px;
    		height:100px;
    		background-color:red;
    	}
    	.s2{
    		background-color:yellow;
    	}
    </style>
    <script type="text/javascript">
    	$(function(){
        	/*
        	//鼠标进入事件
        	$('.s1').mouseenter(function(){
				$(this).addClass('s2');
            });
        	//鼠标移除事件
        	$('.s1').mouseleave(function(){
				$(this).removeClass('s2');
            });
            */
            /*
            //合成事件--hover(enter,leave):模拟光标悬停事件
            $('.s1').hover(function(){
            	$(this).addClass('s2');
            },function(){
            	$(this).removeClass('s2');
            });
            */
            //toggle(fn1,fn2...)--模拟鼠标连续单击事件
            //实验结果不理想
            $('a').toggle(function(){
				$('#d1').show('slow');
            },function(){
            	$('#d1').hide();
            });
        });
    </script>
  </head>
  <body>
  	<div class="s1">hello jQuery</div>
  	<a href="javascript:;">显示所有票价</a>
  	<div id="d1" style="display:none;">
  		111<br/>
  		222<br/>
  		333<br/>
  		444<br/>
  	</div>
  </body>
</html>







   
龙腾四海365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 合成事件
奇舞周刊
10-13 1022
背景：本文是笔者在使用 React 开发过程中遇到的问题，对 React合成事件做了一些简单的探索总结，本文不涉及具体的源码部分，而是通过一些Demo去理解 React合成事件，希望能对大家实际开发过程中有一些帮助。如有语义描述不清或错误点，还望大家能够指出。大家都知道 React 有一套自己的事件机制，如官方文档所述：SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生...
jQuery中的事件绑定和解绑、鼠标事件、事件委托
originalApril的博客
04-01 871
本文主要介绍了jQuery中事件的绑定和解绑、mouseover和mouseenter的区别和事件委托。
探索React合成事件
CRMEB小程序商城的博客
02-14 4463
探索 React 合成事件 一、什么是合成事件 React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。 在 React 中，所有事件都是合成的，不是原生 DOM 事件，但可以通过 e.nativeEvent 属性获取 DOM 事件。 比如： const button = <button onClick={handleClic
理解 React合成事件与JavaScript原生事件
qq_43293207的博客
05-12 3229
1. 原生事件 原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。 在react中即使有自己的一套事件机制（见下面合成事件），但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件，需要在点击非弹窗区域时关掉弹窗，此时我们只能针对document进行原生点击事件监听。 由于原生事件需要绑定在真实DOM上，所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作，并且注意要在component
JQuery：合成点击事件（多个点击事件合并）toggle()
最新发布
weixin_50784508的博客
06-13 170
【代码】JQuery：合成点击事件（多个点击事件合并）toggle()
事件之事件类型-合成事件（CompositionEvent）
xiaoyangzhu的博客
12-18 856
一 定义 合成事件是 DOM3 Events 中新增的，用于处理通常使用 IME 输入时的复杂输入序列。IME 可以让 用户输入物理键盘上没有的字符。例如，使用拉丁字母键盘的用户还可以使用 IME 输入日文。IME 通 常需要同时按下多个键才能输入一个字符。合成事件用于检测和控制这种输入。 二 事件方法 事件 作用 包含的值 在合成事件触发时，事件目标是接收文本的输入字段。唯 一增加的事件属性是 data，其中包含的值视情况而异 compositionstart 在 I.
JQuery的事件绑定
Dawn
07-03 404
JQuery事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数)； 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。 表单对象.submit();//让表单提交 on绑定事件/off解除绑定 jq对象.on(“事件名称”,回调函数) jq对象.off(“事件名称”) 如果off方法不传递任何参数，则将组件上的所有事件全部解绑 事件切换：toggle jq对象.toggle(fn1,fn2…) 当单击jq对象对应的组件后，会执行fn1.第二次点击会
jQuery学习笔记之jQuery的事件
10-28
本文主要探讨的是jQuery中的事件处理，包括事件绑定、合成事件、事件冒泡、获取事件对象的属性、移除事件以及一些其他的操作。 首先，我们来看事件绑定。jQuery提供了一个方便的`.bind()`方法来绑定事件。基本语法...
JQuery中DOM事件合成用法实例分析
12-12
本篇文章主要探讨了jQuery中的两个合成事件——`hover()`和`toggle()`方法，它们都是jQuery自定义的方法，旨在简化和增强浏览器的原生事件处理。 首先，我们来看`hover()`方法。这个方法用于模拟鼠标悬停事件，类似...
jquery事件绑定例子
07-25
在jQuery中，我们可以直接绑定这些合成事件，如`click`，而无需关心底层的实现细节。 现在，让我们转向实际的例子。在名为"2-事件绑定"的压缩包文件中，可能包含了一些HTML、CSS和JavaScript文件，用于演示jQuery...
浅谈jQuery中的事件
10-24
事件绑定是jQuery中最基础的操作之一，它允许我们将函数与DOM元素的特定事件关联起来，当该事件发生时，函数会被执行。在jQuery中，有多种方式来绑定事件： #### 标准事件绑定 初始的事件绑定方式是使用`bind()`...
react合成事件+底层原理+发展历程
qq_52563729的博客
06-10 2546
猛的1p
jQuery之合成事件
weixin_34185364的博客
09-10 121
jQuery提供一些方法将两种效果合并到一起，比如：mouseover、mouseout。 下面是一些案例： hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。参数 :over (Function) : 鼠标移到元素上要触发的函数。out (Function): 鼠标移出元素要触...
react合成事件
luo_qianyu的博客
01-28 2716
react合成事件 概念 react合成事件是react模拟原生dom事件所有能力得一个事件对象。拥有与浏览器原生事件相同的接口。 本篇文章基于V17.0.3来研究react的合成事件 都知道react16是把事件绑定在document上，自己实现了一套事件机制，react17的区别是把事件绑定到根节点 起源 从react将jsx解析成element的格式。带有事件的情况会解析成如下所示： props解析携带onClick {$$typeof: Symbol(react.element), type: 'd
【React】合成事件和原生事件
Sco_jing的博客
04-04 3463
本文主要讲述react合成事件和原生事件，包括事件流、DOM事件流的几个阶段、react合成事件的原理、在react中使用原生事件方法、合成事件和原生事件混合使用时的响应顺序以及如何阻止冒泡。
React中的合成事件
WindrunnerMax
01-20 2252
React中的合成事件 React自己实现了一套高效的事件注册、存储、分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大程度地解决了IE等浏览器的不兼容问题。 描述 React的合成事件SyntheticEvent实际上就是React自己在内部实现的一套事件处理机制，它是浏览器的原生事件的跨浏览器包装器，除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括stopPropagation()和preventDefault()，合成事件与浏览器的原生事件不同，也不
[react] 在react中什么是合成事件？有什么用？
歌谣的博客
11-23 319
[react] 在react中什么是合成事件？有什么用？ 是一个跨浏览器原生事件包装器。 它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() ，除了事件在所有浏览器中他们工作方式都相同。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
jQuery事件绑定及合成事件
a3060858469的博客
04-27 255
window.onload方法和$(document).ready()方法的区别3种方式是等价的 $(document).ready(function(){ }) $(function(){ }) $().ready(function(){ })事件绑定：bind() click mouseover mouseout 事件流程：等待DOM转载完毕，找到标题所在的元素，绑定click事件，找

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值