JS学习十三:事件
一、事件处理程序
事件:就是用户或者浏览器执行的某种动作。
事件处理程序:就是响应事件的函数,事件处理程序的名字以"on"开头。
事件一般指鼠标、键盘事件。
定义事件的四种方式:
方式一:直接在HTML标签中,给与事件处理程序同名的属性赋值,值为函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> #box1,#box2,#box3,#box4 { width: 100px; height: 100px; background-color: red; } </style> </head> <body style="height: 1000px;"> <!-- 方式一:alert() --> <div id="box1" onclick="alert('lllllllllll')"> </div> <br /> <!-- 方式二:自定义脚本函数 --> <div id="box2" onclick="func()"> </div> <br /> <!-- 方式三:通过元素节点.onclick = 函数 --> <!-- 方式三优点:html,css与js分离 --> <div id="box3"> </div> <br /> <!-- 方式四:通过监听元素节点事件:元素节点.addEventListener(事件类型,函数,false) --> <div id="box4"> </div> <!-- 方式三重复定义相同的事件,后面的事件覆盖前面的 --> <!-- 方式四重复定义相同的事件,都会执行 --> <script type="text/javascript"> function func() { alert("kwg kwg ") } var div3 = document.getElementById("box3") div3.onclick = function() { alert("aaaaaa") } var div4 = document.getElementById("box4") // div4.addEventListener("click", function () { // alert("ccccc") // }, false) //方式三:清除事件 div3.onclick = null function func4 () { alert("ccccc") } div4.addEventListener("click", func4, false) //方式四清除事件:要同定义事件的3个参数一样,函数名当然不能为匿名函数 div4.removeEventListener("click", func4, false) </script> </body> </html>
方式一及通常情况下,标签中的this代表window
方式二:标签中的this代表自身,脚本的函数中的形参self代表标签自身。但是此时,在函数中的this代表windows。
自定义函数,可以绑定元素本身,而不需要再去获取元素节点。
绑定:在元素的事件属性的自定义函数中,第一个参数传入this,形参;在定义函数的脚本中,第一个参数传入self,形参。
self就是元素节点自身,可以直接在函数中使用self去使用此元素,并操作它;而不需要再去获取元素节点,再来操作元素。
方式二中的this:不能在脚本中使用this去操作元素节点,this代表window
<div id="box2" onclick="func(this)"> </div>
<script type="text/javascript"> function func(self) { self.style.backgroundColor = "black" alert("kwg kwg ") } </script>
方式三、方式四:在脚本中的事件函数中,可以直接使用this,而无需通过参数传递。代表元素本身,当作元素节点使用。
在标签中,并没有定义事件处理函数,而是标签与事件处理函数分离;通过获取元素节点,添加事件,添加响应函数,实现的事件处理。
这种情况,脚本中的函数,不可能传入self;在这种方式中的this,不是代表window,而是代表这个元素节点自身。
因此方式三、方式四的脚本中,可以使用this去操作元素
<div id="box3"> </div>
var div3 = document.getElementById("box3")
div3.onclick = function() {
this.style.backgroundColor = 'green'
alert("aaaaaa")
}
DOM0级事件处理:方式三的处理方式,标签与JS分离,前提要给标签一个id属性或其它能获取元素节点的方式。比较早期的处理方式。
DOM2级事件处理:方式四的处理方式,添加事件监听。
this的总结:
- 能否使用this,this代表什么
- 方式二定义的事件:在标签中使用,代表的是标签本身
- 方式二定义的事件:在函数体中直接使用,代表的是window。通过形参self将this传递过来,使用self,代表标签本身。但使用this,仍然表示的是窗口。
- 方式二:在标签中将this作为实参传递到函数中,在函数体中使用形参数self接收,此时函数体中的self代表的是标签本身,但this代表window
- 方式三、四:在事件函数中使用(方式三、四),this代表标签本身。
二、焦点事件
焦点事件:针对input标签
聚焦:focus,离焦:blur
<body style="height: 1000px;"> <input type="text" name="" id="in" value=""/> <script type="text/javascript"> var input = document.getElementById("in") input.addEventListener("focus", function() { console.log("聚焦事件") },false) input.addEventListener("blur", function() { console.log("离焦事件") }, false) </script> </body>
三、鼠标单击、双击事件
单击、双击事件,只定义任何一个事件都没有问题。
但是,同时定义它位的时侯,双击的时侯,也会算作两次单击。
解决办法:用定时器区分单击、双击。
1.当单击的时侯,首先清除变量time:单击事件肯定得到响应,同时,然后设置它300毫秒的延时执行。
2.在延时执行期间,即300毫秒内,没有再次出现单击:则单击事件的函数,300毫秒超时,函数得到执行。最终表现为:单击事件。
3.如果300毫秒内,再次出现单击,属于双击事件,双击函数肯定得到执行。第二次单击函数也得到执行,首先会清除掉time,即清除掉第1次的单击事件;随即,生成第二次单击事件,在300秒后执行。但是由于在执行双击事件函数时,也清除了一次time,即第二次的单击事件也被清除。最终表现为:双击事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body style="height: 1000px;"> <div id="in" style="width: 100px;height: 100px;background-color:red;"></div> <script type="text/javascript"> var div = document.getElementById("in") var time div.addEventListener("click", function () { clearTimeout(time) time = setTimeout(function(){ console.log("单击") }, 300) // console.log("单击") }, false) div.addEventListener("dblclick", function () { clearTimeout(time) console.log("双击") },false) </script> </body> </html>
四、鼠标事件:
mouseover鼠标进入,mouseout鼠标离开,mousedown鼠标按下,mouseup鼠标松开,mousemove鼠标移动
<ul> <li>鼠标进入变红色</li> <li>鼠标离开变蓝色</li> <li>鼠标按下字体大2倍</li> <li>鼠标抬起小2倍</li> </ul> <script type="text/javascript"> var lis = document.getElementsByTagName("li") for (var i =0; i < lis.length; i++) { lis[i].addEventListener("mouseover", function(){ this.style.backgroundColor = "red" }, false) lis[i].addEventListener("mouseout", function(){ this.style.backgroundColor = "blue" }, false) lis[i].addEventListener("mousedown", function(){ this.style.fontSize = parseInt(getComputedStyle(this, null).fontSize)* 2 + "px" }, false) lis[i].addEventListener("mouseup", function(){ this.style.fontSize = parseInt(getComputedStyle(this, null).fontSize) /2 + "px" }, false) } document.addEventListener("mousemove", function() { console.log("鼠标在移动") }, false) </script>
鼠标对象
<div id="in" style="width:100px;height:100px;background-color:red;"></div> <script type="text/javascript"> var div = document.getElementById("in") div.addEventListener("click", function(e){ var event = e||window.event; console.log(event) }, false) </script>
鼠标对象的一些属性:
clientX:鼠标距离浏览器可视窗口左边的距离
clientY:鼠标距离浏览可视窗口顶部的距离
offsetX:...
pageX:鼠标距离页面的左边距离
pageY:
screenX:鼠标距离屏幕的左边距离 。
五、键盘事件
- KeyDown:用户摁下摁键时发生
- KeyPress:用户摁下摁键,并且产生一个字符时发生
- KeyUp: 用户释放某一个摁键时触发
按下键盘会触发键盘事件,顺序依次为:keydown->keypress->keyup.
完整的 keypress 过程分为两个部分:1. 按键被按下;2. 按键被松开。
当按钮被按下时,发生 keydown 事件。 当按钮松开时,发生keyup事件。
<script type="text/javascript"> document.addEventListener("keydown", function(e) { // window.event是ie浏览器,e是非ie浏览器 var event = e || window.event console.log(event) console.log(event.key, event.keyCode, event.altKey, event.ctrlKey, event.shiftKey) }, false) document.addEventListener("keyup", function(e) { // window.event是ie浏览器,e是非ie浏览器 var event = e || window.event console.log(event) console.log(event.key, event.keyCode, event.altKey, event.ctrlKey, event.shiftKey) }, false) document.addEventListener("keypress", function(e) { // window.event是ie浏览器,e是非ie浏览器 var event = e || window.event console.log(event) console.log(event.key, event.keyCode, event.altKey, event.ctrlKey, event.shiftKey) }, false) </script>
键盘对象, 常用的属性key,keyCode,shiftKey,ctrKey,altKey
六、事件流
事件流:是指从页面接受事件的顺序。
事件流有两种方式,一种事件捕获,一种事件冒泡。
事件捕获,是从最外层docuement,到内层的事件元素;而事件冒泡,是从内层的事件元素,到最外层的document。
为了解决以上矛盾,w3c做了规定,事件流分为3个阶段:事件捕获阶段、处于目标阶段,事件冒泡阶段。
比如,在定义延时函数的时侯,第三个参数:false为事件冒泡,true为事件获铺
假设有两个事件,点击body,改变body颜色为blue;点击div,只改变div颜色为orange。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #box { width:100px; height:100px; background-color:red; } </style> </head> <body style="height: 1000px;"> <div id="box"></div> <input type="text" name="in" id="put" /> <a href="red.html" id="link">点我跳跳</a> <script type="text/javascript"> document.body.onclick = function(){ this.style.backgroundColor = "blue"; } document.getElementById("box").onclick = function() { this.style.backgroundColor = "orange"; } </script> </body> </html>
由于事件流,点击div,必须也会触发body的onclick事件。
办法:点击div时侯,掐断冒泡行为发生。
点击div会冒泡,点击input会冒泡,点击a标签会冒泡,全部阻断:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #box { width:100px; height:100px; background-color:red; } </style> </head> <body style="height: 1000px;"> <div id="box"></div> <input type="text" name="in" id="put" /> <a href="red.html" id="link">点我跳跳</a> <script type="text/javascript"> document.body.onclick = function(){ this.style.backgroundColor = "blue"; } document.getElementById("box").onclick = function(e) { var ev = e || window.envent // 掐断冒泡 ev.stopPropagation() this.style.backgroundColor = "orange"; } document.getElementById("put").onclick = function(e) { var ev = e || window.envent ev.stopPropagation() } document.getElementById("link").onclick = function(e) { var ev = e || window.envent ev.stopPropagation() } </script> </body> </html>
点击a标签,出现提示,是否跳转页面:
document.getElementById("link").onclick = function(e) { var ev = e || window.envent //确认窗口 var info = window.confirm("你浏览的页面存在风险,是否继续?") if (info == false) { //取消跳转:使用事件阻止 ev.preventDefault() } }
一些封装函数
//获取滚动高度 function $scrollTop() { return document.documentElement.scrollTop || document.body.scrollTop; } //根据id获取元素节点 function $(idName) { return document.getElementById(idName) } //获取可视窗口的宽度 function(){ return document.body.width || document.documentElement.width||window.innerWidth; } //获取随机颜色 function(){ var r = parseInt(Math.random()*256); var g = parseInt(Math.random()*256); var b = parseInt(Math.random()*256); return "rgb('+r+','+g+','+b+',)" } //获取内部样式表/外部样式表中属性的性性值 //obj-->元素节点 //at-->属性名 function getStyle(obj, at) { if (obj.currentStyle) { //IE return obj.currentStyle[at]; }else{ return window.getComputedStyle(obj, null)[at]; } }
posted on 2018-11-19 20:08 myworldworld 阅读(123) 评论(0) 收藏 举报