jsDOM三之事件类型

jsDOM之事件类型

Javascript事件大致可以分成五大类：
页面相关事件
鼠标事件
键盘事件
表单相关事件
编辑相关事件

页面相关事件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-onmOKzwL-1596379030992)(C:\Users\dell\Desktop\我的前端博客\images2\dom.png)]$

鼠标事件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OItbfjWv-1596379030994)(C:\Users\dell\Desktop\我的前端博客\images2\dom5.png)]$

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件属性检测</title>
<script type="text/javascript" src="JS/tool.getBrowserType.js"></script>
</head>

<body>
    <div id="info" style="width:600px; color:#FFF; border:#036 5px solid; background-color:#F90; padding:20px;">
    	点击我
    </div>
    <script language="javascript">
		var infoObj = document.getElementById("info");
		
		function eventInfo(evt){
			var evt = (evt) ? evt : window.event;
			
			var str = 'Event的type:'+evt.type+'<br>';
			str += 'Event的button:'+evt.button+'<br>';
			str += 'Event的wheelDelta:'+evt.wheelDelta+'<br>';
			str += 'Event的detail:'+evt.detail+'<br>';
			str += 'Event的clientX:'+evt.clientX+'<br>';
			str += 'Event的clientY:'+evt.clientY+'<br>';
			str += 'Event的offsetX:'+evt.offsetX+'<br>';
			str += 'Event的offsetY:'+evt.offsetY+'<br>';
			str += 'Event的screenX:'+evt.screenX+'<br>';
			str += 'Event的screenY:'+evt.screenY+'<br>';
			str += 'Event的pageX:'+evt.pageX+'<br>';
			str += 'Event的pageY:'+evt.pageY+'<br>';
			str += 'Event的x:'+evt.x+'<br>';
			str += 'Event的y:'+evt.y+'<br>';
			
			infoObj.innerHTML = str;
		}
		
		document.onclick = eventInfo; //单击事件
		document.ondblclick = eventInfo; //双击事件
		document.onmousedown = eventInfo; //双击事件
		
		infoObj.onmouseup = eventInfo; //鼠标按下后松开鼠标
		infoObj.onmouseover = eventInfo; //鼠标进入目标对象
		infoObj.onmouseout = eventInfo; //鼠标离开目标对象
		infoObj.onmousemove = eventInfo; //鼠标移动

		if (getBrowserType().info=='ff'){
			window.addEventListener('DOMMouseScroll', eventInfo, false);
		}else{
			window.onmousewheel = document.onmousewheel = eventInfo;
		}
	</script>
</body>
</html>

鼠标事件，图片随着鼠标动：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>心随我动_鼠标事件特效</title>
<script type="text/javascript" src="JS/tool.getBrowserType.js"></script>
<style type="text/css">
	#heart {
		width:360px;
		height:230px;
		background:url(Images/heart.gif);
		position:absolute;
		left:0px;
		top:0px;
	}
</style>
</head>
<body>
    <div id="heart"></div>
    <script language="javascript">		
		document.onmousemove =  function (event){
			var event = event ? event : window.event;
			
			var heart = document.getElementById("heart");
			heart.style.left = (event.clientX-180)+'px';
			heart.style.top = (event.clientY-230)+'px';
		}
	</script>
</body>
</html>

键盘事件：
keydown：某个键盘按键被按下
keypress：某个键盘按键被按下并松开
keyup：某个键盘按键被松开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件属性检测</title>
</head>

<body>
    <div id="info" style="width:600px; color:#FFF; border:#036 5px solid; background-color:#F90; padding:20px;">
    	点击我
    </div>
    <script language="javascript">
		var infoObj = document.getElementById("info");
		
		function eventInfo(evt){
			var evt = (evt) ? evt : window.event;
			
			var str = 'Event的type:'+evt.type+'<br>';
			str += 'Event的keyCode:'+evt.keyCode+'<br>';
			str += 'Event的charCode:'+evt.charCode+'<br>';
			str += 'Event的altKey:'+evt.altKey+'<br>';
			str += 'Event的ctrlKey:'+evt.ctrlKey+'<br>';
			str += 'Event的shiftKey:'+evt.shiftKey+'<br>';
			
			infoObj.innerHTML = str;
		}
		
		//绑定键盘事件
		window.onkeydown  = eventInfo;
		window.onkeypress  = eventInfo;
		window.onkeyup  = eventInfo;
		
		//IE中键盘事件绑定在document上
		document.onkeydown  = eventInfo;
		document.onkeypress  = eventInfo;
		document.onkeyup  = eventInfo;
	</script>
