jQuery事件

jQuery事件

事件,事件函数(事件方法)

 js:onXxx
			onclick();
			写在<script>内,ready()外;

jquery:没有on

			click();
			ready()内;
$(document).ready(function(){
   $("选择器").事件类型(function(){
      		... 
   });
});

windows事件:ready;

鼠标事件:

  1. click:单击事件
  2. mouseover():鼠标悬浮
  3. mouseout():鼠标离开
  4. 事件介绍

键盘事件

	1. keydown:按键 从上往下的过程
	2. keypress():按键被按压到 最底部
	3. keyup():松开按键

1.前端的一些事件、方法,会在某些情况下失效。 2.兼容性问题

例:通过event.keyCode指定具体的按键

			$("body").keydown(function(event){
				if(event.keyCode == 13){
					alert("回车。。。...");
				}
			});

表单事件

focus():获取焦点

blur():失去焦点

颜色值:可以使用 英语单词或者 #6位十六进制

​ a.#000000:黑色 #ffffff:白色

​ b.如果6位是两两相同的,则可以写出3位,#aabbcc 可以写成#abc

绑定事件与移除事件

$("选择器").click( function(){...});

绑定事件

​ $("选择器").bind("事件名",[数据],函数);

​ $("选择器").bind("click",function(){...});

​ $("选择器").bind("focus",function(){ ... });

批量绑定

​ $("选择器").bind({"事件名":函数,"事件名":函数 ,...,"事件名":函数})

移除事件

​ $("选择器").unbind("事件名");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				background: lightgray;
				height: 50px;
				 200px;
			}
		</style>

	</head>
	<body onload="init()" >
		<input type="text" id="username"/><br />
		name:<input type="text"  id="name"/>
		<input type="button" value="绑定" onclick="Bind()" />
		<input type="button" value="解绑" onclick="unBind()" />
		<div onmouseover="over()" onmouseout="out()">
			some text..
		</div>
		<p id="mytitle" >woshi</p>
		<h1>H1...</h1>
		<script type="text/javascript"	src="jquery-3.4.1.js">
		</script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("h1").click(function(){
					alert("单击事件");
				});
				$("div").bind("click",function(){
					alert("bind形式单击事件");
				});
				/*$("div").mouseover(function(){
					alert("鼠标悬浮");
				}).mouseout(function(){
					alert("鼠标离开");
				});*/
				$("body").keydown(function(event){
					if(event.keyCode == 13){//通过keyCode来指定摸一个按键。event.keyCode event参数
					alert("按压..");
					}
				})/*.keypress(function(){
					alert("压到底了");
				}).keyup(function(){
					alert("松开");
				})*/;
				
				$("#username").focus(function(){
					//当前元素就是文本框$("#username"),即 id="uid"的文本框
					//当前元素可以用this表示
					$(this).css("background-color","red");
				});
				$("#username").blur(function(){
					$(this).css("background-color","white");
				});
			});//ready结尾
	
			$(function(){
				var $title = $("#mytitle");
				alert($title.html());
			});
			
			
			function init(){
				var	title = document.getElementById("mytitle");
				alert(title.innerHTML+"kkk");
			}
			
			
			/*function over(){
				alert("悬浮");
			}
			
			
			function out(){
				alert("离开");
			}*/
			function Bind(){
				$("#name").bind("click",function(){
					alert("click..");
				});
			}
			function unBind(){
				$("#name").unbind()("click");
			}
		</script>
	</body>
</html>

原文地址:https://www.cnblogs.com/x-i-n/p/12078351.html