Event事件

最新推荐文章于 2025-04-01 10:39:04 发布

原创最新推荐文章于 2025-04-01 10:39:04 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #计算器

JSP基础专栏收录该内容

14 篇文章

订阅专栏

一.事件
1.鼠标事件
onclick——单击事件,ondblclik——双击事件,
onmousedown——鼠标按钮被按下,onmouseup——鼠标按钮被松开
onmouseover——鼠标移到某元素之上,onmouseout——鼠标从某元素移开

2.键盘事件
onkeydown——某个按键被按下,onkeyup——某个按键被松开，onkeypress——某个按键被按下并松开

3.状态改变事件
onload——一张页面或一幅图像完成加载,onchange——域的内容被改变,onsubmit——确定按钮被点击
onfocus——元素获得焦点,onblur——元素失去焦点

二.event对象
常用属性：
clientX——鼠标指针的水平坐标clientY——鼠标指针的垂直坐标cancelBubble——取消事件的冒泡

自定义对象demo1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script>
	//直接创建对象
	function f1(){
		var student = new Object();
		student.name = "zhangsan";
		student.age = 25;
		student.work = function(){
			alert("我在努力的学JS.");
		}
		//使用对象
		alert(student.name);
		alert(student.age);
		student.work();
	}
	//采用简化的方式直接创建对象
	function f2(){
		var teacher = {
			"name":"cang",
			"age":18,
			"work":function(){
				alert("我在教Java");
			}
		};
		alert(teacher.name);
		alert(teacher.age);
		teacher.work();
	}
	//声明构造器
	function Coder(name,age,work){
		//将传入的参数存储在对象上
		this.name = name;
		this.age = age;
		//job是对象属性，work是传入参数
		this.job = work;
	}
	//使用构造器创建对象
	function f3(){
		var coder = new Coder(
			"wangwu",28,
			function(){
				alert("我写Java程序");
			}		
		);
		alert(coder.name);
		alert(coder.age);
		coder.job();
	}
	//采用for in循环遍历对象
	function f4(){
		var teacher = {
			"name":"cang",
			"age":18,
			"work":function(){
				alert("我在教Java");
			}
		};
		for(p in teacher){
			console.log(p);
		}
	}
</script>
</head>
<body>
	<input type="button" value="按钮1" onclick="f1();">
	<input type="button" value="按钮2" onclick="f2();">
	<input type="button" value="按钮3" onclick="f3();">
	<input type="button" value="按钮4" onclick="f4();">
</body>
</html>

事件定义demo2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件定义</title>
<script>
//直接定义事件
	function f1(e){
		console.log(1);
		console.log(e);
	}
	//页面加载后
	window.onload = function(){
		//给按钮2绑定单击事件
		var b2 = document.getElementById("b2");
		b2.onclick = function(){
			console.log(2);
		}
	}
</script>
</head>
<body>
	<input type="button" value="按钮1" onclick="f1(event);">
	<input type="button" value="按钮2" id="b2">
</body>
</html>

冒泡机制demo3:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冒泡机制</title>
<style>
	div{
		border: 1px solid red;
		width: 300px;
		padding: 30px;
	}
	p{
		border: 1px solid red;
		padding: 30px;
	}
</style>
<script>
	function f1(e){
		alert("button");
		//取消冒泡
		//IE:{"cancelBubble":false}
		//其他:{"stopPropagation":function(){}}
		if(e.stopPropagation){
			e.stopPropagation();
		}else{
			e.cancelBubble = true;
		}
	}
</script>
</head>
<body>
	<div onclick="alert('div');">
		<p onclick="alert('p');">
			<input type="button" value="按钮" onclick="f1(event);">
		</p>
	</div>
</body>
</html>

计算器demo4:

<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .panel {
        border: 4px solid #ddd;
        width: 192px;
        margin: 100px auto;
        /*border-radius: 6px;*/
      }
      .panel p, .panel input {
        font-family: "微软雅黑";
        font-size: 20px;
        margin: 4px;
        float: left;
        /*border-radius: 4px;*/
      }
      .panel p {
        width: 122px;
        height: 26px;
        border: 1px solid #ddd;
        padding: 6px;
        overflow: hidden;
      }
      .panel input {
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
      }
    </style>
    <script>
    	window.onload = function(){
    		//给div绑定单击事件
    		var div = document.getElementById("jsp");
    		div.onclick = function(e){
    			//获取事件源
    			var obj = e.srcElement || e.target;
    			if(obj.nodeName=="INPUT"){
    				var p = document.getElementById("screen");
    				//判断按钮的值
    				if(obj.value == "C"){
    					p.innerHTML = "";
    				}else if(obj.value== "="){
    					try{
    						p.innerHTML = eval(p.innerHTML);
    					}catch(ex){
    						p.innerHTML = "";
    					}
    				}else{
    					p.innerHTML += obj.value;
    				}
    			}
    		}
    	}
    </script>
  </head>
  <body>
    <div class="panel" id="jsp">
      <div>
        <p id="screen"></p>
        <input type="button" value="C">
        <div style="clear:both"></div>
      </div>
      <div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">
        
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">
        
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">
        
        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">
        
        <div style="clear:both"></div>
      </div>
    </div>   
  </body>
</html>