JavaScript学习笔记——事件

时间:2022-09-14 08:40:16

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&period; JavaScript学习笔记——事件

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

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

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

  3. Java程序猿的JavaScript学习笔记(3——this&sol;call&sol;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&colon;学习笔记&lpar;9&rpar;——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——关闭&sol;getter&sol;setter)

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

随机推荐

  1. DBA日常SQL之查询数据库运行状况

    ,) Day, ,),,)) H00, ,),,)) H01, ,),,)) H02, ,),,)) H03, ,),,)) H04, ,),,)) H05, ,),,)) H06, ,),,)) H ...

  2. python中金额计算的小问题

    由于二进制对浮点运算存在精度问题,所以一些浮点计算经常会出现以下情况: # -*- coding: utf-8 -*- a = 1 b = 0.9 print(a-b) 结果: 0.099999999 ...

  3. 树莓派控制高电平蜂鸣器(c语言&plus;新手向)

    话不多说,先上代码: #include <wiringPi.h> #include <stdio.h> #include <sys/time.h> #define ...

  4. 学习Timer定时器

    原文地址:http://www.cppblog.com/ivenher/articles/19969.html setTimer函数用于创建一个计时器,KillTimer函数用于销毁一个计时器.计时器 ...

  5. rocketmq有序消息

    RocketMQ提供的顺序消费消息实现是使用的FIFO 先进先出算法 Producer消息发送 public class Producer { public static void main(Stri ...

  6. 使用jQuery修改带有!important 的强制样式

    我们习惯性的会用这种方法进行修改: $(".test").css("width","100px !important"); 但是往往是修改失 ...

  7. jquery&period;autocomplete详解

    语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars ( ...

  8. NOIP2012提高组 Day 2 Problem 2 借教室

    原题 题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我 ...

  9. &lbrack;kubernetes&rsqb;helm安装

    下载 HELM_VERSION=${K8S_VERSION:-"2.11.0"} HELM="helm-v${HELM_VERSION}-linux-amd64&quot ...

  10. CentOS开启和关闭防火墙

    CentOS Linux开启和关闭防火墙命令有两种,一种是临时的,重启即复原:另外一种是永久性的,重启不会复原.   1) 临时生效,重启后复原 开启: service iptables start ...