Javascript 事件
来源:互联网 发布:simcms二手车源码 编辑:程序博客网 时间:2024/05/18 06:33
事件
- 事件源
- 事件名
- 事件注册
- 事件处理
粤商大酒店201房间发生火灾,119电话报警,南湖区消防支队出警,赶赴现场通过喷水作业成功灭火。
事件源:粤商大酒店201房间
事件名:火灾
事件注册:事先已经规划好片区,粤商大酒店所属片区归南湖区消防支队负责
事件处理:喷水
常用事件
鼠标常用事件:
(1)单击事件
- <body>
- <p id="p1" onclick="fun()">单击事件测试</p>
- </body>
- <script>
- functionfun(){
- //获取到指定元素
- varp1 = document.getElementById("p1");
- p1.innerText= "我被单击了!";
- p1.style.fontSize="60px";
- }
- </script>
在这个案例中,事件源就是id为“p1”的元素,事件名是单击,事件注册是onclick="fun()",也就是说当单击id为“p1”的元素时,就交由fun函数来处理。
(2)双击事件
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #div1{
- width:100px;
- height:100px;
- background-color:skyblue;
- }
- </style>
- </head>
- <body>
- <div id="div1" onclick="zoomout()"ondblclick="zoomin()">
- </div>
- </body>
- <script>
- functionzoomout(){
- var div1 = document.getElementById("div1");
- div1.style.width = "200px";
- div1.style.height = "200px";
- }
- functionzoomin(){
- var div1 = document.getElementById("div1");
- div1.style.width = "100px";
- div1.style.height = "100px";
- }
- </script>
- </html>
- (3)鼠标按下/弹起(onmousedown onmouseup)
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #div1{
- width:100px;
- height:100px;
- background-color:skyblue;
- }
- </style>
- </head>
- <body>
- <div id="div1" onmousedown="zoomout()"onmouseup="zoomin()">
- </div>
- </body>
- <script>
- functionzoomout(){
- var div1 = document.getElementById("div1");
- div1.style.width = "200px";
- div1.style.height = "200px";
- }
- functionzoomin(){
- var div1 = document.getElementById("div1");
- div1.style.width = "100px";
- div1.style.height = "100px";
- }
- </script>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #div1{
- width:100px;
- height:100px;
- background-color:skyblue;
- }
- </style>
- </head>
- <body>
- <div id="div1" onmouseenter="red()" onmouseleave="blue()">
- </div>
- </body>
- <script>
- functionred(){
- var div1 = document.getElementById("div1");
- div1.style.backgroundColor ="red";
- }
- functionblue(){
- var div1 = document.getElementById("div1");
- div1.style.backgroundColor ="skyblue";
- }
- </script>
- </html>
与onmouseenter、onmouseleave很类似。
(6)鼠标移动 onmousemove
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #div1{
- width:300px;
- height:300px;
- background-color:skyblue;
- }
- #img1{
- position:absolute;
- top:0px;
- left:0px;
- }
- </style>
- </head>
- <body>
- <div id="div1" onmousemove="move(event)">
- </div>
- <img id="img1" src="man.png">
- 鼠标的坐标<p id="p1"></p>
- </body>
- <script>
- functionmove(e){
- var p1 = document.getElementById("p1");
- var img1 = document.getElementById("img1");
- p1.innerText = e.clientX+","+ e.clientY;
- img1.style.top = e.clientY+"px";
- img1.style.left = e.clientX+"px";
- }
- </script>
- </html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #div1{
- width:100px;
- height:100px;
- background-color:skyblue;
- }
- </style>
- </head>
- <body>
- <div id="div1" onmousewheel="wheel(event)">
- </div>
- </body>
- <script>
- varwidth =100;
- varheight =100;
- functionwheel(e){
- if(e.wheelDelta> 0){
- width+= 5;
- height+= 5;
- }else{
- width-= 5;
- height-= 5;
- }
- vardiv1 = document.getElementById("div1");
- div1.style.width= width+"px";
- div1.style.height= height+"px";
- }
- </script>
- </html>
(1)keypress
- functionsearch(e){
- if(e.keyCode== 13){
- varwhat =document.getElementById("what");
- alert("开始搜索:"+what.value);
- }
- }
keypress事件只能捕获可打印字符的按键,不能捕获诸如shift、ctrl、alt等不可打印字符的按键。
但是可以通过shiftkey、ctrlkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键。
(2)keydown、keyup
- <body>
- <input id="what" type="text" onkeydown="keydown(event)">
- </body>
- <script>
- functionkeydown(e){
- alert(e.keyCode);
- }
- </script>
- keydown、keyup可以捕获键盘上所有的键(个别除外)。
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #img1{
- position:absolute;
- top:0px;
- left:0px;
- }
- </style>
- </head>
- <body onkeydown="move(event)">
- <img id="img1" src="man.png">
- </body>
- <script>
- vartop1 =0;
- varleft =0;
- functionmove(e){
- switch(e.keyCode){
- case37:left-=5;break;
- case38:top1-=5;break;
- case39:left+=5;break;
- case40:top1+=5;break;
- }
- varimg1 = document.getElementById("img1");
- img1.style.top= top1+"px";
- img1.style.left= left+"px";
- }
- </script>
- </html>
(1)使用变量top导致上下移动失败,原因是和window.top这个全局变量冲突了,换个变量名就好了。
(2)如果把变量top1和left移入函数中,发现只能移动5像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化,也就是说每一次调用left和top1的值都是0,不会保留上一次的值。如果需要保留,就只能用全局变量了。
其它事件:
onload:页面加载事件
onfocus:获得焦点的事件
onblur:失去焦点事件
onchange:值改变事件
事件的注册
三种方法:
(1)使用onXXX属性,比如onclick="fun()"
(2)通过js去设置元素的onXXX属性
(3)通过addEventListener注册
- <body>
- <input type="text" id="txt1" onfocus="focus1()">
- </body>
- <script>
- vartxt1 = document.getElementById("txt1");
- //注册事件的第二种方法
- txt1
- txt1
- txt1.onblur =blur2;
- //注册事件的第三种方法
- txt1
- txt1
- txt1.addEventListener("change",function(){
- alert("值改变了");
- });
- functionfocus1(){
- txt1.style.backgroundColor="blue";
- }
- functionblur2(){
- vartxt1 =document.getElementById("txt1");
- txt1.style.backgroundColor="gray";
- }
- </script>
后两种方法有何好处?将页面的内容、样式和行为分离,内容和样式可能是美工人员去完成,行为(实际上就是JS的内容)往往是程序员的事。分离后利于分工合作。
第三种方式addEventListener的第一个参数事件名,第二个参数是事件处理函数。可以添加事件监听,当然也就可以移除,用的是removeEventListener,参数与addEventListener参数是一样的。
而且通过addEventListener和removeEventListener甚至我们可以去动态地去注册不同的事件处理程序。
捕获与冒泡
- <body>
- <div id="div1">
- <p id="p1">捕获和冒泡的演示</p>
- </div>
- </body>
- <script>
- vardiv1 = document.getElementById("div1");
- varp1 = document.getElementById("p1");
- p1.addEventListener("click",click1);
- div1.addEventListener("click",click2);
- functionclick1(){
- alert("段落被单击了");
- }
- functionclick2(){
- alert("div被单击了");
- }
- </script>
- </html>
但是如何去规定两个事件的处理顺序呢?这就是事件的冒泡和捕获。
冒泡:按照从内到外的顺序依次触发,默认方式;
捕获:反之
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style>
- div{
- border:1px solid blue;
- }
- #div2{
- width:100px;
- height:100px;
- background-color:skyblue;
- margin:10px;
- }
- </style>
- </head>
- <body>
- <div id="div1">
- <div id="div2">
- </div>
- </div>
- </body>
- <script>
- vardiv1 =document.getElementById("div1");
- vardiv2 =document.getElementById("div2");
- /*div1.onmouseenter= enter1;
- div2.onmouseenter = enter2;*/
- div1
- div2.onmouseenter = enter2;*/
- div1
- div2.onmouseenter = enter2;*/
- div1.onmouseover=enter1;
- div2.onmouseover=enter2;
- functionenter1(){
- alert("进入div1");
- }
- functionenter2(){
- alert("进入div2");
- }
- </script>
当使用mouseenter事件时,当里层的div触发进入事件时,处理完了就完事了(阻断冒泡);而使用mouseover事件时,当里层的div触发进入事件时,处理完了还会冒泡给父容器处理进入事件
阅读全文
2 0
- Javascript事件
- javascript 事件
- Javascript 事件
- javascript 事件
- Javascript 事件
- JavaScript 事件 ***
- Javascript事件
- Javascript 事件
- JavaScript 事件
- Javascript 事件
- javascript事件
- javascript事件
- javascript 事件
- javascript事件
- javascript 事件
- JavaScript 事件
- JavaScript事件
- JavaScript 事件
- indexedDB的基本使用
- Python利用Requests库写爬虫
- POJ
- OSI七层结构及TCP/IP五层结构
- Task Distribution--HihoCoder-1309
- Javascript 事件
- Java基础知识_查漏补缺篇
- 2017年8月8日提高组T2 呀!回文串
- Python入门
- 动态规划基础篇之最长公共子序列问题
- 2017.8.8--------练习赛
- HDU-1018 BigNumber
- 大话设计模式读后感之模板方法模式
- Ubuntu16.04下安装Visual Studio Code