JS

最新推荐文章于 2023-07-24 09:53:44 发布

信代码，得永生

最新推荐文章于 2023-07-24 09:53:44 发布

阅读量93

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_23979811/article/details/108231103

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、事件

1、什么是事件
    通常都是由用户行为来激发的操作
2、触发事件的行为
    所有的事件在绑定时，必须加 on
    1、鼠标事件
        click事件：当鼠标单击元素时出发该事件
        mouseover：当鼠标移入进元素时的事件
        mouseout：当鼠标移出元素的事件
        mousemove：当鼠标在元素内移动时的事件
    2、键盘事件
        keydown:当键位按下时所激发的事件
        keypress:当键位按下时所激发的事件
        keyup：当键位抬起时所激发的事件
    3、元素改变事件
        load：当元素加载完成时所出发的事件（body）
        change：当选项发生改变时所触发的事件(select)
        focus:当元素获取焦点时所出发的事件(文本框类)
        blur：当元素失去焦点时所触发的事件(文本框类)
        submit：当表单被提交时所触发的事件（表单）

2、绑定事件

1、在元素中绑定事件（on） eg:onclick
    <元素 on时间名=" "></元素>
2、在js中动态的为元素绑定事件（推荐使用）
     DOM对象.on事件名 = function（）{ }
    eg：
        var main = document.getElementById("main");
        main.onclick = function（）{console.log("hello");}
    注意：在js动态绑定事件中，允许使用this来表示触发当前事件的DOM对象。

3、时间行为

1、状态改变事件
    load事件
        通常为body绑定load事件，目的是为了在所有内容都加载完成之后再实现一些初始化操作
        1、<body onload="函数()">
        2、JS中动态绑定
            window.onload = function(){}
       eg://等待网页加载好之后在执行，那无论代码写在哪里，都不影响调用。
         window.onload = function(){
			but1.onclick = funciton(){
				alert("点你咋地");
			}
		}
    submit 事件
        只有表单被提交时才会被触发。
        注意：该事件需要一个boolean返回值来通知表单是否要继续提交。如果返回true，则可以提交表单，否则，组织表单提交。
        
        JS中动态绑定：
        表单对象.onsubmit = function(){
            return true/false;
        }

4、状态事件

1、change事件
    主要场合：使用在select中的，每当选项发生改变时就会激发一次该事件
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select id="orea">
		<option value="-1">请选择</option>
		<option value="0">河南</option>
		<option value="1">安徽</option>
		<option value="2">江苏</option>
		<option value="3">浙江</option>
	</select>
	<select id="city"></select>
	<script>
		var arr = [
				["郑州","漯河","洛阳","南阳","信仰","周口"],
				["合肥","阜阳","巢湖","蚌埠","淮南","淮北"],
				["南京","苏州","无锡","常州","南通","徐州"],
				["杭州","宁波","温州","绍兴","衢州","绍兴"],
				];
		function fun1(){
			var elem = document.getElementById("orea");
			var cit = document.getElementById("city");
			var val = elem.value;
			var opt = "";
			if(val != -1){
				for (var i = 0; i < arr[val].length; i++) {
					console.log("i");
					opt += "<option value="+i+">"+arr[val][i]+"</option>";
				}
				cit.innerHTML = opt;
			}else{
				opt += "<option value=</option>";
				console.log("hello world!");
				cit.innerHTML = "请选择";
			}
			
		}
		window.onload = function(){	
			var elem = document.getElementById("orea");				
			elem.onchange = function(){
				fun1();		
				console.log("hello");
			}
		}
	</script>
	
	
</body>
</html>

2、事件对象 - event
    1、什么时事件对象
        全称：事件参数对象，简称为事件对象
        任何一个事件被出发后，都会自动产生一个event对象，event对象中会包含与当前事件相    
        关的一些属性和方法。
    2、获取event 对象
        1、html 元素中绑定事件
            <ANY on时间名 = "btnClick(event)">
            <script>
                function btnClick(event){
                    event 表示的就是事件对象。
                }
            </script>
        2、在JS中动态为元素绑定事件。
            var d1 = document.getElementById("d1");
            d1.onclick = function(event){
                event表示的就是事件对象。
            }

3、事件对象的常用属性。
    1、事件源
        1、什么是事件源？ 触发当前事件的元素是谁
        2、获取事件源
            event.target   得到的是一个DOM对象
    2、鼠标事件属性
            var x = event.offsetX;
            var y = event.offsetY;
        获取鼠标在元素上的坐标点，以元素的左上角为（0，0）进行计算。
    3、键盘事件的属性
        键盘事件：keydown（任何按下键都触发），keypress（只触发输出键），keyup    
        keydown，keypress事件中允许增加一个返回值，通知浏览器是否要正常处理按下的字        
        符。返回值true，则正常显示字符，返回值false，则不显示字符。
        keydown which：键位码。
<body>
	用户名:<input type="text" id="uname">
	
	<script>
		window.onload = function(){
			var elem = document.getElementById("uname");
			console.log(elem);
			elem.onkeypress = function(){
				//返回false，无法出现字符。true可以出现字符。
				return true;
			}
		}
	</script>
	
</body>
        keydown事件：（键位验证）
        只要按下键位，就会触发keydown。
        属性：which  按下的键位码。
        keypress事件：（字符验证）
        只要由字符输出时才会触发该事件。
        属性：which 输出字符的ASCII码

事件冒泡

阻止事件冒泡：事件重叠部分，只想要一个有反应。
    event.stopPropagation()
#三个重叠的颜色框，如何实现点击一个，只有这一个有响应，阻止其它响应。
<html>
<head>
	<title>冒泡</title>
	<style type="text/css">
		#d1{
			width:400px;
			height:400px;
			background: red;
			border: 1px solid transparent;
		}

		#d2{
			width:300px;
			height:300px;
			background: yellow;
			margin:50px auto;
			border: 1px solid transparent;
		}

		#d3{
			width:200px;
			height:200px;
			background:pink;
			margin:50px auto;
		}
	</style>
</head>
<body>
	<div id="d1">
		<div id="d2">
			<div id=d3></div>
		</div>
	</div>
	<script>
		window.onload = function(){
			var d1 = document.getElementById("d1");
			var d2 = document.getElementById("d2");
			var d3 = document.getElementById("d3");
			d1.onclick = function(){
				alert("您点击了d1");
			}
			d2.onclick = function(event){
				alert("您点击了d2");
				event.stopPropagation();
			}
			d3.onclick = function(event){
				alert("您点击了d3");
				event.stopPropagation();
			}
		}
	</script>
</body>
</html>

信代码，得永生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS

1、事件1、什么是事件通常都是由用户行为来激发的操作2、触发事件的行为所有的事件在绑定时，必须加 on 1、鼠标事件 click事件：当鼠标单击元素时出发该事件 mouseover：当鼠标移入进元素时的事件 mouseout：当鼠标移出元素的事件 mousemove：当鼠标在元素内移动时的事件 2、键盘事件 keydown:当键位按下时所激发的事件 keypress:当
复制链接

扫一扫

专栏目录