第一句子网 > .11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件

.11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件

时间：2021-09-10 05:09:23

事件处理程序

html事件处理程序（直接在html中书写script）

<input type="text" name="account"><button value="echo Username" onclick="alert(account.value)">查看内容</button>

可以直接调用html中的属性不需要捕捉节点

HTML事件处理程序的缺点:需要同时修改HTML文件和JAVAscript文件

DOM0级事件处理程序

//**DOm0级事件处理程序(普通方法)**var btns = document.querySelectorAll('button');btns[2].onclick = function() {alert(this.name); //可以访问事件对象btns[2]的属性}//删除事件btns[2].onclick = null; //点击按钮好无反应了

DOM2级事件处理程序（监听器）

//DOM2级处理时程序(监听器)btns[3].addEventListener("click", function() {alert(this.id); //!!!!!注意 : click后面前面都不能有空格}, false);btns[3].addEventListener("click", function() {alert(this.name);}, false)//DOM2级处理程序的好处是可以设置事件流,true为捕获事件流,false为冒泡事件流,还可以添加多个事件给同一个节点,//注意第一个接受的参数click没有on//多个处理程序按添加的顺序触发

删除事件：

//删除事件//dom2级事件处理程序只能用removeEvenListner()删除// removeEventListener("事件",函数名,true or false);删除的三个参数必须跟addeventlistner完全一样 ,其中函数不能用匿名函数funcion(),必须要用函数表达式funtion fn();function fn() {alert("删除监听程序");}btns[4].addEventListener("click", fn, false);btns[4].removeEventListener("click", fn, false);

事件对象

event.type的应用

//事件对象//event对象,每个事件都有一个event对象,event.type就是事件的类型//通过event.type属性可以使一个函数控制多个事件var div = document.querySelector('div');var handler = function(event) {switch (event.type) {case "click":alert('clicked');break;case "mouseover":event.target.style.backgroundColor = "red";break;case "mouseout":event.target.style.backgroundColor = " white";break;}}div.onclick = handler;div.onmouseover = handler;div.onmouseout = handler;

阻止事件的发生（阻止链接生效阻止事件阻止事件冒泡捕捉）

// event.preventDefault(); //阻止链接或者什么事件的发生var link = document.querySelector('a');console.log(link);link.onclick = function(event) {event.preventDefault();}//阻止点击div显示clickeddiv.onclick = function(event) {event.preventDefault();}//阻止事件流向上或向下传播// event.stopImmediatePropagation();不会冒泡事件和捕获时间了

事件类型

UI事件不一定与用户操作相关的事件

//页面加载window.onload = function() {alert('loaded');}//图片加载var Image = document.querySelector('#img');Image.addEventListener("load", function(event) {alert('picture has loaded');});//onunload事件window.onunload = function() {alert('页面已销毁');};//resize事件当调整页面宽度和高度时触发window.addEventListener("resize", function() {alert('resized');});scroll事件滚动页面时触发window.onscroll = function() {console.log(document.documentElement.scrollTop);//反应垂直方向的滚动位置}

焦点事件（常用于文本框）；

不需用药flag了

var focu = document.querySelector('#focus');focu.onfocus = function(event) {focu.value = " ";};focu.onblur = function() {focu.value = "请输入用户名";}

鼠标与滚动事件

click点击时触发当 mousedown 或 mouseup被取消是就不会触发click

mousedown 按下任意鼠标时触发

mouseup 用户释放鼠标按钮时触发

dblclick事件双击鼠标时触发

mouseenter 鼠标移入某个元素时触发

mouseout 鼠标移出某个元素时触发

mouseover 当鼠标（首次）从外部移到元素内部时触发

onmouseover 当鼠标指针在元素内部移动时（重复的）触发

**//event.offsetX/ offsetY 鼠标到目标元素边界的距离//offsetLeft offsetRight 子元素相对于父元素的距离//offsetWidth 元素的宽度属性 offsetHeight 元素的高度属性//客户区坐标位置 clientX，clientY相对于浏览器的坐标，不包括滚动的距离//页面坐标位置 pageX , pageY相对于整个浏览器页面的坐标//屏幕坐标位置 screenX,screenY相对于整个屏幕而言的坐标浏览器缩小后坐标也不会变**

修改键得到是否在执行某个事件时同时按下了某些键

//shiftkey,ctrlkey,altkey,metakey

event.button属性

event.button = 0左键

event.button = 1中间滚轮键

event.button =2右键

// 鼠标按钮 event.button//mousedown 和 mouseup事件对象中有一个button属性//在高级版本浏览器中 button==0表示左键 button ==1 表示滚轮键 button == 2表示右键//低级版本分为了七类var mousebutton = document.querySelector('.mousebutton');mousebutton.onmousedown = function() {console.log(event.button);}mousebutton.onmouseup = function() {console.log(event.button); //表示放下的鼠标键是哪个}

event.detail 反映的是点击的次数

鼠标滚轮事件

