python Web：JavaScript--DOM Event(事件)、事件对象、事件传递机制

最新推荐文章于 2022-02-22 22:03:45 发布

梦寐_

最新推荐文章于 2022-02-22 22:03:45 发布

阅读量322

点赞数

分类专栏： python Web 文章标签： js DOM事件事件对象事件传递

本文链接：https://blog.csdn.net/HHG20171226/article/details/94990685

版权

python Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

事件：由用户行为激发的操作

事件处理函数(都以on为前缀)

$\color{HotPink}{鼠标事件}$
onclick 鼠标单击事件
ondbclick鼠标双击事件
onmouseover鼠标移入元素时触发
onmouseout 鼠标移出元素时触发
onmousemove 鼠标在元素内移动时触发
onmouseleave 鼠标从元素离开

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	p{
		width:200px;
		height:200px;
		background:red;
	}
  </style>

 </head>
 <body>
	<p>事件处理函数</p>
 </body>
 <script>
	var p = document.getElementsByTagName('p')[0];
	p.onmouseover = function(){
		console.log("鼠标移入");
	};
	p.onmouseout = function (){
		console.log("鼠标移出");
	};
	p.onmousemove = function (){
		console.log("鼠标在元素内移动");
	};
 </script>
</html>

onload 事件
文档或元素加载完毕之后触发
状态改变事件
常用于表单控件
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
onchange 元素内容发生改变时触发，在元素失去焦点之后才触发
oninput 元素的value值发生变化时触发，实时监听输入
onsubmit 当表单被提交时触发
键盘事件
onkeydown 键位被按下时触发
onkeypress 键位被按下时触发
onkeyup 键位抬起时触发

onselect 文本被选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="search" onfocus="f1()" onblur="f2()" placeholder="用户名/手机号">
<!--<input type="text" id="search" onfocus="f1()" onblur="f2()" placeholder="用户名/手机号">
-->
<script>
    var ele=document.getElementById("search");
    function f1() {
        if(ele.value=="请输入用户名"){
            ele.value="";
        }
    }
    function f2() {
       if(!ele.value.trim())
        ele.value="请输入用户名";
    }
</script>
</body>
</html>

事件的绑定方式

内联方式：在标签中绑定事件函数
<button onclick="执行函数()"></button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script>

        function f() {
               var ele=document.getElementsByClassName("div1")[0];
               console.log(ele.innerHTML);
        }

        //ele.style().css("color","red")
     </script>
</head>
<body onload="f()">

<div class="div1">hello div</div>



</body>
</html>

在JS中动态绑定事件处理函数
语法：

元素节点.事件函数名 = function (){};
et :
div.onclick = function () {
		执行函数
 };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="v1">
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <p id="p1" onclick="func(this)">pppppp</p>
</div>

<script>
function func(that) {
    console.log(that);

    console.log(that.previousElementSibling);
    console.log(that.parentNode);

}
    
//    var ele=document.getElementById("p1");
//    ele.οnclick=function () {
//        alert(123)
//    };

// 事件绑定2
//    var ele2=document.getElementsByClassName("v2");
//    for(var i=0;i<ele2.length;i++){
//        ele2[i].οnclick=function () {
//            alert(555)
//        }
//    }
    
</script>
</body>
</html>

W3C标准事件监听函数
elem.addEventListener('click',fun);
elem.removeEventListener();

this关键字
this表示触发当前事件的元素节点对象，用在事件函数内部

div.onclick = function (){
console.log(this); //div
 };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="v1">

    <p id="p1" onclick="func(this)">pppppp</p>
	
	<p onclick="func(this)">hello</p>
	<div>hello DIV</div>
</div>

<script>
function func(that) {
    console.log(that)
	//打印前一个元素节点
    console.log(that.previousElementSibling);
    //打印父节点
    console.log(that.parentNode);
}

    // 绑定事件方式一
    function func(self) {
        console.log(self);
        alert(1234)
    }
    // 绑定事件方式二
    var ele=document.getElementsByTagName("div")[0];
    ele.onclick=function () {
        console.log(ele);
        console.log(this);
//        alert(6666)		
    }
</script>
</body>
</html>

onload事件
常用于为body绑定load事件，表示等待body内容加载完毕，再执行事件函数

<body onload = "fun();"></body>
//JS动态绑定
window.onload = function () {
//等待文档加载完毕之后再执行
 };

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	function fn(){
		var div = document.getElementsByTagName('div')[0];
		console.log(div);
	}
	
	window.onload = function () {
		var h1 = document.getElementsByTagName('h1')[0];
		console.log(h1);
	};
  </script>
 </head>
 <!-- <body onload="fn();"> -->
 <body>
	<div>div</div>
	<h1>大标题</h1>
 </body>
</html>

