事件（上）

一，定义

日常生活中事件: 发生并得到处理的操作(即事情来了, 然后处理)

比如：

1, 电话铃声响起(事件发生) --- 需要接电话（处理）

2, 学生举手请教问题(有事了) --- 需要解答（处理）

3, 咱们班有个同学被欺负了(出事了) --- 去给他报仇（处理）

在JS中的事件是: 用户在页面上操作, 然后我们要调用函数来处理.

比如:

1, 点击了登录按钮, 调用登录函数执行登录操作

2, 鼠标拖拽, 调用函数实现拖拽

事件触发：

用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等), 就是事件触发.

二，JS 的事件的模式

1，内联模式

1 例如: 
2 <input type="button" value="按钮" onclick="alert('hello');" /> 
3 注意: 单双引号
4 
5 //执行自定义的JS函数 
6 <input type="button"value="按钮" onclick="btnClick();" /> 
7 
8 //注意: 内联模式调用的函数不能放到window.onload里面, 
9 否则会找不到该函数.

2，脚本模式

脚本模式能将JS代码和HTML代码分离, 符合代码规范. （常用）

使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 如我们可以采用三种方式来获得节点对象: getElementById(), getElementsByTagName(), getElementsByName()

 1 //例如: 
 2 var box = document.getElementById('box');
 3 
 4 //添加事件方式一 :  通过匿名函数，可以直接触发对应的代码 (推荐)
 5 box.onclick = function() {  //给box节点对象添加点击事件onclick
 6          console.log('Hello world!'); 
 7 };
 8 
 9 //添加事件方式二 :  通过指定的函数名赋值的方式 来执行函数
