javasc-->Dom认识事件和事件类型
一、this
1.1、写一个函数，而函数里面没有内容，直接进行调用这个函数
那么函数打印的 this 代表的是整个窗口 window这个对象
1 function fanhgfa(){ 2 console.log(this) 3 } 4 fangfa();
1.2、一个对象
1 var ming = { 2 name:"小明", 3 sys:function(){ 4 console.log(this.name); //，如果是一个对象 ，this执行的是对象本身 5 } 6 } 7 ming.sys();
1.3 、 这个this代表的是元素本身。（dom）
1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <script src="../js/public.js" type="text/javascript" charset="utf-8"></script> 5 <script type="text/javascript">18 /* 元素本身 */ 19 window.onload = function(){ 20 $('#id').onclick = function(){ 21 console.log(111111111111111111111111111111111111); 22 } 23 } 24 </script> 25 </head>
<body>
<div id="id">zhongjian</div>
</body>
二、什么事件：
事件两部分： 发生事件， 针对事件的发生进行处理
每一个事件不是你想点就可以点的，这个时候就是如果你想实现什么东西，那个这个就叫事件绑定；
明天早上九点到 这个是事件
赴约 ：这个是过程
2.1、绑定事件：内联模式
外联模式
内联事件是直接在标签元素中进行绑定
1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <!-- 事件是发生并进行处理。这个叫做事件 --> 5 <script type="text/javascript"> 6 function neiBu(){ 7 console.log("这是一个内部事件"); 8 } 9 window.onload = function(){ 10 var oID = document.getElementById('id'); 11 oID.onclick = function(){ 12 console.log("这是一个外部事件调用，又叫脚本调用"); 13 } 14 } 15 </script> 16 </head> 17 <body> 18 <div onclick="neiBu()"></div> 19 <div id="id"></div> 20 </body>
二、事件类型：
事件类型也就是事件名称，以字符串的形式存在，用于指定要发生哪种事件。常用的事件类型：
2.1、表单：focus、blur、sumbit、change、select、reset 等
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* focus、blur、sumbit、change select */
// select选择文本框内容进行触发
/* change 内容改变失去焦点 */
/* focus获取焦点的时候 */
/* blur 失去焦点的时候触发 */
window.onload = function(){
var oId = document.getElementById('id');
oId.onselect = function(){
console.log("选择文本框内容进行触发");
}
oId.onchange = function(){
console.log("内容改变失去焦点");
}
oId.onfocus = function(){
console.log("获取焦点的时候");
}
oId.onblur = function(){
console.log("失去焦点的时候触发");
}
}
</script>
</head>
<body>
<input type="text"id="id" />
</body>
2.2、鼠标：mouseover(鼠标移入)、mouseup(鼠标移出)、mousemove(鼠标移动)、mousedown(鼠标按下)、
click(鼠标单击)、dbclick(鼠标双击)、mouseenter（鼠标移入）、mouseleave(鼠标移出)等。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 <script type="text/javascript"> 6 window.onload = function(){ 7 var oId = document.getElementById('id'); 8 oId.onclick = function(){ 9 console.log("这是一个点击触发事件"); 10 }; 11 var oId1 = document.getElementById('id1'); 12 oId1.ondblclick = function(){ 13 console.log("这个是鼠标双击事件"); 14 } 15 16 var oId2 = document.getElementById('id2'); 17 oId2.onmousedown = function(){ 18 console.log("这个是鼠标按下事件"); 19 } 20 var oId3 = document.getElementById('id3'); 21 oId2.onmouseup = function(){ 22 console.log("这个是鼠标抬起事件"); 23 } 24 /* 鼠标划进来 */ 25 var oId4 = document.getElementById('id4'); 26 oId4.onmouseover = function(){ 27 console.log("这个是鼠标抬起事件"); 28 } 29 /* 鼠标移出 */ 30 var oId5 = document.getElementById('id5'); 31 oId5.onmouseout = function(){ 32 console.log("这个是鼠标抬起事件"); 33 } 34 39 } 40 </script> 41 </head> 42 <body> 43 <!-- 点击事件 --> 44 <div id = 'id'>1</div> 45 <!-- 双击事件 --> 46 <div id = 'id1'>2</div> 47 <div id = 'id2'>3</div> 48 <div id = 'id3'>4</div> 49 <div id = 'id4'>5</div> 50 <div id = 'id5'>6</div> 51 <div id = 'id6'>7</div> 52 </body>
2.3、键盘：keydown、keyup、keypress等
1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <!-- 键盘：keydown、keyup、keypress等 --> 5 <script type="text/javascript"> 6 /* 按下任意键 */ 7 onkeydown = function(){ 8 console.log("这个是按下键盘中的任意键触发，如果按下不放开，就会一直触发") 9 } 10 /* 按下字符keypress */ 11 onkeypress = function(){ 12 console.log("这个是按下键盘中中的字符触发") 13 } 14 /* keyup抬起键盘事件 */ 15 onkeyup = function(){ 16 console.log("这个是抬起键盘就会触发") 17 } 18 </script> 19 </head> 20 <body> 21 </body>
2.4、触屏：touchstart、dragenter、dragend等
2.5、拖放：dragstart、dragenter、dragend等
2.6、鼠标事件对象属性：
1 pageX pageY 2 以整个页面的左上角为原点，包括滚动距离。 3 4clientX clientY 5一整个窗口可视区域的左上角为原点，不包括滚动距离。 6 7screenX screenY（了解） 8 以整个电脑屏幕的左上角为原点。 9 10 附加 11 offsetWidth //number width + border + padding 12 offsetHeight 13 offsetLeft 14 offsetTop
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 border: 1px solid #000; 11 margin:100px auto; 12 } 13 </style> 14 <script type="text/javascript"> 15 window.onload = function(){ 16 var oDiv = document.getElementById('id'); 17 console.log(oDiv.offsetWidth); /* center + border*/ 18 console.log(oDiv.offsetHeight); /* center + border*/ 19 console.log(oDiv.offsetLeft); /* 获取有边框到窗口的距离*/ 20 console.log(oDiv.offsetTop); /*距离上面的距离 100*/ 21 } 22 </script> 23 </head> 24 <body> 25 <div id = 'id'></div> 26 </body> 27 </html>
2.7、窗口(DOM window)：resize、scroll(和 scrollTo相互使用)、load、unload等
1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <style type="text/css"> 5 div{ 6 height: 3000px; 7 width: 200px; 8 border: 1px solid #B22222; 9 } 10 </style> 11 <script type="text/javascript"> 12 <!--resize。当窗口发生变化的时候触发 --> 13 window.onresize = function(){ 14 console.log("当窗口的大小旋转等发生变化的时候进行触发"); 15 } 16 <!-- scroll 当滚动滚动条的时候触发 --> 17 window.onscroll = function(){ 18 console.log("当滚动滚动条的时候触发"); 19 }
<!--当页面完全加载后在window上触发 -->
window.onload = function(){
} 20 </script> 21 </head> 22 <body> 23 <div></div> 24 </body>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 300px; 10 border: 1px solid #000; 11 overflow: auto; 12 margin:100px auto; 13 } 14 p{ 15 width: 200px; 16 height: 3000px; 17 border: 1px solid #000; 18 } 19 </style> 20 <script type="text/javascript"> 21 window.onload = function(){ 22 var oDiv = document.getElementById('id'); 23 var oP = document.getElementById('pid'); 24 oDiv.onscroll = function(){ 25 console.log(oDiv.scrollTop) //显示子元素滚动上去的 距离 26 }; 27 28 oDiv.scrollTo(0, 1000) //在页面运行的时候出现在这个位置 29 30 oP.onscroll = function(){ //不能加在本身上面，要加在父元素上面 31 console.log(22222) 32 } 33 } 34 </script> 35 </head> 36 <body> 37 <div id = 'id'> 38 <p id = 'pid'></p> 39 </div> 40 </body> 41 </html>
三、事件对象：
1 handleChange:function(event){ 2 console.log(event.target.value); 3 }
1 单机任意处函数 2 document.onclick=function(){ 3 console,log(arguments); //打印所有的元素 4 }; 5 或者 6 var fn = function(){ console,log(arguments); }; 7 document.onclick = fn 8 9 低版本ie的兼容写法 10 document.onclick=function(evt){ 11 var e = evt || window.event; 12 console.log(e); 13 };
解释：event： 就是事件对象
target: 获取事件对象的dom对象
event.target：这两个相互组成一起，就构造成 事件对象的属性
1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <!-- argument得到所有的参数 --> 5 <!-- even --> 6 <!-- douncment 单击任意处 --> 7 <script type="text/javascript"> 8 document.onclick = function(even){ 9 var e = even || window.event; 10 console.log(e); //这个是系统默认的系统的对象 11 } 12 13 /* 正常方法 */ 14 function fangfa(){ 15 console.log(arguments); 16 } 17 fangfa(); 18 </script> 19 </head> 20 <body> 21 </body>
浏览器的默认行为：事件冒泡
事件冒泡：从最里面的元素节点开始，向外层进行穿透，依此去执行对应的事件。（由里向外）
事件捕获：从最外面的元素节点开始，想内层进行穿透，依此去执行对应的事件。（由外向里）
阻止事件冒泡的浏览器兼容写法
1 function stopBubble(e){ 2 if(e.cancelBubble){ 3 e.cancelBubble = true; 4 }else{ 5 e.stopPropagation(); 6 } 7 }
事件监听器 == 另外一种绑定事件的方式
addEventListener()
格式：node.addEventListener(事件类型, 函数, false);
参数：第一个参数 事件类型 click load
第二个参数 函数
第三个参数 默认false false事件冒泡 true事件捕获
removeEventListener()
功能：移除由 addEventListener() 方法添加的事件
格式：node.removeEventListener(事件类型，函数名);
事件委托 实现的原理是 事件冒泡
li不想自己干这件事，li委托父节点/祖父节点去干这件事。
1、找到父节点或者祖父节点
2、将事件绑定在父节点上
3、找到触发该事件的目标对象target
4、判断target是否是我们想要响应的对象，如果是，直接执行具体的操作。
浙公网安备 33010602011771号