事件(初学知识点)
事件:
- 用户在浏览器操作的时候,在某种条件成立时而触发(事件、事务)的一种交互行为
- 每个元素自身就有事件,只不过默认为null,当某个事件绑定了一个函数之后,用户在操作浏览器的时候,触发了这个事件,那么就执行事件函数。
- 用户操作浏览器的时候会触发很多的事件,只有绑定了事件函数的事件才会对用户有响应,但没有响应的事件并不是没触发,只是没有事件函数而已
- 某个元素有这个事件,事件值默认为null,如果没有这个事件,事件值为undefined(访问了某个对象一个没有设置的属性而已)
事件绑定:
在传统事件中,同一个元素绑定多个同一个事件,那么后面的事件函数会把前面的事件函数覆盖。在DOM2事件绑定中,可以让同一个元素,绑多次同一个事件。
DOM 0 级 事件:
on开头的
解除事件:
ele.onxxx = null
DOM 1 级 事件:
DOM级别1于1998年10月1日成为W3C推荐标准。
1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。
DOM 2 级 事件:
在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个 事件模型 。这个标准下的事件模型就是我们所说的2级DOM事件模型。
在DOM2事件绑定中,可以让同一个元素,绑多次同一个事件
addEventListener 添加事件绑定(监听)
removeEventListener 解除事件绑定
ele.addEventListener("不带on的事件名",事件函数,布尔值(默认不捕获))//事件函数要起个名字,以便在解除的时候拿到同一个函数地址
ele.removeEventListener("不带on的事件名",事件名(和绑定事件的函数为同一个地址),布尔值)
在开发移动端的时候,就要用DOM2,不然有些浏览器不会触发手机端事件
IE低版本用:
绑定:box.attachEvent(“带 on 的事件名”,function(){} )
解除:box.detachEvent("带 on 的事件名",function(){} )
例子:
box.addEventListener('click',fn);//给box绑定click事件 function fn(){ alert(1); } btn.addEventListener('click',function(){ box.removeEventListener('click',fn); })//点击btn的时候移除box的click事件函数
事件模型:捕获 -> 目标 -> 冒泡
1. 先捕获,再冒泡。2.同一元素有多个捕获或者多个冒泡的时候,执行同一阶段的时候会按照 这个阶段的 代码(事件绑定)的先后顺序执行。
冒泡:
从目标点由下而上直到window的过程叫冒泡。
如果目标元素和祖先元素绑定了同一种事件,那么在执行完目标元素的事件之后,同样会调用祖先级的事件函数
祖先元素:在css中的结构中,标签套标签,外层的标签是内层标签的父级或者祖先级
捕获:
从window起,自上而下,直到目标点的过程叫捕获。
DOM 0 是检测不到捕获的,只能用DOM2来检测捕获的过程。
DOM2绑定中的最后一个参数,是否捕获(true要捕获,false不捕获(冒泡))。 默认为false,不捕获。
事件流(事件模型):
当一个事件触发的时候,一般会经历3个过程,第一个为 捕获 阶段, 第二个为 目标 阶段,第三个为 冒泡 阶段。 这三个阶段就叫做事件流(事件模型)
目标阶段:
事件触发到目标元素的时候,会按照 代码(事件绑定)的先后顺序执行,不再是先捕获后冒泡。
例子:
<div id="div2"> <button id="btn">点击</button> </div> <script> div2.addEventListener('click',function(){ alert('捕获_div'); },true) div2.addEventListener('click',function(){ alert('冒泡_div'); },false); btn.addEventListener('click',function(){ alert('目标按钮_a'); },false) btn.addEventListener('click',function(){ alert('目标按钮_b'); },true) btn.addEventListener('click',function(){ alert('目标按钮_c'); },false) </script> /* 点击btn时的弹框顺序:(1捕获阶段) 捕获_div => (2目标阶段) 目标按钮_a =>目标按钮_b => 目标按钮_c =>(3冒泡阶段) 冒泡_div */
事件对象: event
当用户触发了某个事件的时候,那个事件函数的第一个参数就为事件对象,这个对象是记录了用户操作浏览器或者元素时的相关细节信息。
低版本 IE 中的事件对象不在事件函数中,在window上,有个event属性。
FF(火狐浏览器)下事件对象只有在事件函数的第一个参数中才有,window上是没有的。如果在FF下直接访问event就会报错(因为没有这个变量)
解决:var ev = window.event || ev
Chrome(谷歌浏览器) 中 window有,事件函数中的第一个参数也有
事件源(事件监听):target
事件对象其中有一个属性叫 target,能够捕获到事件触发时的源头是哪个元素。可以节省性能
注意:只有嵌套关系,才能获得准确的事件源
例子(冒泡的优点):
<body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> ul.onclick = function(ev){ // console.dir(window.event); var ev = window.event || ev//兼容火狐和IE低版本 console.log(ev.target);//可以输出点击的是谁(找到事件源) if(ev.target.nodeName === 'LI'){ ev.target.style.background = 'green'; }//如果事件源是 li 就让 它变绿 } //把onclick绑在 ul 上,利用 冒泡 原理,改变 li 的样式,就不用通过循环 li 并绑定事件的方法来达到效果,优化性能。 </script> </body>
阻止冒泡:(注意:取消冒泡 一定要 在事件源上阻止冒泡,能解决父级执行的问题)
ev.cancelBubble = true // 阻止冒泡
ev.cancelBubble 不是标准属性,但是所有浏览器都能兼容
ev.stopPropagation() 这个是标准,但是低版本浏览器不兼容
注意:
在开发的过程中,如果2个元素时嵌套关系,就要小心,事件冒泡(2个事件尽量不要重名)
例子(冒泡的缺点与解决办法):
btn.onclick = function(ev){ alert(1) // ev.stopPropagation(); ev.cancelBubble = true; //阻止了btn的onclick的事件不往上面冒泡。 }
事件默认行为:
当用户触发某个事件的时候,某种行为不是我们主动写的而是浏览器默认可以做的,就叫事件默认行为。
阻止默认行为:
DOM 0中:在事件函数中,写 return false
DOM 2中:ev.preventDefault()
例子:
// document.onmousedown = function(){ // console.log('按下'); // return false;//DOM 0 中阻止默认行为 // } document.addEventListener('mousedown',function(ev){ //console.log('按下'); ev.preventDefault();//DOM2中阻止默认行为 }); //如果在document下有一张图片,鼠标按下的时候可以触发事件默认的拖动行为,在阻止了默认行为的之后,就不能再触发拖动行为。
常见的事件
点击事件是由2个事件组合在一起的形成的新事件
按下:onmousedown
抬起:onmouseup
onclick 点击时触发
ondblclick 双击事件
onscroll 鼠标中键,带动滚动条滚动时触发。(滚动条发生位移,可视区变化时触发。(window.onscroll = function( ){ } ))
oncontextmenu 鼠标右键菜单
onmousemove 鼠标移动事件
onmouseover 鼠标移入时触发
onmouseout 鼠标移出时触发
onmouseenter 不会冒泡 ,也不会穿透 移入
onmouseleave 不会冒泡,也不会穿透 移出
(不穿透:移入嵌套关系的子元素时,不会触发父元素的移出事件。不冒泡:移入嵌套关系的子元素时,不会触发父元素的移入事件。)
ev.clientX / ev.clientY 鼠标到可视区(基于可视区)的 x、y 轴
ev.pageX / ev.pageY 鼠标到可视区(基于页面)的 x、y 轴
css中的 cursor,可以改变鼠标的样式
例子:
document.onmousemove = function(ev){ //console.log(ev.pageY,ev.clientY); box.style.left = ev.clientX - box.offsetWidth/2 + 'px'; // box.style.top = ev.clientY - box.clientHeight/2 + window.pageYOffset +'px'; box.style.top = ev.pageY - box.clientHeight/2 + 'px'; } //鼠标移动事件,让box跟着鼠标走
onresize 当页面缩放时触发
onscroll 当滚动时触发
onerror 事件在加载外部文件(文档或图像)发生错误时触发。(不支持冒泡,不能取消,语法上网查)
onload 静态资源加载完成之后执行(window.onload)
oninput 输入时触发,可动态获取内容
onchange 表单元素的内容改变,失去焦点的时候触发
onblur() 失焦时触发
onfocus() 聚焦时触发
select() 选中(选中表单内容,方便剪切复制,在没有内容的时候,也可以看做 聚焦)
ele.focus() 自动聚焦 (css 中用 autofocus ,一个页面只有一个焦点元素会被激活,一开始,页面中有一个焦点,当按了tab键或者直接激活之后焦点会从页面(window,document)中移到焦点元素身上)
ele.blur() 自动失焦
window.onhashchange 当hash值发生变化时触发。语法:window.onhashchange = function (){ ‘放要执行的内容’ }
document.onvisibilitychange 浏览器窗口切换或者缩小时触发(HTML5新增事件)
例子:
document.addEventListener("visibilitychange", function() { console.log( document.hidden ); // Modify behavior... });
按事件类型分类
课件:2018/11/16