onclick事件绑定方法总结

最新推荐文章于 2022-12-01 00:05:42 发布
最新推荐文章于 2022-12-01 00:05:42 发布
阅读量1.4k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56506584/article/details/117673864
版权

onclick事件绑定方法总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="t11()">
		<script type="text/javascript">
			function t1(){
				console.log(111);
			}
		</script>
		<!-- onclick 鼠标点击某个对象，所有HTML都可以使用该事件。JavaScript:脚本，适用于代码比较少的情况 -->
		<input type="button"value="按钮" onclick="t1()">
		<input type="button"value="按钮1" onclick="javascropt:console.log('ok');">
		<br>
		<script type="text/javascript">
			function t2(){
				console.log(222);
			}
		</script>
		<!-- onchange事件:当内容发生改变时出发:输入框、文本域、单选复选、下拉列表 -->
		<input type="text" onchange="t2()">
		<textarea onchange="t2();"></textarea>
		<input type="radio"onchange="t2();" name=sex><input type="radio"onchange="t2();" name=sex>
		<input type="checkbox" onchange="t2()" name="" id="" value="" />
		<!-- onchange事件通常和select下拉列表一起使用 -->
		<select onchange="t2()">
			<option value="">河南省</option>
			<option value="">北京市</option>
			<option value="">河北省</option>
		</select>
		<!-- onfocus：获取焦点时触发；onblur：失去焦点时触发 -->
		<script>
			function t3(){
				console.log("获取焦点")
			}
			function t4(){
				console.log("失去焦点")
			}
		</script>
		<textarea onfocus="t3()" onblur="t4()"></textarea>
		<br>
		
		<script>
			function t5(){
				return true;
			}
		</script>
		<!-- onsubmit仅用于form标签，提交表单时触发，注意：onsubmit触发方法必须有 返回值true或false -->
		<form action="https://www.baidu.com/s" onsubmit="return t5();">
			<input type="text" name="wd">
			<input type="submit" value="百度一下">
		</form>
		
		<script type="text/javascript">
			/* 鼠标移到某元素之上 */
			function t6(){
				console.log("over")
			}
			function t7(){
				console.log("out")
			}
			function t8(){
				console.log("move")
			}
		</script>
		<div style="width: 200px;height: 200px;background-color: red; "onmouseover="t6()" onmouseout="t7()"onmousemove="t8()"></div>
		
		<script type="text/javascript">
			function t9(){
				console.log("onkeydown")
			}
			function t10(){
				console.log("onkeyup")
			}
		</script>
		<!-- onkeydown某个键盘的键被按下时触发 onkeyup被松开时触发-->
		<textarea onkeydown="t9()"  onkeyup="t10()"></textarea>
		
		<!-- onload -->
		<script type="text/javascript">
			function t11(){
				var element=document.getElementById("test");
				console.log(element+"ssssssssssss")
			}
		</script>
		<input type="text" id="test">
		<script type="text/javascript">
			var element=document.getElementById("test");
			console.log(element)
		</script>
		
		<script type="text/javascript">
			function test(){
				console.log("test")
			}
		</script>
		<!-- on+对应事件，标签属性 -->
		<button type="button" onclick="test()">按钮1</button>
		
		<input type="button" id="bnt1" value="按钮2" />
		<script type="text/javascript">
			var element =document.getElementById("bnt1")
			element.onclick=function(){
				console.log("test1");
			}
		</script>
		
		<input type="button"  id="bnt2" value="按钮3" />
		<script type="text/javascript">
			var element =document.getElementById("bnt2")
			element.addEventListener("click",function(){
				console.log("test2");
			});
		</script>
	</body>
