首页手记事件

事件

标签：

Html5

事件流分为捕获阶段和冒泡阶段
dom0 事件的特点：

dom0 事件就是直接通过 onclick 绑定到 html上的事件
<input onclick="xx"/>
或者
 input.onclick = function(){  ...  }
2. 清理dom0 事件时，只需给该事件赋值为 null

   input.onclick = null

3. 同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数

4. 不存在兼容性问题

dom2 事件的特点：

1. dom2 事件是通过 addEventListener 绑定的事件

2.同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行

function a() {   ...   }

function b() {   ...   }

input.addEventListener( "click" ,a)

input.addEventListener( "click" ,b)

3.清除 dom2 事件时，使用 removeEventListener

input.removeEventListener( "click" ,a)

dom2 级事件有三个参数： 第一个参数是事件名（如click）；

第二个参数是事件处理程序函数；

第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

removeEventListener():不能移除匿名添加的函数。
event.stopPropagation()
event.preventDefault()

ie8及之前ie版本：
attachEvent和detachEvent绑定事件
获取event:window.event
取消默认行为：event.returnValue=false
阻止冒泡：event.cancelBubble=true;
鼠标事件
click,dbclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup
mouseenter和mouseleave不会冒泡，且移动到后代元素上不会触发
mouseout和mouseover会冒泡，且移动到后代元素上会触发
dbclick事件顺序
mousedown
moseup
click
mousedown
mouseup
click
dbclick
事件坐标
clientX,clientY,pageX,pageY,screenX,screenY
修改键
鼠标事件event的这些属性shiftKey,ctrlKey,altKey，metaKey(windows键)可以判断键盘上这些键有没有被联动按下
滚轮事件
mousewheel事件有wheelDelta属性
键盘与文本事件
keydown,keypress,keyup,textInput
在发生keydowm和keyup事件时，event对象的keycode属性是一个ASCII码
keypress的event对象的charCode属性是一个ASCII码
textInput事件与keypress事件区别之一是只有在可编辑区域输入时才会触发这个事件，区别之二是只会在用户输入实际字符键时才会触发，例如输入退格键时不会触发textInput事件
textInput的event事件上有个inputMethods事件表示文本输入的方式
HTML5事件
contextmenu事件
beforeunload事件（window对象）
DOMContentLoaded事件（document对象）
readystatechange事件
hashchange事件
触摸与手势事件（ios版Safari支持）
touchstart
touchmove
touchend
这个三个事件的event对象除了常见的dom属性外，还有下面三个用于跟踪触发的属性
touchs
targetTouchs
changeTouchs

<!DOCTYPE html>
<html>
<head>
<title>Touch Events Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<p>Touch anywhere on the screen. This only works on an iPhone or iPod Touch running iPhone 2.x software.</p>
<div id="output"> 
</div>
<script type="text/javascript">
   function handleTouchEvent(event){
       
       //only for one touch
       if (event.touches.length == 1){
   
           var output = document.getElementById("output");
           switch(event.type){
               case "touchstart":
                   output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                   break;
               case "touchend":
                   output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                   break;
               case "touchmove":
                   event.preventDefault();  //prevent scrolling
                   output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                   break;
           }
       }
   }
   
   document.addEventListener("touchstart", handleTouchEvent, false);
   document.addEventListener("touchend", handleTouchEvent, false);
   document.addEventListener("touchmove", handleTouchEvent, false);

</script>
</body>
</html>

手势事件
gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕了
gesturechange：当触摸屏幕的任何一个手指位置发生变化后触发
gestureend:当任何一个手指离开屏幕时触发

点击查看更多内容