JS点击注册事件

最新推荐文章于 2024-06-20 23:18:02 发布
最新推荐文章于 2024-06-20 23:18:02 发布
阅读量4.4k 收藏 2
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_21274091/article/details/52422960
版权

效果：


错误情况：每个框都被循环赋值为相同的值。

error1--每点击一次注册一次click事件

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="application/x-javascript; charset=utf-8">
	<meta http-equiv="Expires" CONTENT="0">
	<meta http-equiv="Cache-Control" CONTENT="no-cache">
	<meta http-equiv="Pragma" CONTENT="no-cache">


    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>

</head>

<body style="margin:0px,padding:0px">

<lable style="text-align:right;width:105px;display:inline-block;font-size:10px;">姓名:</lable>
<input class="easyui-textbox textarea" id="name" name="name" type="text" data-options="width:150"/>
<lable style="text-align:right;width:105px;display:inline-block;font-size:10px;">id:</lable>
<input class="easyui-textbox textarea" id="id" name="id" type="text" data-options="width:150"/>



<!--textarea -->
<div id="textarea" class="easyui-window" closed="true" title="请输入" style="width:200px;height:250px;text-align:center">
	<div style="width:100%;height:70%">
		<textarea class="content" rows="" style="width:95%;height:100%"></textarea>
	</div>  
	<div style="text-align:center;height:30%">
		<a href="#" class="easyui-linkbutton" icon="icon-ok" id="sure">Ok</a>
	</div>
</div> 

<script type="text/javascript">
	$(document).ready(function(){ 
		//textarea类型在弹出框中输入
		$(".textarea").each(function(){
			
			$(this).click(function(){
				
				var item = $(this);
				$("#textarea").window('open');
				$("#textarea").prev().find("div").eq(0).html($(this).prev().html());
				$(".content").val(item.val().replace( /[,]/g,"\r\n"));

				$("#sure").on("click",function(){	
					var val = $(".content").val();
					val =  val.replace(/[\r\n]/g,","); //回车替换
							
					item.val(val);				 
					console.log(item);
				    $('#textarea').window('close');
				});
			
			})		
		})
	})
</script>
</body>
</html>

error2--每点击一次注册一次click事件，但事件对象全局，显示效果正确 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="application/x-javascript; charset=utf-8">
	<meta http-equiv="Expires" CONTENT="0">
	<meta http-equiv="Cache-Control" CONTENT="no-cache">
	<meta http-equiv="Pragma" CONTENT="no-cache">


    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>

</head>

<body style="margin:0px,padding:0px">

<lable style="text-align:right;width:105px;display:inline-block;font-size:10px;">姓名:</lable>
<input class="easyui-textbox textarea" id="name" name="name" type="text" data-options="width:150"/>
<lable style="text-align:right;width:105px;display:inline-block;font-size:10px;">id:</lable>
<input class="easyui-textbox textarea" id="id" name="id" type="text" data-options="width:150"/>
<!--textarea -->
<div id="textarea" class="easyui-window" closed="true" title="请输入" style="width:200px;height:250px;text-align:center">
	<div style="width:100%;height:70%">
		<textarea class="content" rows="" style="width:95%;height:100%"></textarea>
	</div>  
	<div style="text-align:center;height:30%">
		<a href="#" class="easyui-linkbutton" icon="icon-ok" id="sure">Ok</a>
	</div>
</div> 

<script type="text/javascript">
	$(document).ready(function(){ 
		//textarea类型在弹出框中输入
		$(".textarea").each(function(){
			
			$(this).click(function(){
				
				item = $(this); //全局变量
				$("#textarea").window('open');
				$("#textarea").prev().find("div").eq(0).html($(this).prev().html());
				$(".content").val(item.val().replace( /[,]/g,"\r\n"));

				$("#sure").on("click",function(){	
					var val = $(".content").val();
					val =  val.replace(/[\r\n]/g,","); //回车替换		
					item.val(val);				 
					console.log(item);
				    $('#textarea').window('close');
				});
			
			})		
		})
	})
</script>
</body>
</html>


success--one绑定事件，注册之后解绑 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="application/x-javascript; charset=utf-8">
	<meta http-equiv="Expires" CONTENT="0">
	<meta http-equiv="Cache-Control" CONTENT="no-cache">
	<meta http-equiv="Pragma" CONTENT="no-cache">


    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>