</body>
</html>

表单相关事件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NqECXGJ1-1596379030997)(C:\Users\dell\Desktop\我的前端博客\images2\dom7.png)]$

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格操作</title>
<style type="text/css">
	.myTable {
		background:#069;
		text-align:center;
	}
	.myTable th {
		background:#069;
		padding:5px;
		color:#FFF;
	}
	.myTable td {
		background:#FFC;
		padding:5px;
	}
	.myTable .deal span {
		display:inline-block;
		margin:0px 5px;
	}
</style>
<script type="text/javascript" src="JS/tool.domElement.js"></script>
<script type="text/javascript" src="JS/tool.getBrowserType.js"></script>
<script type="text/javascript">
	function tableDeal(tableId){
		this.tableObj = document.getElementById(tableId);
		this.rowId = 0;
		cleanWhitespace(this.tableObj);
	}
	tableDeal.prototype.insertTr = function(){
		var rowIdNow = ++this.rowId;
		var newTr = '\n';
		newTr += '<tr>';
		newTr += '<td class="rowId"><input type="checkbox" name="rowId" id="rowId_'+rowIdNow+'" value="'+rowIdNow+'"/></td>';
		newTr += '<td class="realName">曾韦伯'+rowIdNow+'</td>';
		newTr += '<td class="sex">先生</td>';
		newTr += '<td class="phone">15858581698</td>';
		newTr += '<td class="deal">';
		newTr += '<span class="del">删除</span>';
		newTr += '<span class="up">上移</span>';
		newTr += '<span class="down">下移</span>';
		newTr += '</td>';
		newTr += '</tr>';
		
		var tableBody = this.tableObj.childNodes[1];
		tableBody.innerHTML += newTr;
	}
	tableDeal.prototype.deleteTr = function(){
		var rowIdObjs = document.getElementsByName('rowId');
		for(var i=0;i<rowIdObjs.length;i++){
			if(rowIdObjs[i].checked){
				var nowTr = rowIdObjs[i].parentNode.parentNode;
				var tableBody = this.tableObj.childNodes[1];
				cleanWhitespace(tableBody);
				tableBody.removeChild(nowTr);
			}
		}		
	}
	tableDeal.prototype.chkAll = function(){
		var rowIdObjs = document.getElementsByName('rowId');
		
		for(var i=0;i<rowIdObjs.length;i++){
			if(rowIdObjs[i].checked){
				rowIdObjs[i].checked = false;
			}else{
				rowIdObjs[i].checked = true;
			}
		}		
	}
	
	window.onload = function(){
		var myTableDeal = new tableDeal('myTable');
		
		var btnInsertObj = document.getElementById('btnInsert');
		btnInsertObj.onclick = function(){
			myTableDeal.insertTr();
		}
		var btnChkAllObj = document.getElementById('btnChkAll');
		btnChkAllObj.onclick = function(){
			myTableDeal.chkAll();
		}
		var btnDeleteObj = document.getElementById('btnDelete');
		btnDeleteObj.onclick = function(){
			myTableDeal.deleteTr();
		}
	}
</script>
</head>

<body>
<table class="myTable" id="myTable" width="100%" border="0" cellspacing="1" cellpadding="0">
    <thead>
    	<tr>
            <th></th>
            <th>姓名</th>
            <th>性别</th>
            <th>联系电话</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        	<td class="rowId"><input type="checkbox" name="rowId" id="rowId_0" value="0"/></td>
            <td class="realName">曾韦伯</td>
            <td class="sex">先生</td>
            <td class="phone">15858581698</td>
            <td class="deal">
            	<span class="del">删除</span>
            	<span class="up">上移</span>
                <span class="down">下移</span>
            </td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
            <td colspan="5">
            	<input type="button" value="选择/反选" id="btnChkAll"/>
            	<input type="button" value="删除选中" id="btnDelete"/>
                <input type="button" value="新增一行" id="btnInsert"/>
            </td>
        </tr>
    </tfoot>
</table>
<div id="info"></div>
</body>
</html>

编辑相关事件：

pe=“button” value=“选择/反选” id=“btnChkAll”/>

```

编辑相关事件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JLm9Xvyc-1596379031000)(C:\Users\dell\Desktop\我的前端博客\images2\dom8.png)]$

jsDOM三之事件类型

jsDOM之事件类型

猜你喜欢