JS事件详知

最新推荐文章于 2021-06-28 21:35:29 发布

zxh...

最新推荐文章于 2021-06-28 21:35:29 发布

阅读量224

点赞数 1

分类专栏： HTML web前端

本文链接：https://blog.csdn.net/weixin_43437202/article/details/84850132

版权

HTML 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

web前端

20 篇文章 0 订阅

订阅专栏

事件

事件定义：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。
事件类型：就是什么类型的字符串，像鼠标悬浮，按下键盘等。
事件目标：事件目标是发生的事件或与之相关的对象，事件是要添加给哪个对象。
事件处理程序：响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
事件对象：事件对象是与特定事件相关且包含有关该事件详细信息的对象。
事件传播：事件传播是浏览器决定那个对象触发其事件处理程序的过程。
在这里插入图片描述
事件模型
1、内联模型：传统方法，指的是行间的事件,写入html标签之中,这种写法不能保证内容和结构进行分离，
所以不建议使用, 要保证页面的简洁性,以及体验度.
2、脚本模型：由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则，来源于内联模型违反了
html和JS的分离原则,为了解决这个问题,所以将处理程序以脚本的形式嵌入页面。
3、DOM2 模型：用于添加事件和删除事件处理程序的。addEventListener()和 removeEventListener()。
这两个方法都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)。

所有的事件处理函数都会都有两个部分组成，on + 事件名称

事件类型
鼠标事件：
案例解析eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 5px solid yellow;
margin: 100px auto;
transition: all 3s;
}
</style>
<script type="text/javascript">
window.function(){
var ddd=document.getElementsByTagName('div')[0];
var dddd=document.getElementsByTagName('div')[1];
ddd.onmouseenter=function(){
//鼠标移入
ddd.style.borderRadius=50+'%';
}
ddd.onmouseleave=function(){
//鼠标离开
ddd.style.borderRadius=0;
}
ddd.onclick=function(){
//鼠标单击
ddd.style.background='green';
}
ddd.ondblclick=function(){
//鼠标双击
ddd.style.background='blue';
}
ddd.onmousemove=function(){
//鼠标移动
ddd.style.opacity=0.5;
}
dddd.onmouseover=function(){
//鼠标移入
dddd.style.transform='scale'+'('+1.2+')';
dddd.style.transform="rotate(-45deg)";
}
dddd.onmouseout=function(){
//鼠标离开
dddd.style.transform='scale'+'('+1+')';
dddd.style.transform="rotate(45deg)";
}
dddd.onmousedown=function(){
//鼠标按下
dddd.style.borderRadius=50+'%';
}
dddd.onmouseup=function(){
//鼠标松开
dddd.style.borderRadius=0;
}
ddd.onwheel=function(){
//鼠标前后轮
if (event.wheelDelta>0) {
ddd.style.background='red';
} 
else{
ddd.style.background='yellow';
}
}
}
</script>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

键盘事件：
onkeyup：某个键盘键被松开；
onkeydown：某个键盘键被按下；
onkeypress：某个键盘键被按下并松开；
keyCode：返回键盘字符代表的数值
案例解析eg:

<head>
<script>
       function myFunction(event) {
    var inp = event.keyCode;
    var pni=String.fromCharCode(inp);
    document.getElementById("demo").innerHTML =pni+ " 键盘值为: " + inp;
//   }
   /*//首先模拟一个文本文件内容。文件中存放着三个字符。“abc”
   var textBinary = new Uint8Array([65]);
   var blob = new Blob([textBinary]);
   //读取文件中的内容为字符串
   var fr = new FileReader;
   fr.readAsText(blob);
   fr.onload = function() {
    alert('文本文件中的内容是：' + fr.result);
   }*/
  </script>
  </head>
  <body>
  <p>请按键盘</p>
  <!--<input type="text" onkeypress="myFunction(event)">-->
  <!--<input type="text" onkeydown="myFunction(event)">-->
  <input type="text" onkeyup="myFunction(event)">
  <p id="demo"></p>
 </body>

表单事件：
onfocus:获取焦点；
onblur:失去焦点；
onsubmit：提交时触发；
案例解析eg:

<head>
<script type="text/javascript">
   function focu(){
    document.for1.username.value='';
   }
   function blu(){
    var kong=document.for1.username.value;
    if (kong!='') {
     alert('输入正确');
    } else{
     alert('账户名不能为空');
    }
   }
  
   function blr(value){
   daxie(value);
   }
   function daxie(value){
    alert(value.toUpperCase());
   }
     
   function foc(){
    document.for1.zhiye.style.borderColor='red';
   }
   function bl(){
    document.for1.zhiye.style.borderColor='yellow';
   }
 
   var fooo=document.getElementById('form01');
   fooo.onsubmit=function(){
    var name=document.for1.zhiye.value;
   }
  </script>
 </head>
 <body>
  <form name="for1" action="键盘事件.html" id="form01" method="post">
   账户:
   <input type="text" name="username" value="请输入账户" onfocus="focu();" onblur="blu();" />
   <span id="span1"></span>
   <br /> 密码:
   <input type="text" name="pwd" value="password" onfocus="fou();"  onblur="blr(this.value);" />
   <br />职业:
   <input type="text" name="zhiye" value="软件开发" onfocus="foc();" onblur="bl();" />
   <br />
   <input type="submit"name="enheng" value="提交"/>
  </form>
 </body>

zxh...

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件详知

事件事件定义：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。事件类型：就是什么类型的字符串，像鼠标悬浮，按下键盘等。事件目标：事件目标是发生的事件或与之相关的对象，事件是要添加给哪个对象。事件处理程序：响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。事件对象：事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件传播：事件传播是浏览器决定那个对象触发其事件处理程序...
复制链接

扫一扫

专栏目录