Javascript 事件

是指 Javascript 捕获到用户的操作,并做出正确的相应。

Javascript 事件一般与DOM元素绑定。

Javascript处理事件的基本机制

1、对DOM元素绑定事件处理函数。

2、监听用户的操作。

3、将用户在相应的DOM元素上进行与绑定事件对应的操作时,事件处理函数做出相应。

4、将处理结果更新到HTML文档。

Javascript支持的事件

窗口事件(Window Events)

onload  当页面加载完毕后触发

onunload 当页面被卸载时触发

表单元素事件(Form Element Events)

onchange 当元素(select、checkbox等)改变时触发

onsubmit 当表单(form)被提交时触发

onreset 当表单重置时触发

onselect 当元素被选取时触发

onblur 当元素失去焦点时触发

onfocus 当元素获得焦点时触发

图像事件(Image Events)

onabort 当图像加载中断时触发

键盘事件(Keyboard Events)

onkeydown 当键盘按下时触发

onkeypress 当键盘按下后又松开时触发

onkeyup  当键盘松开时出发

鼠标事件(Mouse  Events)

onclick 当鼠标单击时触发

ondbclick 双击时

onmousedown 按下时

onmousemove 移动时

onmouseout 移出元素时

onmouseover 悬停于某元素时

onmouseup 按钮松开时

绑定事件

如果想让Javascript对用户的操作做出相应,首先要对DOM元素绑定处理事件。

一、在DOM元素中直接绑定

1、原生函数

<input type="button" onclick="alert('原生函数')" value="点我" />

2、自定义函数

<input type="button" onclick="showAlert()" value="点我" />
<script type="text/javascript">
var showAlert = function()
{
alert("自定义函数");
}
</script>

二、在Javascript 代码中绑定

<input type="button" id="btn" value="点我">
<script>
document.getElementById("btn").onclick=function(){
alert(this.getAttribute("type"));
}
</script>

三、绑定事件监听函数

1、addEventListener()

elementObject.addEventListener(eventName,handle,useCapture);

ie8不支持 ,ie9以上支持

2、attachEvent()

elementObject.attachEvent(eventName,handle);

支持ie8及以下浏览器

<input type="button" id="demo" value="点我" />

<script>
function addEvent(obj,type,handle){
try{ //ie9+
obj.addEventListener(type,handle,false); //false代表不捕获
}catch(e){
try{ //ie8
obj.attachEvent('on'+type,handle);
}catch(e){ //早期浏览器
obj['on'+type] = handle;
}
}
}
function myAlert(){
alert("我的alert");
}
addEvent(document.getElementById("demo"),"click",myAlert);
//第一个参数元素,第二个参数不加on,第三个参数不加()
</script>

Javascript Event对象

event对象用来表示当前事件,event对象的属性和方法包含了当前事件的状态。

event对象只在事件发生的过程中才有效。

判断点下鼠标哪个键

<div style="width:200px;height:100px;border:1px solid #ccc" onmousedown="clickButton(event)">
请在文档中点击鼠标。
</div>
<script>
var clickButton = function(event)
{
var btnNum = event.button; //返回哪个鼠标被点下
switch (btnNum){
case 0:
alert("左键");
break;
case 1:
alert("中键");
break;
case 2:
alert("右键");
break;
default:
alert("不确定");
break;
}
}
</script>

显示鼠标坐标

<div id="move" style="width:200px;height:100px;border:1px solid #ccc" onmousemove="showxy(event)">
请在文档中移动鼠标。
</div>
<script>
var showxy = function(event){
x = event.clientX; //客户端水平坐标
y = event.clientY; //客户端垂直坐标
x1 = event.screenX; //计算机屏幕水平坐标
y1 = event.screenY; //计算机屏幕垂直坐标
document.getElementById("move").innerHTML="客户端坐标:X:"+ x + ",Y:"+y +"<br>" + "计算机屏幕坐标:X:" + x1 + ",Y:" + y1;
}
</script>

事件源

事件源指触发事件的DOM节点,就是谁触发的这个事件。

target ie8不支持,ie8使用srcElement;

