js.事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body onload = "loaded()">
		<!--js三大事件：鼠标事件，键盘事件和HTML事件-->
		<button onclick="alert('我被点击了')">鼠标单击</button>  <!--行内脚本模式-->
		<button ondbclick="dbclick_fun()">鼠标双击</button><!--内联模式-->
		<button onmousedown="down_fun()" onmouseup="up_fun()">鼠标按下和抬起</button>
		<button onmousemove="move_fun()">鼠标移动</button>
		<button onmouseover="over_fun()">鼠标悬停</button>
		<button onmouseenter="enter_fun()" onmouseout="out_fun()" style="width:150px;">鼠标移入和离开</button>
		<button onmouseenter="enter_fun()" onmouseleave="leave_fun()" style="width:150px;">鼠标移入和离开</button>
		<script>
			/*
		常用	 * click  鼠标单击触发
		常用	 * dbclick  鼠标双击触发
		常用	 * mousedown  鼠标按下触发
		常用	 * mouseup  鼠标抬起触发
			 * mousemove  鼠标移动触发，
		常用	 * mouseover  鼠标悬停触发，作用于自身及子元素，轮播图，
			 * mouseenter  鼠标移入触发，作用于自身，
		常用	 * mouseleave  鼠标离开触发，作用于自身，
			 * mouseout  鼠标离开触发，作用于自身及子元素，
			 */
			function click_fun(){
				console.log("鼠标单击了");
			}
			function dbclick_fun(){
				console.log("鼠标双击了");
			}
			function down_fun(){
				console.log("鼠标按下了");
			}
			function up_fun(){
				console.log("鼠标抬起了");
			}
			function move_fun(){
				console.log("鼠标移动了");
			}
			function over_fun(){
				console.log("鼠标悬停了");
			}
			function enter_fun(){
				console.log("鼠标移入了");
			}
			function out_fun(){
				console.log("鼠标移出");
			}
			function leave_fun(){
				console.log("鼠标离开");
			}
//			var btn = document.getElementsByTagName("button")[6];
//			btn.onclick = function(){
//				
//			}动态绑定模式
		</script>
		<input type="text" id = "input" name="userName" placeholder="请输入用户名" onkeypress="key_press(this.id)"/>
		<script>
			/*
			 * 键盘事件：
			 * keydown  键盘按下时触发
			 * keyup  键盘抬起时触发
			 * keypress  按下产生字符的按键时触发，忽略shift，ctrl，alt，F1-F12等功能键，返回上一次键入的值
			 */
			function key_down(a){
				console.log(document.getElementById(a),value);
			}
			function key_up(a){
				console.log(document.getElementById(a),value);
			}
			function key_press(a){
				console.log(document.getElementById(a),value);
			}
		</script>
		<input type="text" name="name" placeholder="请输入" onselect="selector(this.name)"/>
		<input type="text" name="sex" onchange="change(this.name)"/>
		<input type="text" name="some" onfocus="on_focus()" onblur="on_blur()"/>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<script>
			/*
			 * HTML事件
			 * load  网页加载完成处理
			 * select  元素被选中时触发，tab选中元素
			 * change  元素内容发生改变的时候触发
			 * focus  输入框聚焦的时候触发，选中元素或文本
			 * blur  输入框失焦的时候触发
			 * scroll  网页滚动的时候触发
			 */
			function loaded(){
				console.log("文档加载完成");
			}
			function selector(name){
				var names = document.getElementsByName(name)[0];
				console.log(names);
				var texts = names.value;
				console.log(texts);
			}
			function change(name){
				var names = document.getElementsByName(name)[0];
				console.log(names);
				var texts = names.value;
				console.log(texts);
			}
			function on_focus(){
				console.log("聚焦");
			}
			function on_blur(){
				console.log("失焦");
			}
			window.onscroll = function(){
				console.log("滚动");
			}
		</script>
	</body>
</html>
猜你喜欢