10 box.onclick = func;    //注意这里不能写成func()
11 function func() {        //给box节点对象添加点击事件onclick
12          console.log('Hello world!');

三，事件的组成

1，触发事件的元素

是触发事件的对象, 表示触发事件的元素所在区域;

2，对应的事件（事件处理函数）

事件处理函数一般都是小写字母；所有的事件处理函数都会都有两个部分组成，on+事件类型;

3，处理函数（function）

事件的处理函数，是被执行的函数, 用于触发事件后执行;

四，事件的分类

1，鼠标事件

鼠标的一切操作都是鼠标事件（点击，移动，滚轮...）；页面的所有元素都可触发鼠标事件；

var box = document.getElementById('box')

1,点击相关

1 //.onclick 鼠标单击;    .ondblclick 鼠标双击；
2 box.onclick = function(){
3     console.log('鼠标单击')
4 }

2，移动相关，事件名以 mouse开头

 1 //.onmpusedown  鼠标按下；   .onmouseup  鼠标松开了；  .onmouseout  鼠标移出了；
 2 //.onmouseover  鼠标移进；   .onmousemove  鼠标移动了；
 3 //.onmouseseenter  鼠标悬停 .onmouseleave  鼠标取消悬停；
 4 (这两种用的多)
 5 
 6 /*mouseover和 mouseenter的区别是: 
 7 mouseover: 元素的子元素移入也会触发事件
 8 mouseenter : 元素的子元素移入不会触发事件*/
 9 
10 box.onmousedown = function(){
11     console.log('鼠标按下了')
12 }

2，键盘事件

键盘事件，在键盘上按下键时触发的事件;

一般给整体加 (一般由window对象或者document对象调用)；键盘操作一般是给整体加；

1，window.onkeydown  键盘按下；   
2，window.onkeyup  键盘弹起； 
3，window.onekeypress  按下之后弹起之前；

3，html事件

//页面加载事件，默认触发，执行一次；
1，window.onload； 页面加载了；

//onsubmit事件，提交按钮事件，一般触发的元素是表单 form；
2，.onsubmit； 
document.getElementTagName('form').onsubmit = function(){
    console.log('提交了')
}

//失去焦点，得到焦点，（常用于 input ）
3，.onfocus； 获取焦点；   .onblur； 失去焦点；
document.getElementTagName('input').onfocus = function(){
    console.log('得到焦点了')
}

//修改 onchange，当里面的值value发生变化，
//失去焦点时触发，一般给 form 表单 用；
4，.onchange 修改

//滚动 onscroll  滚动栏滚动
5，.onscroll

//（了解）
//选择 onselect，文本被选中时，触发；
//一般用于input，textarea；其中的复制粘贴；
6，.onselect 选择
//卸载 unload，页面被卸载的时候，组件被卸载的时候；
7，.unload  卸载
//重置 reset，用于form表单
8，.onreset 重置

五，事件对象 Event

1，是什么？

'event对象 ' 是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在arguments数组中

2，为什么要有event这个对象？

通过 arguments[0]; 可以获取在这个DOM 事件处理函数中的参数，但 arguments 里的属性虽然全面但是获取的各种参数很多，在需要获取对应的参数时，无法高效快速得到；因此有了这个专门的内置事件源对象 window.event；它里面有对鼠标事件，键盘事件等事件相对应的事件原对象分类；

3，arguments 获取解析和举例

 1 document.getElementsBy TagName( ' button')[0].onclick = function(){
 2     //获取参数发现对应的arguments里面只有一个参数这个参数类型为pointerEvent
 3     //这个pointerEvent是什么?坐标事件源
 4     console.log(arguments);
 5     console.log( arguments[0]); 
 6 //获取的是一个pointerEvent可以获取坐标x: 34 y: 18
 7 //就是我们鼠标的坐标
 8     
 9     //鼠标事件中
10     console.log(arguments[0].x); //x坐标
11     console.log( arguments[0].y); //y坐标
12     console.log( arguments[0].target); //获取触发的元素
13     console.log( arguments[0].type); //触发的事件
14     
15     //加在键盘事件
16     console.log(arguments[0].altKey); //是否按了alt键是返回true不是返回false
17     console.log( arguments[0].shiftKey); //是否按了shift键
18     console.log( arguments[0].ctr1Key); //是否按了ctrl键
19     //这个arguments[0]其实是拿到了我们对应的事件源对象
20     //但是像上面这样写太长了所以我们有内置的事件源对象window.event
21     // 鼠标按下的是那边的0 左键    1 滚轮    2 右键
22     console.log( arguments[0].button);
23     //KeyboardEvent的事件源对象键盘事件源他也是个event
24 }

4，event获取解析和举例

 1 window.onkeyup = function(e){       
 2 //e是形参随便写一般建议写e (规范)
 3     console.log(arguments[0]); 
 4 //e就相当于arguments[0] //获取第一个参数
 5     console.log(e); 
 6     console.log(window.event);  //window. event的对象其实就是这个e    
 7     e = e || window.event   
 8 //window.event写后面 拿到的就是事件源对象常用写法 console.log(e.code); //获取你按下的键   
 9     console.log(e.key);     //获取你按下键的值    
10     console.log(e.keyCode); //获取按键的ascii吗   
11 }

5，Event相关属性

 1 <html>
 2     <body>
 3         <div>box</div>
 4     </body>
 5     <script>
 6         //MouseEvent  鼠标源事件属性
 7         var div = document.getElementTagName('div')[0]
 8         div.onmousedown = function(e){
 9             e = e || window.event   // e 事件源对象
10             e.button    //鼠标点击的键  0 左键   1  滚轮   2  右键
11             e.target    //目标元素  显示是div
12             e.type      //事件类型  显示 onmousedown
13             e.x     //基于可视区域，获取鼠标的 x 坐标
14             e.y     //基于可视区域，获取鼠标的 y 坐标
15             e.pageX     //基于页面的可视区域，获取鼠标的 x 坐标
16             e.pageY     //基于页面的可视区域，获取鼠标的 y 坐标
17             e.offsetX   //基于div偏移的x，离div这个合作的左上顶角，获取鼠标的 x 坐标
18             e.offsetY   //基于div偏移的y，离div这个合作的左上顶角，获取鼠标的 y 坐标
19             e.screenX   //获取屏幕信息，鼠标在屏幕上的 x
20             e.screenY   //获取屏幕信息，鼠标在屏幕上的 y
21             e.clientX   //基于当前可视区域，获取鼠标的 x 坐标
22             e.clientY   //基于当前可视区域，获取鼠标的 y 坐标
23             e.path      //元素路径
24             e.ctrlkey   //判断是否按着ctrl，按着返回true，没有返回false
25             e.altkey    //判断是否按着alt
26             e.shiftkey  //判断是否按着shift
27         }
28         
29         //键盘事件源对象
30         window.onkeydown = function(e){
31             e = e || window.event
32             e.target    //目标元素  显示是body
33             e.type      //事件类型  显示 keydown
34             e.key   //获取按键的值 a
35             e.code  //获取按键 keyA
36             e.keycode   //获取按键的 ASCII 值，字母全部按大写，不区分；
37             e.charCode  //返回字符编码，区分大小写；只有在按字符的时候才有，只在keypress事件中有效；
38             e.ctrlkey   //判断是否按着ctrl，按着返回true，没有返回false
39             e.altkey    //判断是否按着alt
40             e.shiftkey  //判断是否按着shift
41         }
42         
43         //onkeypress 在弹起之前按下之后，针对字符键，其他按键不会执行；
44         windwon.onkeypress = function(e){
45             e = e || window.event
46             e.charCode  //区分大小写
47         }
48         
49     </script>
50 </html>

posted @ 2022-04-12 20:05 AVEGER 阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 事件（下）

· javeScript学习 001（JS一些基础概念）

· 事件（上）

· JavaScript--事件（上）