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.<script for="two" event="onclick">
alert("我是DIV2");
</script>

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

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:
对象.on事件=function (e){}

三、事件对象的属性

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

相对于浏览器位置的
clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置
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

JavaScript学习笔记——事件的更多相关文章

  1. 8. JavaScript学习笔记——事件

    8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...

  2. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  3. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  5. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  6. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  7. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  8. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

随机推荐

  1. Beta冲刺---Day1

    站立式会议 站立式会议内容总结: 照片 老师是对的,其实无论在什么时候,都不会有一段很长很空闲的时间.比如说这个时候就还是有一大堆的作业.考试. 希望我们组员能够告别拖延症,然后再编码的时候全心地投入 ...

  2. android时区

    <timezones>    <timezone id="Pacific/Majuro">马朱罗</timezone>    <timez ...

  3. ES6新特性：Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  4. MAC下Eclipse的常用快捷键

    整理Eclipse常用快捷键 开发环境切换到Mac下后原来Window下的快捷键很大一部分是不相容的,习惯了快捷键的生活忽然哪天快捷键不起作用了,跟着的就是开发效率明显降低,频繁录入错误的快捷键让Ec ...

  5. 根据位置信息提取 fasta 文件中的序列 -- extract fasta sequence by their position

    #!/usr/bin/env python # usages: python extract_seq_by_pos.py input.fasta id_start_end > result.fa ...

  6. [bzoj4552][Tjoi2016][Heoi2016]排序

    Description 给出一个$1$到$n$的全排列,现在对这个全排列序列进行$m$次局部排序,排序分为$2$种: $1.(0,l,r)$表示将区间$[l,r]$的数字升序排序; $2.(1,l,r ...

  7. 一次愚蠢的NOIP模拟赛

    找礼物[find.pas/find.c/find.cpp] [问题描述] 新年到了,突然间,就在那美丽的一霎那,你好友和你(K个人)的周围满是礼物,你发扬你帅气的风格,让你的好友先拿,但是每个人只能拿 ...

  8. 【BZOJ-3832】Rally 拓扑序 + 线段树 （神思路题！）

    3832: [Poi2014]Rally Time Limit: 20 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 168  Solved:  ...

  9. NOIP2013

    DAY1 转圈游戏 列出式子(x+km)%n,快速幂. // codevs3285 #include<algorithm> #include<iostream> #includ ...

  10. MySoft.Data 2.7.3版本的GitHub托管（ORM升级封装）

    MySoft.Data 2.7.3 dotnet ORM 版权 这里版权属于老毛:http://www.cnblogs.com/maoyong 说明 MySoft体系中的ORM组件,这里的版本为2.7 ...