09-JS事件

Posted 2021-03-14 戒奢从简，起早贪黑，努力提升

 

什么是事件？

事件可以被javascript侦测到的行为，通俗地讲就是当用户与web页面进行某些交互时，解析器就会创建响应的event对象以描述事件信息。   //比如鼠标事件等。

什么是事件句柄？

事件句柄（又称数据处理函数、事件监听函数），指用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句。    //比如给按钮添加一个onclick事件，点击该按钮，执行某个函数，该函数就是事件句柄。

 

事件的绑定

一、html事件  //DOM事件中有说过

二、DOM0级事件  //DOM事件中有说过，只能绑定一个事件

三、DOM2级事件   //可以绑定多个事件
btn.addEventListener(‘click’, function(){},false)    //最后一个参数可以省略，默认为false

btn.addEventListener(‘click’, function(){},false)    //两个事件可以同时触发

ps：注意这里是click，而不是onclick

事件解绑

removeEventListener()    //里面三个参数，必须是字符串包起来的"onclick"等 | 事件句柄函数的名称   |   true/false（默认false）

ps：当addEventListener的事件句柄为匿名函数时，解绑不成功。

 

事件绑定与解绑（IE9以下用）

绑定：btn.attachEvent("onclick",hello);   //hello为事件句柄函数

解绑：btn.detachEvent("onclick",hello);

ps：attachEvent与detachEvent为DOM2级事件。在attachEvent中，this指向的是window

ps：这里用的是onclick，而不是click

 

事件绑定与解绑（兼容性解决函数）

var EventUtil = { //事件绑定与解绑（兼容IE9以下）

addHandler: function(element, type, handler) { //绑定事件
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else(element.attachEvent) {
element.attachEvent("on" + type, handler);
}
},

removeHandler: function(element, type, handler) { //移除事件
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else(element.detachEvent) {
element.detachEvent("on" + type, handler);
}
},

}

//调用该函数

var btn = document.getElementById("myBtn");
var handler = function() {
alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn,"click",handler);

 

 

 

事件冒泡与事件捕获

事件冒泡：事件对象沿DOM树向上传播

事件捕获：事件对象沿DOM树向下传播

在DOM2级事件中，addEventListener的第三个参数，true/false，默认false为事件冒泡，true为事件捕获。

事件委托（利用事件冒泡原理）

<ul id="ul">
<li id="one"> one </li>
<li id="two"> two </li>
<li id="three"> three </li>
</ul>

var ul = document.getElementById("ul");
ul.addEventListener("click",function(event){

if(event.target.id == "one")  alert(1);
else if(event.target.id == "two")  alert(2);
else(event.target.id == "three")  alert(3);

},false);

 

 

 

Event对象属性与方法

addEventListener("click",function(event){         //add绑定事件中，事件句柄自带event参数

console.log(event.type);     //打印出当前的事件类型

console.log(event.target);     //打印出当前事件源对象

console.log(event.currentTarget);     //事件绑定在谁身上，就打印谁

})

　clientY , pageY , screenY（clientX , pageY , screenY）

　event.clientY    //计算的是浏览器顶部到鼠标的位置，不计算滚轴距离

　event.pageY      //计算的是浏览器顶部到鼠标的位置，要计算滚轴距离

　event.screenY   //计算的是屏幕到鼠标位置的距离

阻止默认行为

<a href="www.baidu.com" id="a">跳转链接</a>

var a = document.getElementById("a");

a.addEventListener("click",function(){

alert(123);

preventDefault();     //本来点击a链接的时候会弹出123后，再跳转百度；但是阻止默认行为后，只是弹出123，不会进行跳转了

})

阻止事件冒泡或事件捕获

<div id="parent">

<div id="child">点击</div>

</div>

var parent = document.getElementById("parent");

parent.addEventListener("click",function(){alert("parent");});

var child = document.getElementById("child");

child.addEventListener("click",function(){

alert("child");     //正常情况下会先弹出child再弹出parent

event.stopPropagation();     //添加完stopPropagation后，只会弹出child。

});

 

Event对象属性与方法（IE9以下）

事件源对象srcElement                      //相当于target

阻止默认行为event.returnValue = false     //相当与preventDefault()

阻止事件冒泡或事件捕获event.cancelBubble = true       //相当于stopPropagation()

 

Event对象属性与方法（兼容性解决函数）

var EventUntil = {

getTarget: function(event) { //获取事件源对象
return event.target || event.srcElement;
},

preventDefault: function(event) { //阻止默认行为
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
},

stopPropagation: function(event) { //阻止事件冒泡或事件捕获
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}

}

 

 

 

事件类型（常用数据类型）

UI事件

load：当页面完全加载后再window上面触发

unload：当用户从一个页面到另一个页面时触发

resize：窗口或框架被重新调整大小

scroll：当页面发生滚动时触发

 

鼠标事件

click：当用户点击某个对象时调用的事件句柄。
dbclick：当用户双击某个对象时调用的事件句柄。
 
mousedown：鼠标按钮被按下。
mouseup：鼠标按键被松开

mouseover：鼠标移到某元素之上    //进入它的子元素也会触发
mouseout：鼠标从某元素移开      //进入它的子元素也会触发

mouseenter：鼠标移到某元素之上     //不包括它的子元素
mouseleave：鼠标从某元素移开      //不包括它的子元素

mousemove：鼠标在某元素移动。

 

表单事件

focus：元素获得焦点。   //不支持冒泡
blur：元素失去焦点。     //不支持冒泡

focusin：元素获得焦点。   //支持冒泡
focusout：元素失去焦点。     //支持冒泡 

submit：表单提交

textInput：input文本框内容发生变化    //event.data获取文本框的内容

 

键盘事件

keypress：某个键盘按键被按下并松开。//keypress 搭配 event.charCode 比较稳定。charCode返回ascll码

keydown：某个键盘按键被按下。

keyup：某个键盘按键被松开。

 

移动端事件

touchstart：手指触摸屏幕。

touchmove：手指在屏幕上滑动。

touched：手指从屏幕上移开。

 

其他事件

DOMNodeInserted：某元素中任意元素被添加时触发。
DOMNodeRemoved： 某元素中任意元素被删除时触发。

DOMNodeInsertedIntoDocument：某元素中任意元素被添加之前时触发。
DOMNodeRemovedFromDocument：某元素中任意元素被删除之前时触发。

DOMSubtreeModified：某元素中结构发生任何变化都触发。