清风陪你学习-JavaScript-浏览器的API（二）

第2章事件

2.1 什么是事件

一种触发—相应的机制；

事件三要素：

· 事件源:触发(被)事件的元素

· 事件类型:事件的触发方式(例如鼠标点击或键盘点击)

· 事件处理程序:事件触发后要执行的代码(函数形式)

2.2 事件绑定

· 行内方式绑定(元素属性)

<body>
   <inputtype="button"value="按钮"id="btn"onclick="alert(2)">
</body>

<body>
   <inputtype="button"value="按钮"id="btn"onclick="f()">
</body>
<script>
   functionf(){
   console.log(3);
   }
</script>

onclick 其实就是html元素的一个属性，而属性的值需要是一段可执行的JS代码

· 动态绑定 (节点对象属性)

<body>
   <inputtype="button"value="按钮"id="btn">
</body>
<script>
   varbtn=document.getElementById('btn');
   btn.onclick=function(){
   alert(4);
   }
</script>

获取节点对象，然后修改节点对象的属性 onclick的值，值是一个匿名函数即可；

以上两种事件绑定方式，需要在事件名称前加 on ;

· 事件监听(节点对象方法)

<body>
   <inputtype="button"value="按钮"id="btn">
</body>
<script>
   varbtn=document.getElementById('btn');
   btn.addEventListener('click',function(){
   alert(5);
   });
</script>

每一个节点对象都提供了addEventListener方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序；

· 移除事件监听

<body>
   <inputtype="button"value="按钮"id="btn">
</body>
<script>
   functionf(){
   alert(5);
   }
   varbtn=document.getElementById('btn');
   btn.addEventListener('click',f);
   btn.removeEventListener('click',f);
</script>

注意:removeEventListener方法移除的监听函数，必须与对应的addEventListener方法的参数完全一致，而且必须在同一个元素节点，否则无效。

2.3 三种事件绑定比较

this关键字在JavaScript中，每一个函数的内部都存在一个this关键字，其随着运行环境的不同，其指向也是不同的。

<body>
   <pid="t">ttttt</p>
</body>
<script>
   vard=document.getElementById('t');
   d.onclick=function(){
        //this指代本对象就是 d
   varv=this.innerHTML;
   alert(v);
   }
</script>

将上述代码的动态绑定，改为行内绑定：

<body>
   <pid="t"onclick="f()">ttttt</p>
</body>
<script>
   functionf(){
   varv=this.innerHTML;
   alert(v); //undefined
   console.log(this); //window对象
   }
</script>

由此可知：行内绑定，其事件处理程序内部的this指向了全局的window对象。动态绑定，其事件处理程序内部的this指向了当前正在操作的dom对象。

需求：同一个元素的同一个事件，绑定多个处理函数：

<body>
   
   <pid="t" onclick="t()"onclick="f()">ttttt</p>
</body>
<script>
   vard=document.getElementById('t');
   functionf(){
   alert(1);
   }
   functiont(){
   alert(2);
   }
</script>

<body>
   <pid="t">ttttt</p>
</body>
<script>
   //动态绑定,后边的执行函数会将前面的覆盖掉
   vard=document.getElementById('t');
   d.onclick=function(){
   alert(1);
   }
   d.onclick=function (){
   alert(2);
   }
</script>

<body>
   <pid="t">ttttt</p>
</body>
<script>
   vard=document.getElementById('t');
   functionf1() {
   console.log(this.innerHTML);
   }
   d.addEventListener('click', f1, false);
   d.addEventListener('click', function(){console.log('f2');}, false);
</script>

总结：第一种 "HTML标签的on-属性"，违反了HTML与JavaScript代码相分离的原则；处理函数中 this 指向的window对象；第二种 "Element节点的事件属性" 的缺点是，同一元素同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。但是处理函数中的 this 指向的选中的对象；所以，这两种方法都不推荐使用，除非是为了程序的兼容问题，因为所有浏览器都支持这两种方法。第三种：addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。处理函数中的 this 指向的也是选中的元素；

2.4 事件类型

https://developer.mozilla.org/zh-CN/docs/Web/Events

2.3.1 页面事件(资源事件)

事件名称	何时触发
load	一个资源及其相关资源已完成加载。

<bodyonload="f1()">
</body>
<script>
   functionf1(){
   alert('f1');
   }
</script>

2.3.2 焦点事件

事件名称	何时触发
focus	元素获得焦点（不会冒泡）
blur	元素失去焦点（不会冒泡）

<body>
   <inputtype="text"id="t"value="请输入用户名"onfocus="f1()"onblur="f2()">
</body>
<script>
   functionf1(){
   document.getElementById('t').value='';
   }
   functionf2(){
   varv=document.getElementById('t').value;
   alert(v);
   }
</script>

2.3.3 鼠标事件

