首页 > 其他分享 >第10章 高级事件(下)

第10章 高级事件(下)

时间:2023-06-26 22:00:53浏览次数:37  
标签:function 10 bind button 高级 alert box 事件 click


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件对象</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<div style="width:200px; height:200px; background:green;" id="box">
	<input type="button" class="button" value="按钮" />
    <input type="button" class="button" value="按钮" />
    <input type="button" class="button" value="按钮" />
</div>

<form action="123.html">
<div style="width:200px; height:200px; background:green;" id="box">
	<input type="submit" class="button" value="按钮" />
</div>
</form>
-->

<div style="width:200px; height:200px; background:green;" id="box">
    <input type="button" class="button" value="按钮" />
</div>

</body>
</html>

 

demo.js

$(function(){
	//普通绑定 .bind
	//普通解绑 .unbind
	
	//事件委托 .live .dategate
	//解除委托 .die .undelegate
	
	//新方法绑定 .on
	//新方法解绑 .off
	
	/*
	$('.button').on('click',function(){
		alert('替代bind');
	});
	
	$('.button').on('click',{user:'Lee'},function(e){
		alert('替代bind,'+e.data.user);
	});
	
	$('.button').on('mouseover mouseout',function(e){
		alert('移入移出');
	});
	
	$('.button').on({
		mouseover:function(){
			alert('移入');
		},
		mouseout:function(){
			alert('移出');
		}
	});
	
	$('form').on('submit',function(){
		return false;
	});
	
	$('form').on('submit',false);
	
	$('.button').on('click',function(){
		alert('替代bind');
	});
	
	$('.button').off('click');
	
	//替代.live .delegate
	$('#box').on('click','.button',function(){
		$(this).clone().appendTo('#box');
	});
	
	//移出事件委托
	$('#box').off('click','.button');
	
	//仅一次事件触发
	$('.button').one('click',function(){
		alert('仅一次事件触发!')
	});
	*/
	$('#box').one('click','.button',function(){
		$(this).clone().appendTo('#box');
	});
	
	
});

 

标签:function,10,bind,button,高级,alert,box,事件,click
From: https://blog.51cto.com/u_16171388/6558234

相关文章

  • SpringBoot事件机制
    1、是什么?SpringBoot事件机制是指SpringBoot中的开发人员可以通过编写自定义事件来对应用程序进行事件处理。我们可以创建自己的事件类,并在应用程序中注册这些事件,当事件被触发时,可以对其进行处理。在SpringBoot中,事件可以是任意类型的,可以是基于Spring的事件,也可以是自定义的事......
  • 【Azure 事件中心】Kafka 生产者发送消息失败,根据失败消息询问机器人得到的分析步骤
    问题描述AzureEventHubs--Kafka生产者发送消息存在延迟接收和丢失问题,在客户端的日志中发现如下异常:2023-06-0502:00:20.467[kafka-producer-thread|producer-1]ERRORcom.deloitte.common.kafka.CommonKafkaProducer-messageId:9235f334-e39f-b429-227e-45cd30dd6486......
  • 【Azure 事件中心】Kafka 生产者发送消息失败的分析步骤
    问题描述AzureEventHubs--Kafka生产者发送消息存在延迟接收和丢失问题,在客户端的日志中发现如下异常:2023-06-0502:00:20.467[kafka-producer-thread|producer-1]ERRORcom.deloitte.common.kafka.CommonKafkaProducer-messageId:9235f334-e39f-b429-227e-45cd30dd......
  • JQ 合成事件
    style.css*{margin:0;padding:0;} body{font-size:13px;line-height:130%;padding:60px}#panel{width:300px;border:1pxsolid#0050D0}.head{padding:5px;background:#96E555;cursor:pointer}.content{padding:10px;text-indent:2em;border-......
  • JQ 事件对象的属性
    demo.html<html><head><title>event.type</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="js/jquery-1.10.1.min.js"type="text/javascript">......
  • JQ 移除事件
    demo.html<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="text/css">*{margin:0;padding:0;} body{font-size:13px;line-hei......
  • JQ 其它的点击事件用法
    demo.html<html><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>.over{ color:red; background:#888;}</style><scriptsrc="js/j......
  • 如何创建Windows 10 虚拟机
    一,新建Windows10虚拟机 1.1创建新的虚拟机1,点击创建新的虚拟机 2,选择典型,点击下一步 3,选择稍后安装操作系统,点击下一步。 4,操作系统选择windwos,版本选着Windows10x64,点击下一步 5,可以选择想要给虚拟机的命名,位置选择想要放置的盘符位置,点击下一步 6,可......
  • 日均调度 10W+ 任务实例,DolphinScheduler 在蔚来汽车一站式数据治理开发平台的应用改
    大家好我是张金明,在蔚来汽车担任大数据平台研发工程师。这次和大家分享的是ApacheDolphinScheduler在蔚来汽车一站式数据治理开发平台的应用和改造,接下来我将从背景、应用现状和技术改造三个方面去分享一下。背景业务痛点在蔚来汽车构建一个统一的数据中台之前,我们面临这样......
  • 如何成为10x倍工程师
    10倍效率+10x的工程师很难找,但是-10x工程师是存在的。所谓-10x工程师,就是每周要浪费团队400个小时的工程师。他有以下特征:创造无效的繁忙工作,比如演示文稿、图表、工单管理,以及毫无意义的流程。鼓励工程师追求优雅而不是实用主义。确保没有人有权做出任何决定。写......