</head>

<body style="margin:0px,padding:0px">

<lable style="text-align:right;width:105px;display:inline-block;font-size:10px;">姓名:</lable>
<input class="easyui-textbox textarea" id="name" name="name" type="text" data-options="width:150"/>
<lable style="text-align:right;width:105px;display:inline-block;font-size:10px;">id:</lable>
<input class="easyui-textbox textarea" id="id" name="id" type="text" data-options="width:150"/>



<!--textarea -->
<div id="textarea" class="easyui-window" closed="true" title="请输入" style="width:200px;height:250px;text-align:center">
	<div style="width:100%;height:70%">
		<textarea class="content" rows="" style="width:95%;height:100%"></textarea>
	</div>  
	<div style="text-align:center;height:30%">
		<a href="#" class="easyui-linkbutton" icon="icon-ok" id="sure">Ok</a>
	</div>
</div> 

<script type="text/javascript">
	$(document).ready(function(){ 
		//textarea类型在弹出框中输入
		$(".textarea").each(function(){
			
			$(this).click(function(){
				
				var item = $(this);
				$("#textarea").window('open');
				$("#textarea").prev().find("div").eq(0).html($(this).prev().html());
				$(".content").val(item.val().replace( /[,]/g,"\r\n"));

				$("#sure").one("click",function(){	
					var val = $(".content").val();
					val =  val.replace(/[\r\n]/g,","); //回车替换
							
					item.val(val);				 
					console.log(item);
				    $('#textarea').window('close');
				});
			
			})		
		})
	})
	

</script>
</body>
</html>

具体效果可看console.log(item)