事件名称	何时触发
mouseenter	指针移到有事件监听的元素内
mouseover	指针移到有事件监听的元素或者它的子元素内
mousemove	指针在元素内移动时持续触发
mousedown	在元素上按下任意鼠标按钮
mouseup	在元素上释放任意鼠标按键
click	在元素上按下并释放任意鼠标按键
dblclick	在元素上双击鼠标按钮
contextmenu	右键点击 (右键菜单显示前).
mouseleave	指针移出元素范围外（不冒泡）
mouseout	指针移出元素，或者移到它的子元素上
select	文本被选中

<body>
   <divid="d"style="width:200px;height:200px;border:1pxsolid red">
   </div>
</body>
<script>
   vard=document.getElementById('d');
   //当鼠标悬浮时触发
   d.onmouseover=function(){
   console.log('请问?');
   }
    //当鼠标离开时触发
   d.onmouseout=function(){
   console.log('这条路');
   }
    //当鼠标按下时触发
   d.onmousedown=function(){
   console.log('怎么走');
   }
    //当鼠标弹起时触发
   d.onmouseup=function(){
   console.log('再来');
   }
    //当鼠标移动时触发
   d.onmousemove=function(){
   console.log('不能够');
   }

   //当点击右键时
   d.oncontextmenu=function(){
   console.log('你想问什么？');
   returnfalse;
   }

   // 当复制内容时
   d.oncopy=function(){
   console.log('你敢复制我？');
   returnfalse;
   }

</script>

2.3.4 键盘事件

事件名称	何时触发
keydown	按下任意按键
keypress	除 Shift, Fn, CapsLock 外任意键被按住. (连续触发)
keyup	释放任意按键

<body>
   <inputtype="text" value=""id="t">
</body>
<script>
   vard=document.getElementById('t');
   //当键盘按下时触发
   d.onkeydown=function(){
   console.log('推到?');
   }
   //当键盘按下时触发
   d.onkeypress=function(){
   console.log('撩起2?');
   }
   //当键盘弹起时触发
   d.onkeyup=function(){
   console.log('撩起?');
   }
</script>

2.3.5 form表单事件

Event Name	Fired When
reset	点击重置按钮时（<input type=’reset’ value=’重置’ />）
submit	点击提交按钮

<body>
   <formid="f"action="1.2.5.php">
      姓名:<inputtype="text"name=""value=""><br>
   <inputtype="submit"name=""value="提交">
   <inputtype="reset"name=""value="重置">
   </form>
</body>
<script>
   vard=document.getElementById('f');
    //当表单提交时触发
   d.onsubmit=function(){
   alert('t');
   }
    //当表单重置时触发
   d.onreset=function(){
   alert('re');
   }
</script>

2.3.6 内容变化事件

change：当内容改变且失去焦点时触发（存储事件）input ：当内容改变时触发（值变化事件）

<body>
   <inputtype="text"id="t"value="">
</body>
<script>
   vard=document.getElementById('t');
   //当内容改变且失去焦点时触发
   d.onchange=function(){
   console.log('t');
   }
   //当内容改变时触发
   d.oninput=function(){
   console.log('in');
   }
</script>

2.4 事件的传播

三个包裹着的DIV，都绑定了点击事件，问：当点击 div1 时，会发生什么现象？

<head>
   <title></title>
   <metacharset="UTF-8">
   <style>
   div{padding: 40px}
   #div3{width: 300px;height: 300px;background-color: red}
   #div2{width: 200px;height: 200px;background-color: yellow}
   #div1{width: 100px;height: 100px;background-color: blue}
   </style>
</head>
<body>
   <divid="div3">3
   <divid="div2">2
     <divid="div1">1</div>
   </div>
   </div>
</body>
<script>
   vard1=document.getElementById('div1');
   vard2=document.getElementById('div2');
   vard3=document.getElementById('div3');

   d1.onclick=function(){
   alert('1');
   }
   d2.onclick=function(){
   alert('2');
   }
   d3.onclick=function(){
   alert('3');
   }
</script>

当点击div1时，触发事件1，但是，紧跟着，事件2和事件3也被触发了；

这种现象，我们称为事件冒泡

在JS中当一个事件发生以后，它会在不同的DOM节点之间传播。这种传播分成三个阶段：第一阶段：从window对象传导到目标节点，称为捕获阶段。第二阶段：在目标节点上触发，称为目标阶段。第三阶段：从目标节点传导回window对象，称为冒泡阶段。

事件传播的最上层对象是window；事件的传播顺序，在捕获阶段依次为window、document、html、body、div；在冒泡阶段依次为div、body、html、document、window。

注意：三种事件绑定方式全部默认监听冒泡阶段事件；

2.5 改变事件触发的阶段

想让事件监听在捕获阶段，只能通过addEventListener 方法的进行设置：

"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风." 本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢

清风陪你学习-JavaScript-浏览器的API（二）

猜你喜欢