JavaScript学习笔记——事件

2015-08-19

tonglin0325

javascript事件基础和事件绑定

一、事件驱动
1.事件
　　javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)
2.事件源
　　引发事件的元素。(发生在谁的身上)
3.事件处理程序
　　对事件处理的程序或是函数 (发生了什么事)

二、事件的分类

<body>
<input type="button" value="改变" id="one" >

</body>

1.鼠标事件

onclick

var one=document.getElementById("one");
one.onclick=function  () {
  alert("点击");
}

    var one=document.getElementById("one");

one.onclick=aa;
alert(aa)
function aa () {
  alert("点击");
}

ondblclick

onmousedowm
onmouseup
onmousemove
onmouseover
onmouseout

** 2.键盘事件**
onkeyup
onkeydown
onkeypress 鼠标按下或按住

** 3.表单事件**
onsubmit
onblur
onfoucs
onchange

** 4.页面事件**
onload
onunload
onbeforeunload

三、如何绑定事件

1.在脚本中绑定
2.直接在HTML元素绑定
3.

四、同一个事件绑定多个事件处理程序

1.自己写的
2.IE:
对象.attachEvent(“事件(on)”,”处理程序”) 　　添加
对象.dettachEvent(“事件(on)”,”处理程序”) 　　删除

one.attachEvent("onclick",aa);
one.attachEvent("onclick",bb);
function aa () {
   alert("aa");
}
   function bb() {
   alert("bb");
}

one.detachEvent("onclick",bb)
one.attachEvent("onclick",function  () {
 alert("cc");
});
   one.detachEvent("onclick",function  () {
 alert("cc");
});

FF:
对象.addEventListener(“事件”,”处理程序”,布尔值) 　　添加
对象.removeEventListener(“事件”,”处理程序”,布尔值) 　　删除

one.addEventListener("click",bb,false)
  one.addEventListener("click",aa,false)
   one.addEventListener("click",function  () {
     alert("cc");
   },false)
    one.removeEventListener("click",function  () {
     alert("cc");
   },false)
 function aa () {
      alert("aa");
   }
     function bb() {
      alert("bb");
   }

Mozilla中：

addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById(“testText”).addEventListener(“keydown”, function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。例如：document.getElementById(“txt”).attachEvent(“onclick”,function(event){alert(event.keyCode);});

javascript事件对象实例讲解

一、事件对象
用来记录一些事件发生时的相关的信息的对象
1.只有当事件发生的时候才产生，只能在处理函数内部访问

2.处理函数运行结束后自动销毁。

二、如何获取事件对象

IE：window.event

FF:<br />      对象.on事件=function (e){}

三、事件对象的属性

** 1.关于鼠标事件的事件对象**

 相对于**浏览器**位置的<br />     clientX  当鼠标事件发生的时候，鼠标相对于**浏览器X轴**的位置<br />     clientY  当鼠标事件发生的时候，鼠标相对于**浏览器Y轴**的位置

相对于屏幕位置的
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置
screenY 当鼠标事件发生的时候，鼠标相对于屏幕Y轴的位置

document.onmousemove=function  (e) {
  var ev=e||window.event;
  var cx=ev.clientX;
  var cy=ev.clientY;
  var sx=ev.screenX;
  var sy=ev.screenY;
  div1.innerHTML="cx:"+cx+"--cy:"+cy+"<br/>sx:"+sx+"--sy:"+sy;
}

相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
offsetY

FF:
layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
laterY

div1.onclick=function  (e) {
  var ev=e||window.event;
  var ox=ev.offsetX ||ev.layerX;
  var oy=ev.offsetY ||ev.layerY;
div1.innerHTML="ox:"+ox+"--oy:"+oy;
}

** 2.关于键盘事件的事件对象**

**　　keyCode 获得键盘码**
　　　　空格:32 回车13 左上右下：37 38 39 40

**　　altKey 判断alt键是否被按下** 按下是true 反之是false 布尔值

document.body.onkeydown=function  (e) {
  var ev=e||window.event;
  alert(ev.keyCode)
  alert(ev.altKey)
  alert(ev.type)
}

ctrlKey
shiftKey
type 用来检测事件的类型主要是用于多个事件通用一个事件处理程序的时候

javascript事件流讲解和实例应用

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定
顺序相应该元素的触发事件，事件传播的顺序叫做事件流程。

一、事件流的分类

** 　　1.冒泡型事件(所有的浏览器都支持)**
　　　　由明确的事件源到最不确定的事件源依次向上触发。

** 　　2.捕获型事件(IE不支持 w3c标准火狐)**
　　　　不确定的事件源到明确的事件源一次向下触发。
　　　　addEventListener(事件，处理函数，false)
　　　　addEventListener(事件，处理函数，true)

二、阻止事件流
　　IE:
　　　　事件对象.cancelBubble=true;
　　FF:
　　　　事件对象.stopPropagation();

三、目标事件源的对象
　　IE：事件对象.srcElement
　　FF:事件对象.target

<br />

tonglin0325的个人主页

JavaScript学习笔记——事件

tonglin0325

标签

标签云

文章归档

最近文章