onsubmit事件
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
注意：该事件需要一个Boolean返回值来通知表单是否要提交，返回true表示表单可以提交，返回false表示阻止表单提交，常用于验证表单是否可以提交

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	window.onload = function (){
		//1. 获取元素节点
		var form = document.getElementsByTagName('form')[0];
		var uname = document.getElementsByTagName('input')[0];
		var upwd =  document.getElementsByTagName('input')[1];
		var span =  document.getElementsByTagName('span')[0];
 
		//2. onsubmit    先执行绑定的事件，然后再执行form表单的<input type="submit" value="提交">
		form.onsubmit = function (){
			//在提交按钮被点击时自动触发，验证表单
			if(uname.value == ''){
				//表单无法提交
				//alert('用户名不能为空');
				span.innerText="用户名不能为空";
				//验证失败，不向服务端发送数据
				return false;
			}
			// 验证成功，表单可以提交
			return true;
		};
 
		//3. 获取焦点与失去焦点
		uname.onfocus = function (){
			//console.log("获取焦点");
		};
		uname.onblur = function (){
			//验证输入是否合法
			if(this.value.length >= 6 && this.value.length <= 18){
				span.innerText = "用户名合法";
			}else{
				span.innerText = "用户名不合法";
			}
			//console.log("失去焦点",uname.value);
		};
 
		//文本框内容发生改变时触发
		uname.onchange = function (){
			//1. 内容发生变化并且元素失去焦点时触发
			//console.log(this.value);
		};
		//只要输入框中内容发生变化（增加、删除），都会触发
		uname.oninput = function (){
			console.log(this.value);
		};
	
	};
  </script>
 </head>
 <body>
	<form action="login" method="post">
		<p>
			用户名称 ：<input type="text" name="uname">
			<span></span>
		</p>
		<p>
			用户密码 ：<input type="password" name="upwd">
		</p>
		<input type="submit" value="提交">
	</form>
 </body>
</html>

事件对象

事件对象 event
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
伴随事件触发产生，包含了当前事件所有的信息，
获取事件对象
由于事件对象伴随事件触发自动产生，浏览器会自动将其作为参数传递给事件处理函数，所以我们需要在事件处理函数出接收参数，就可以获取事件对象
```
et:
function sum (a,b){
    return a + b;
 }
sum(10,20);
div.onclick = function (evt) {
console.log(evt);
 };
```
事件对象的常用操作
不同的事件对应不同的事件对象，其所包含的信息也不同

获取事件源
触发事件的节点对象
evt.target;
鼠标事件对象包含的属性

offsetX,offsetY
获取鼠标在元素上的坐标点（以元素左上角为原点）
clientX,clientY
获取鼠标在网页中的坐标点

screenX,screenY
获取鼠标在屏幕中的坐标点

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	div{
		width: 200px;
		height:200px;
		background : red;
	}
  </style>
  <script>
	window.onload = function (){
		//1. 获取元素
		var div = document.getElementsByTagName('div')[0];
		//2. 添加鼠标事件
		div.onmouseover = function (evt){
			//接收事件对象并输出
			console.log(evt);
			//鼠标坐标信息
			console.log(evt.offsetX,evt.offsetY);
			console.log(evt.clientX,evt.clientY);
			console.log(evt.screenX,evt.screenY);
		};
		div.onmousemove = function (event){
			//输出事件源
			//console.log(event.target);
				 
		};
	};
 
  </script>
 </head>
 <body>
	<div></div>
 </body>
</html>

键盘事件对象包含的信息
键盘事件：onkeypress onkeydown onkeyup

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	window.onkeypress = function (){
		console.log("keypress");
	};
	onkeydown = function (){
		console.log("keydown");
	};
	onkeyup = function(){
		console.log("keyup");
	};
  </script>
 </head>
 <body>
  
 </body>
</html>

keypress 事件
只有在输入字符（键盘输入）时才触发
事件对象的属性：
- which 属性
  获取当前按下字符的ASC码
- key
  获取当前键位表示的字符

keydown

which
获取当前键位的键码
值区分按键，不区分大小写
注意：键盘事件的监听顺序 keydown keypress keyup

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	window.onload = function(){
		//获取元素添加监听
		var input = document.getElementsByTagName('input')[0];
		input.onkeypress = function (evt){
			//console.log(evt.target);
			console.log(evt.which,evt.key);
		};
		input.onkeydown = function (evt){
			console.log(evt.which);
		};
 
	};
  </script>
 </head>
 <body>
	<input type="text" name="uname">
 </body>
</html>

事件传递机制

事件传递：当页面一个元素触发事件时，其他相关的元素都会接收这个事件，都可以选择对事件作出响应

事件传递机制：
事件传递机制描述的是页面中元素处理事件的顺序，有两种机制：冒泡 和 捕获
- 冒泡传递：
  从里向外逐个触发（默认传递方式）
- 捕获传递：
  从外向里逐个触发（IE不支持）
  阻止事件传递：
  该事件只在当前元素中执行，不向上传递.
  evt.stopPropagation();（默认冒泡情况下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div class="outer" onclick="func2()">
    <div class="inner"></div>
</div>


<script>

    var ele=document.getElementsByClassName("inner")[0];
    ele.onclick= function (e) {
        alert("I am inner!");

        e.stopPropagation()
    };


    function func2() {
        alert("I am outer!")
    }
</script>
</body>
</html>

梦寐_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
python Web：JavaScript--DOM Event(事件)、事件对象、事件传递机制

事件事件：由用户行为激发的操作事件处理函数(都以on为前缀)鼠标事件\color{HotPink}{鼠标事件}鼠标事件onclick 鼠标单击事件ondbclick鼠标双击事件onmouseover鼠标移入元素时触发onmouseout 鼠标移出元素时触发onmousemove 鼠标在元素内移动时触发<!doctype html><html ...
复制链接

扫一扫

专栏目录