一只小前端
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础：注册事件（元素注册法和对象注册法）
Alley_Olive的专栏
07-07 460
JavaScript基础：注册事件（元素注册法和对象注册法）
JavaScript 事件注册
tianyexing2008的博客
10-09 1041
注册事件处理程序最简单的方式就是通过设置事件目标的属性为所需事件处理程序函数。除 IE8 及之前版本外的所有浏览器都支持的标准事件模型中，任何能成为事件的目标的对象----这些对象包括 Window 对象、Document 对象和所有文档元素----都定义了一个名叫 addEventListener() 的方法，使用这个方法可以为事件目标注册事件处理程序。3), attachEvent() 允许相同的事件处理程序函数注册多次，当特定的事件类型发生时，注册函数的调用次数和注册次数是一样的。
Javascript中点击(click)事件的三种写法
最新发布
忧郁的蛋的专栏
06-20 424
在JavaScript中Click事件是一种常见的用户交互事件,表示用户在网页上点击某个元素的动作,这篇文章主要给大家介绍了关于Javascript中点击(click)事件的三种写法,需要的朋友可以参考下。
js注册事件
m0_63944966的博客
05-14 245
1.传统方式注册事件 x.onclick = function() { } 2.事件侦听注册事件 addEventListener 里面的事件类型是字符串，必须加引号，而且不带on x.addEventListener('click',function() { }) 3.attachEvent ie9以前的版本也支持 x.attachEvent('onclick',function(){ }) 兼容性处理方案 function addEventListener(element,e
js-注册事件
weixin_48962287的博客
08-12 114
传统注册方式 利用on开头的事件，比如onclick 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个性能函数，最后注册的处理函数将会覆盖前面注册的处理函数 方法监听注册方式 w3c标准推荐方式 addEventListner（）他是一个方法 兼容：ie9之前不支持，可以用attachEvent（）代替 特点：同一个元素同一个事件可以注册多个监听器 案列： <body> <button>事件监听按钮</button> </b
js注册事件(绑定事件)
m0_63400611的博客
12-07 750
给元素添加事件,称为注册事件或者绑定事件 传统注册方式 利用on开头的事件onclick <button onclick = "alert('hi')"></button> btn.onclick = function() {} 特点:注册事件唯一,同一个元素同一个事件只能设置一个处理函数,后设置的处理函数会覆盖前面注册的处理函数 方法监听注册方式 w3c标准推荐方式 addEventListener()是一个方法 IE9之前的IE不支持此方法,可以使用attac
JavaScript中点击事件的写法
10-22
### JS模拟触发按钮点击事件 有时候我们需要在JavaScript代码中模拟用户点击按钮的行为，这可以通过调用`click`方法实现。 ```javascript document.getElementById('target').click(); ``` 上述代码会触发ID为`...
Javascript 注册事件浅析
10-30
### JavaScript 注册事件浅析 #### 一、事件驱动机制概览 JavaScript 是一种典型的事件驱动语言，这意味着程序的行为主要由用户与网页交互时触发的事件来决定。这些事件可以是用户点击按钮、键盘输入或其他任何...
JavaScript 注册事件代码
10-28
本篇文章将深入探讨如何在JavaScript中注册事件，以及解决不同浏览器间存在的兼容性问题。 首先，最基础的事件注册方式是直接在HTML元素中使用内联事件处理程序，如`onclick`属性，如下所示： ```html ()">test ``...
JS给元素注册事件的代码
10-30
### JS给元素注册事件的代码：麦鸡的TAB切换功能 #### 一、概述 本文档将详细介绍如何使用JavaScript为HTML元素添加事件监听器来实现一个简单的TAB切换功能。通过这种方式，用户可以通过点击不同的标签来切换显示...
js闭包引起的事件注册问题介绍
10-22
总结来说，JavaScript中的闭包在事件注册中可能会引发问题，因为它们可以访问并保持对外部变量的引用。为了避免这类问题，我们需要理解作用域和闭包的工作原理，并适当地创建局部作用域来隔离变量。了解这些概念对于...
JavaScript注册事件
qq_43093129的博客
04-21 307
1. 两种注册事件的方式 第一种方式：在标签中使用事件句柄，在事件句柄后编写js代码，事件句柄对应的事件发生之后，“注册”在事件句柄当中的代码被监听器调用。注意，这种方式代码顺序有要求！ <!--注册事件的第一种方式：在标签中使用事件句柄--> <script> /*sayHello()函数在页面打开的时候并不会执行，只是当页面打开的过程中完成对事件的绑定， * 完成对事件的注册，以后只有当该事件发生之后sayHello()函数才会
js 注册事件的两种方式详解，传统注册事件与方法监听注册事件（addEventListener）
weixin_44642057的博客
10-22 3762
在这里，我对js注册事件的两种方式做一个详解，他们分别是传统的注册事件和方法监听注册事件，下面来做一个详细的比较 传统注册事件： 利用on开头的事件 如onclick 特点：注册事件的唯一性，同一个元素只能设置一个处理函数最后注册的处理函数将会覆盖前面注册的所有处理函数 方法监听事件注册方式： addEventListener() 是一个方法 特点：同一个元素，同一个事件可以注册多个监听器 ，多个事件处理程序 用法 addEventListener（type,listener[u...
JS-注册事件-推荐动态注册
dxm809的博客
02-08 646
两种方式： 1.在元素上注册； 2.动态注册 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="utf-8" /&gt;     &lt;title&gt;&lt;/title&gt;     &lt;script&gt;         //直接定义的方法为window对象的方法
JS如何注册事件和解绑事件
qq_36949892的博客
06-16 615
使用原生js 将事件的匿名函数赋值为null; onload = function (){ var a = document.getElementById("a"); //注册事件 a.onclick = function (){ console.log("a") } //事件解绑 a.onclick = null; } 使用jQuery 使用jquery中的on方法来注册...
js事件高级-注册事件(绑定事件)
phoebemeng的博客
07-14 703
注册事件的三种方式
js事件
胡老汉的博客
05-07 680
js事件 onclick 单击事件 鼠标点击某个对象 ondbclick 双击事件 onfocus 得到焦点事件（焦点进入控件的事件） onblur 鼠标失去焦点事件（焦点离开控件的事件） onkeydown 键按下事件 onkeypress ...
js原生事件怎么注册
凡事预则立，不预则废
04-04 715
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script> function calc(){ console.log("d"); } </scrip
js注册点击事件代码
06-02
可以使用以下代码注册点击事件： ```javascript document.getElementById("myButton").addEventListener("click", function(){ // 执行你的代码 }); ``` 这里的 `myButton` 是你想要注册点击事件的按钮的 ID。当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值