学习JavaScriptday05

最新推荐文章于 2024-02-08 00:53:17 发布

Dc_高

最新推荐文章于 2024-02-08 00:53:17 发布

阅读量101

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/baidu_39105268/article/details/80658881

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript事件处理：

事件包括：鼠标事件，键盘事件，状态改变事件

鼠标事件：onclick(鼠标点击)，onmouseover(鼠标移到元素上),onmouseout(鼠标离开元素),onmousedown(鼠标在元素上点击),onmouseup(鼠标在元素松开),onmousemove(鼠标在元素上移动)

键盘事件：onkeydown(键盘按下时)，onkeyup(键盘松开时)

状态改变时：onchange(值发生改变时)，onload(页面加载完事件)，onblur(失去焦点时)，onfocus(得到焦点事件时)，onsubmit(当表单提交时)

1.在元素中添加事件：

<input type="text" οnkeydοwn="return keydownfn(event)">

2.通过js代码动态绑定事件，好处是：html代码和JS代码分离有便于维护和升级

var mybtn = document.getElementById("mybtn");
//绑定事件
mybtn.onclick = function(){
    alert("按钮事件绑定成功");
}

3.事件的取消：

通过返回值为false取消事件，如果在标签的事件中执行 return false，那么这次事件将被取消

小练习：创建一个div，添加鼠标按下事件，鼠标松开事件，鼠标移动事件，当鼠标按下会添加一张图片，并获取鼠标按下的坐标。

<style type="text/css">
	div{/* 设置div样式 */
		width:200px;
		height:200px;
		background-color:green;
	}
	img{/* 设置图片样式 */
		width:100px;
		height:100px;
		position:absolute;
	}
</style>
<script type="text/javascript">
onclick = function(){
    var img = document.createElement("img");//创建一个新元素
    img.src = "a.jpg";//给元素设置图片
    document.body.appendChild(img);//添加到页面中，添加到body中去
    //给图片设置位置
    img.style.left = event.clientX-50+"px";//将鼠标移动到图片的中心位置去
    img.style.top = event.clientY-50+"px";
}
function downfn(event){
    console.log("鼠标按下了");//在控制台测试鼠标按下操作
    console.log("x:"+event.clientX+"y:"+event.clientY);//获取鼠标按下的坐标

}
function upfn(){
     console.log("鼠标松开了");
}
function movefn(){
    console.log("鼠标移动了");
}
</script>
<body>
	<div οnmοusedοwn="downfn(event)" οnmοuseup="upfn()" οnmοusemοve="movefn()"></div>
</body>

效果图：

4.Event对象

4.1 event对象中保存着和事件相关的信息，代表事件的状态

4.2 通过event获取鼠标的坐标：event.clientX , event.clientY

4.3通过event获取键盘的字符编码：event.keyCode event.which

小练习：

<script type="text/javascript">
function keydownfn(event){
	//获取字符编码兼容性问题,通用写法，工作中使用方式
	var code = window.event ? event.keyCode:event.which;
//	var code = event.keyCode;//按下后出现字符编码
//	var code = event.which;
	console.log("键盘按下"+code);
	//把编码转换成字符
	var str = String.fromCharCode(code);
	console.log(str);
	//通过字符规律判断是否是数字，48-57为数字
	if(code>=48&&code<=57){
		return true;
	}else{
		return false;
	}
}
function keyupfn(){
	console.log("键盘松开");
}
//加载完成事件
onload = function(){
	var mybtn  = document.getElementById("mybtn");
	mybtn.onclick = function(){
	    alert("按钮事件绑定成功");
	}
}
</script>
</head>
<body>
	<input type="text" οnkeydοwn="return keydownfn(event)" οnkeyup="keyupfn()">
	<input type="button" value="动态绑定" id="mybtn">
</body>

4.4 通过event获取事件源

小练习：

<script type="text/javascript">
function btnfn(){
    //获得事件的事件源，添加给了按钮就是按钮，添加给谁就是谁
    alert(event.tatget.nodeName);//target:目标
    //考虑到浏览器兼容性问题，个别浏览器不支持target
    alert(event.srcElement.nodeName);
    //以下写法有一种成功就可以，在工作中可以使用
    var obj = event.target || event.srcElement;
    alert(obj.nodeName);
}
function divfn(){
    //得到事件源
    var obj = event.tar.get || event.srvElement;
    alert(obj.nodeName);
}
</script>
<body>
  <div οnclick="divfn()">
    <p>
        <input type="button" value="按钮">
    </p>
  </div>
</body>

练习：做一个简单的计算器

<style type="text/css">
	#panel{
		width: 200px;
		margin: 0 auto;
		border:4px solid #ccc;
		/* 因为内部元素浮动 */
		overflow: hidden;
		border-radius:20px;
	}
	#panel input{
		width: 45px;
		height: 45px;
		float:left;
		margin:4px 0px 4px 4px;
		border:1px solid #ccc;
		border-radius:15px;
		background-color:#afeeee;
	}
	/* 显示文本的标签 */
	P{
		margin:4px 0 4px 4px;
		width: 141px;
		float:left;
		border:1px solid #ccc;
		border-radius: 10px;
		height: 42px;
		line-height: 37px;
	}
</style>
<script type="text/javascript">
function calfn(){
    //获取事件源
    var obj = event.target || event.srcELement;
    //找出按钮
    if(obj.nodeName =="INPUT"){//判断当提示为INPUT的时候执行
        //获取p标签
        var p = document.getElementsByTagName("p")[0];
        if(obj.value=="="){//判断点击等号按钮的时候执行=
            p.innerText= eval(p.innerText);//eval:把东西取出来计算再放回去
        }else if{//点击C清除按钮的时候执行C
            p.innerText="";//清楚内容，为空字符串
        }else{//数字或运算符
            p.innerText += obj.value;
        }
    }
}
</script>
<body>
	<!-- 外层大的div -->
	<div id="panel" οnclick="calfn()">
		<!-- 上面单行div -->
		<div>
			<p></p>
			<input type="button" value="C">
		</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>
	</div>
</body>

效果图：

Dc_高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习JavaScriptday05

JavaScript事件处理：事件包括：鼠标事件，键盘事件，状态改变事件鼠标事件：onclick(鼠标点击)，onmouseover(鼠标移到元素上),onmouseout(鼠标离开元素),onmousedown(鼠标在元素上点击),onmouseup(鼠标在元素松开),onmousemove(鼠标在元素上移动)键盘事件：onkeydown(键盘按下时)，onkeyup(键盘松开时)状态改变时：o...
复制链接

扫一扫