<button id="targetBtn" attr="123">点击</button>
<script>
document.getElementById("targetBtn").onclick=function(e)
{
var eve = e || window.event;
var srcNode = eve.target || eve.srcElement; //这样都兼容了
alert(srcNode.getAttribute("attr"));
}
</script>

表单事件

<form>
<input type="text" id="userName" name="userName">
<input type="password" id="password" name="password">
<button type="submit">提交</submit> <button type="reset">重置</button>
</form>
<script>
var userName = document.forms[0][0]; //第0个表单,第0个元素
var password = document.forms[0][1]; userName.focus(); //默认获得焦点 document.forms[0].onsubmit = function()
{
if(userName.value == "")
{
alert("请输入账号!");
userName.focus();
return false;
} if(password.value == "")
{
alert("请输入密码!");
password.focus();
return false;
}
return true;
}
</script>

全选,反选

<div>
<input type="checkbox" name="id" value="1"> 1<br/>
<input type="checkbox" name="id" value="2"> 2a<br/>
<input type="checkbox" name="id" value="3"> 3<br/>
<input type="checkbox" name="id" value="4"> 4<br/>
<input type="checkbox" name="id" value="5"> 5<br/>
<input type="checkbox" name="id" value="6"> 6<br/>
<input type="checkbox" name="id" value="7"> 7<br/>
<input type="checkbox" name="id" value="8"> 8<br/>
<input type="checkbox" name="id" value="9"> 9<br/>
<input type="checkbox" name="id" value="10"> 10<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNoAll()">全不选</button>
<button onclick="checkNo()">反选</button>
</div>
<script>
var checkAll = function()
{
var items = document.getElementsByName("id");
for(var i = 0; i < items.length; i++)
{
items[i].checked=true;
}
}
var checkNoAll = function()
{
var items = document.getElementsByName("id");
for(var i = 0; i < items.length; i++)
{
items[i].checked=false;
}
}
var checkNo= function()
{
var items = document.getElementsByName("id");
for(var i = 0; i < items.length; i++)
{
if(items[i].checked)
{
items[i].checked = false;
}else{
items[i].checked = true;
}
}
}
</script>

25、Javascript 事件的更多相关文章

  1. 重温javascript事件机制

    以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...

  2. JavaScript事件代理和委托(Delegation)

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  3. JavaScript事件概览

    JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...

  4. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  5. JavaScript 事件

    事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...

  6. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  7. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  8. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  9. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

随机推荐

  1. struts一点心得

    action中: 设置属性并增加get,set方法,给属性赋值后 (如: private String name; public String getName() { return name; } p ...

  2. ActivityManager的使用

    本节内容主要是讲解ActivityManager的使用,通过ActivityManager我们可以获得系统里正在运行的activities,包括 进程(Process)等.应用程序/包.服务(Serv ...

  3. Drainage Ditches(Dinic最大流)

    http://poj.org/problem?id=1273 用Dinic求最大流的模板题,注意会有重边. 邻接矩阵建图 #include<stdio.h> #include<str ...

  4. GCC参数详解

    GCC参数详解 [介绍] gcc and g++分别是gnu的c & c++编译器 gcc/g++在执行编译工作的时候,总共需要4步 1.预处理,生成.i的文件 2.将预处理后的文件不转换成汇 ...

  5. GridControl控件添加按钮列及在按钮Click事件中得到行数据 zt

    在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...

  6. Bzoj 2834: 回家的路 dijkstra,堆优化,分层图,最短路

    2834: 回家的路 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 62  Solved: 38[Submit][Status][Discuss] D ...

  7. Android webView 正确的用法

    Android webView 正确的用法 引言: 我在网络找了几个例子,基本上都有问题,<Android疯狂讲义>13.4中的源代码也有问题.终于在官网找到正确的用法.点我. 基本用法: ...

  8. IIS发布站点错误

    发布站点的时候出现以下错误:解决方法: 1.  设置c:windows\temp 目录访问权限 temp--> 属性-->安全-- > 添加network service --> ...

  9. codeforces 732D

    D. Exams time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  10. IO(Input Output)流__字符流

    一.IO流简述------用于操作数据的 IO流用来处理设备之间的数据传输; Java对数据的操作是通过流的方式; Java用于操作流的对象都是在IO包中; 流按操作数据分为: 字节流(通用)和字符流 ...