document.onmousewheel = function() {console.log('鼠标滚动了' + event.wheelDelta + event.detail); //event.wheelDelta可以返回出移动的距离每次150}

键盘与文本事件

键盘与文本事件常用于输入文本框时

//触发顺序：keydown（按下任意按键都会触发）>keypress(按下字符键如 abc等才会触发)>keyup(松开键时触发)

var textandkeyboard = document.querySelector('#textandkeyboard');//每个keyup都会触发keyCode属性 event.keyCode返回输入键的阿斯卡码(低版本浏览器) 注意keycode只返回小写字母不分大小写 textandkeyboard.addEventListener('keyup', function() {console.log(event.keyCode);});//一些高版本浏览器中当触发了onkeypress时按下的键就保存在charCode中高版本浏览器中charCode属性保存了ASCII码textandkeyboard.addEventListener('keypress', function() {console.log(event.charCode);}); //给同一个节点用两个事件时先触发后一个事件

textInput事件只能用DOM3事件处理程序(适用于高版本浏览器)

//textinput 和 keypress的区别：1.只有在可编辑区域可以写入得地方才能触发textInput，而keypress可以再任何节点触发2.textInput只有在输入有实际符号的值时才会触发，

//而keypress只要是对文本有影响的值就会触发例如 delete键

var text = document.querySelector('#textInput');text.addEventListener('textInput', function(event) {alert(event.data); //event.data中储存了输入的字符不是阿斯卡码console.log(event.inputMethod); //只有IE浏览器支持});//textinput中的属性 inputMethod表示文本输入到文本框中的方式当inputmethod值为 0：表示浏览器不知道怎么入数的 1：表示用键盘输入的 2：表示文本是粘贴进来的 3：表示文本数拖进来的等等

变动事件

删除节点

// 在使用removeChild() 或replaceChild() 从DOM中删除节点时首先会触发DOMNoderRemoved() 事件这个事件会冒泡在页面上任意节点都会收到

// 1. 删除节点var variation = document.querySelector('#variation');var deletes = document.querySelector('#delete');var body = document.querySelector('body');//必须要设置删除节点的操作而不是直接删除deletes.onclick = function() {body.removeChild(variation);}variation.addEventListener('DOMNodeRemoved', function() {alert('触发了DOMNodeRemoved事件');});// 第二个触发的事件是DOMNodeRemovedFromDocument 目标是被删除的节点和每一个子节点variation.addEventListener('DOMNodeRemovedFromDocument', function() {alert('触发了DOMNodeRemovedFromDocument');});//最后触发的是在document.body触发的DOMSubtreeModified事件

添加节点

//在使用appendChild replaceChild insertBefore()向DOM中插入节点时，首先会触发DOMNodeinserted事件目标是被插入（被新节点插入）的节点事件冒泡

//#### 插入节点var insert = document.querySelector("#insert");var lis = document.createElement('li');insert.addEventListener('click', function() {variation.appendChild(lis);});variation.addEventListener('DOMNodeInserted', //注意大小写啊！！function() {alert('触发了DOMNodeinserted事件');});//第二会触发DOMNodeInsertedIntoDocument事件目标是被插入的节点（新插入的那个节点）事件不会冒泡lis.addEventListener('DOMNodeInsertedIntoDocument', //注意大小写啊！！function() {alert('触发了DOMNodeInsertedIntoDocument事件');});//最后是DOMSubtreeModified 事件触发于新插入节点的父节点variation.addEventListener('DOMSubtreeModified',function() {alert('触发了DOMSubtreeModified事件');});

html5事件

contextmenu事件：右键点击出菜单栏事件

//contextmenu事件设置自定义上下文菜单 contextmenu事件处理程序只能用监听器模式var box = document.querySelector('.box');var menu = document.querySelector('.menu');box.addEventListener('contextmenu', function() {event.preventDefault();//使系统自带的菜单栏不能出现menu.style.left = event.clientX + "px";menu.style.top = event.clientY + "px";menu.style.visibility = 'visible';});window.onclick = function() {menu.style.visibility = 'hidden'; }

beforeunload事件：在退出页面时触发

//beforeunload事件window.addEventListener('beforeunload', function() {event.returnValue = '请确认是否退出该页面';return event.returnValue; //必须将提示的event.returnValue返回});

DOMContentLoaded事件在 load前面触发

//DOMContentLoaded事件该事件会在load前触发，不理会图像JavaScript文件 CSS文件是否下载完毕可以使用户更早的实现交互该事件冒泡实际对象是documentdocument.addEventListener('DOMContentLoaded', function() {alert('DOM树已经加载完毕但图像和javascript文件还没加载');});

模拟事件

模拟鼠标点击事件

createEllement（）；

var box = document.querySelector('.box');box.onclick = function() {box.style.backgroundColor = "red"; //设置属性颜色的方法}//模拟鼠标点击事件var event = document.createEvent("MouseEvent");event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //设置鼠标点击类型前面四个参数是最基本的参数box.dispatchEvent(event); //最后必须通过dispatchEvent(event)触发//模拟键盘事件

.11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件；鼠标与键盘事件变动事件模拟事件）

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。