</html>
好人好报i
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js最常用的click事件3种方法
yuyexiaohan的博客
08-05 1万+
js最常用的click事件3种方法 转载自：https://www.cnblogs.com/liaohongwei/p/9717511.html 1. onclick=name() <!DOCTYPE html> <html leng="en"> <head> <meta charset="utf-8"> &l...
JavaScript给按钮绑定点击事件（onclick）的方法
12-29
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> [removed] function displayDate() { document.getElementById(demo)[removed]=Date(); } [removed] </head> <body> <h1>My First JavaScript</h1> <p id=demo>This is a paragraph.</
事件绑定(onclick,onfocus,onblur)
jakelihua
12-01 2255
事件绑定,onclick,onfocus,onblur
JavaScript OnClick事件以及事件绑定方法
opo77_的博客
04-27 1万+
事件之鼠标点击事件 事件 说明 onclick 鼠标点击事件 onmouseover 鼠标经过事件 onmouseout 鼠标移开事件 onchange 文本框内容改变事件 onselect 文本框内容被选中事件 onfocus 光标聚集 onblur 光标离开 onload 网页导入 onunload 关闭网页 那么要怎么做的呢？ 1、将HTM...
JS事件之绑定事件
每天进步一点点
05-11 1万+
JS中的事件是js中很重要的一部分内容，充分理解事件机制是必不可少的。 JS中事件分类： 鼠标事件：onclick, ondbclick, onmouseover,onmousedown, onmouseup,onmousemove,onmouseout等 键盘事件：onkeyup，onkeydown,onkeypress... 表单事件：onsubmit，onblur，onfoucs
如何给一个元素绑定onclick事件
weixin_46527864的博客
03-12 1354
绑定onclick事件 结果如下 点击自身修改样式： 效果如下 总结 ： ele.style.属性+属性值。 可以修改border bgckground color font …
关于JavaScript中事件绑定的方法总结
11-28
总结来说，JavaScript的事件绑定方式多种多样，可以根据项目需求和浏览器兼容性选择合适的方法。在现代开发中，`addEventListener` 和 jQuery 的 `on()` 通常是首选，因为它们更灵活且兼容性好。理解并熟练掌握这些...
jquery 给动态生成的标签绑定事件的几种方法总结
10-18
以下是对jQuery给动态生成的标签绑定事件的几种方法的详细解析： 1. **使用`.on()`方法** `.on()`方法是jQuery 1.7引入的，它是`.bind()`, `.live()`, `.delegate()`等方法的增强版，特别适合处理动态生成的元素...
JS事件绑定的常用方式实例总结
01-19
本文实例讲述了JS事件绑定的常用方式。分享给大家供大家参考，具体如下： 常用的事件绑定的几种方式有三种： 直接在 dom 元素上进行绑定。...// onclick绑定 document.body.onclick = () => { consol
元素绑定click点击事件方法
09-03
总结来说，`click`事件和`click()`方法是JavaScript中用于处理用户点击的重要工具，它们可以与`addEventListener`、`attachEvent`以及`dispatchEvent`等方法结合使用，以实现更复杂的交互逻辑。开发者需要关注浏览器...
HTML 练习绑定onclick事件
weixin_30323631的博客
03-15 889
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p onclick="func1(this)">hello p&lt...
为多个checkbox绑定单击事件
空间风暴
05-22 774
当单击一个checkbox时触发一个方法，先判断其是否选中，然后执行相应的操作： /** **************** 选择框点击事件绑定 ************* */ function checkboxOnClick() { var a=[]; $("input[type=checkbox]").click(function() { var checkb
给按钮添加事件的方法
maxchenBug的博客
02-13 5613
给按钮添加事件的方法 例子：给按钮添加绑定事件： &lt;button type="submit" id="btn"&gt;btn&lt;/button&gt; 第一种:$("#btn").click(function(event){ 第二种:document.getElementById('#foo').addEventListener('cli...
js click 与 onclick 事件绑定,触发与解绑
sinat_27261621的博客
05-15 2044
js click 与 onclick 事件绑定,触发与解绑   click 与 onclick 1.onclick 事件会在对象被点击时发生。 function test() { alert(“我是行间事件”); } 当点击id="btn1"时,触发onclick事件   2.onclick事件会在click事件之前执行 var btn2 = document.g...
element onclick 动态创建元素并绑定onclick事件
weixin_30888413的博客
08-05 2206
<html> <head> <meta charset="UTF-8"> <title>b</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script&...
onclick绑定事件注意点
hcy48的博客
09-21 1136
一、 自定义函数添加onclick事件写法注意。 错误写法：element.onclick = addclass(className); 正确写法：element.onclick = function(){ addclass(className); }二、括号问题 onclick事件是在html内写的，还是在script中写的，这是不同的。onclick事件如果在html内写的话，引号内代表
js动态添加input按钮并给按钮增加onclick的函数事件(带参数)
热门推荐
weixin_40321535的博客
12-01 6万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> function bt1(value, id) { if(!document.get
click().onclick的使用和区别，自动触发
qq_41624138的博客
08-24 2270
if (index >= 4) index = 0; as.eq(index).click(); // 每当获取到as中的一个值时， click都会调用一下（ 前面已经定义好的！！！）on("click",function(){}) 这个click（）是怎么调用的？和onclick有什么区别？ 看例子： <button id="btn">111</button> //第一种：click() //a:人工点击触发 $('#btn').on('c
react的事件绑定原理
最新发布
07-11
React中的事件绑定原理是基于合成事件（SyntheticEvent）的机制。合成事件是React提供的一个跨浏览器的事件系统，它将浏览器原生事件进行封装，提供了统一的接口和一些优化。 在React中，通过使用类似于HTML中的onXxx属性来绑定事件，例如onClick、onKeyDown等。当组件渲染到页面上时，React会在底层使用事件委托的方式将这些事件绑定到最外层的容器元素上。 当用户触发事件时，React会创建一个合成事件对象，并将其传递给事件处理函数。合成事件对象包含了与原生事件相似的属性和方法，但是它是一个跨浏览器的封装，使得开发者可以不用考虑不同浏览器之间的差异。 另外，React还通过使用事件池（Event Pool）来提高性能。事件池是一种重复利用合成事件对象的机制，每次触发事件时，React会重置合成事件对象的属性并将其重新传递给下一个事件处理函数。这样可以减少内存分配和垃圾回收的开销，提高性能。 总结起来，React的事件绑定原理是通过合成事件机制实现的，它将浏览器原生事件进行封装，并使用事件委托和事件池来提高性能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值