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. 【Xamarin挖墙脚系列:Xamarin.IOS的程序的结构】

    原文:[Xamarin挖墙脚系列:Xamarin.IOS的程序的结构] 开始熟悉Xamarin在开发IOS的结构!!!!!!! 先看官方 这个是以一个单页面的程序进行讲述的. 1 程序引用的程序集,核 ...

  2. 【Xamarin挖墙脚系列:卸载不彻底的解决】

    原文:[Xamarin挖墙脚系列:卸载不彻底的解决] 卸载后,再次安装,总是授权还是原来的.请手工删除下文件: 卸载程序后 必须手工删除C:\ProgramData\Mono for Android\ ...

  3. Android 性能优化 四 布局优化merge标签的使用

    小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...

  4. bzoj1799

    这是一道比较难的数位dp 因为逐位统计好像无法处理数位和整除原数的 但是有了刚才的bzoj1072的经验,我们能做的是逐位处理被一个数d整除的方案 不难想到先穷举数位和now,now最大也就162,可 ...

  5. 关于Azure Auto Scale的高级属性配置

    Auto Sacle是一种自动化管理云服务负载的功能,系统可以根据预先制定的规则,在满足条件的情况下对计算实例的数量进行增减从而可以用来优化使用Azure的计算资源,可以适用于Cloud Servic ...

  6. 阮老师讲解TF-IDF算法

    TF-IDF与余弦相似性的应用(一):自动提取关键词   作者: 阮一峰 日期: 2013年3月15日 这个标题看上去好像很复杂,其实我要谈的是一个很简单的问题. 有一篇很长的文章,我要用计算机提取它 ...

  7. axis2 调用.net基于https的WebService接口

    一.创建证书 1,在IE中访问WSDL的URL,弹出“安全警报”窗口,查看证书->详细信息标签页->复制到文件->下一步->下一步->指定文件名,将证书下载保存为.cer ...

  8. PowerDesigner 的常用小技巧 转

    中小 订阅 修改外键命名规则 选择Database—>Edit Current DBMS选择Scripts->Objects->Reference->ConstName可以发现 ...

  9. Robot Framework+appium集成安装

    appium(中文教程,源码)是一款开源跨平台测试自动化工具,用于测试原生.移动web和混合应用,支持 iOS, Android和FirefoxOS平台. appium集成以下框架驱动自动化测试: i ...

  10. python多进程的理解 multiprocessing Process join run

    最近看了下多进程. 一种接近底层的实现方法是使用 os.fork()方法,fork出子进程.但是这样做事有局限性的.比如windows的os模块里面没有 fork() 方法. windows:.lin ...