事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）【转载】

ylbtech-Event:事件(Event)对象

JS：1.6.0，事件(Event)返回顶部
HTML标记 事件 当....时候触发此事件
<A> onClick 用户点击超链接
onMouseOver 鼠标移动到超链接上边
onMouseOut 鼠标离开超链接
<AREA> onMouseOver 鼠标移动到图片 map 区域上边 
onMouseOut 鼠标离开图片 map 区域
<BODY> onBlur 包含这个页面的窗口 window 或 帧 frame 失去焦点的时候
onFocus 包含这个页面的窗口 window 或 帧 frame 获得焦点的时候
onLoad 这个页面下载完成的时候
onUnload 退出这个页面的时候
<FORM> onReset 按下 RESET (重置) 按钮的时候
onSubmit 按下 SUBMIT (提交) 按钮的时候
<IMG> onAbort 下载图片的过程被用户手动停止的时候
onLoad 图片下载完成的时候
onError 在客户端接收图片时有错误发生
<INPUT> with
TYPE="BUTTON"
或 "CHECKBOX"
或 "RADIO"
或 "RESET"		 onClick 鼠标点击时候
<INPUT> with
TYPE="TEXT"
或 <TEXTAREA>		 onBlur 获得焦点的时候
onChange 输入框/文本框中的文本被改变的时候
onFocus 获得焦点的时候
onSelect 输入框/文本框中的文本被选中 (高亮显示) 的时候
<INPUT> with
TYPE="SELECT"		 onBlur 失去焦点的时候
onChange 用户改变了下拉列表框中的选择
onClick 用户使用鼠标点击的时候
onFocus 获得焦点的时候
JS：1.6.0.1,HTML 4.0 事件属性返回顶部

HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的
JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。

事件处理器的值是一个或一系列以分号隔开的 Javascript
表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。例如，当您把鼠标移动到一个超链接时，会启动一个 JavaScript
函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为
onmouseover 来完成这项工作：

<a href="/index.html" onmouseover="alert(‘Welcome‘);return false"></a>

下面的表格提供了标准的事件属性，可以把它们插入 HTML/XHTML 元素中，以定义事件行为。

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

属性 值 描述
onload 脚本 当文档载入时执行脚本
onunload 脚本 当文档卸载时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。

属性 值 描述
onchange 脚本 当元素改变时执行脚本
onsubmit 脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本
onselect 脚本 当元素被选取时执行脚本
onblur 脚本 当元素失去焦点时执行脚本
onfocus 脚本 当元素获得焦点时执行脚本

图像事件 (Image Events)

该属性可用于 img 元素：

属性 值 描述
onabort 脚本 当图像加载中断时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。

属性 值 描述
onkeydown 脚本 当键盘被按下时执行脚本
onkeypress 脚本 当键盘被按下后又松开时执行脚本
onkeyup 脚本 当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。

属性 值 描述
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本
JS：1.6.1,onclick事件返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function hello_girl()
{
alert("小姐，你好！");
}
function fun1(str)
{
alert("你好,"+str);
}
</script>
</head>

<body>
<h3>MENU:onclick 单击事件</h3>
<input type="button" value="问候先生" name="hello1" onclick="alert(‘先生，你好！‘)" />
<input type="button" value="问候女士" name="hello1" onclick="hello_girl()" />
<hr />
有参数
<input type="button" value="先生" name="hello1" onclick="fun1(‘先生‘)" />
<input type="button" value="女士" name="hello1" onclick="fun1(this.value)" />
<hr />
<input type="button" value="女士" name="hello1" onclick="javascript:alert(‘你好吗？‘)" />
<input type="button" value="你吃饭了吗" name="hello1" onclick="javascript:return confirm(‘你确认吃饱了？‘)" />
</body>
</html>

JS：1.6.2，onchange事件 返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function change(str)
{
document.getElementById("span1").innerText=str;
}
</script>
</head>

<body>
<h3>MENU：onchange</h3>
电话：<input id="txtTel" type="text"  onchange="change(this.value)"  /><br />
你填写的电话为：<span id="span1"></span>
</body>
</html>

JS：1.6.3，onload事件返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function hello()
{
    alert("新年快乐！");
}
</script>
</head>

<body onload="hello()">
<h3>MENU：onload事件</h3>
</body>
</html>

JS：1.6.4，onunload事件，返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function logout()
{
var bool=confirm("你确认要退出吗？");
if(bool)
{
    //第一种情况，直接关闭页面
    //window.close();
    //第二种情况，退出并跳转到登陆页面
    location.href="http://www.baidu.com";
}
}
</script>
</head>

<body onunload="logout()">
<h3>MENU:onunload</h3>
<input type="button" value="退出" onclick="logout()" />
</body>
</html>

JS：1.6.5，onselect事件， 返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function change(str)
{
document.getElementById("span1").innerText=str;
}
</script>
</head>

<body>
<h3>MENU:onselect</h3>
电话：<input id="txtTel" type="text"  onselect="change(this.value)"  /><br />
你填写的电话为：<span id="span1"></span>
</body>
</html>

JS：1.6.6，onmouse事件，返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body bgcolor="#CCCCCC">
<h3>onmouse事件</h3>
<input type="button" value="改变颜色" onmousedown="document.bgColor=‘aqua‘"
 onmouseup="document.bgColor=‘red‘"  onmouseout="document.bgColor=‘blue‘"/>
</body>
</html>

JS：1.6.7，onfoucs_onblur事件，返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function begin()
{
    usid.value="";
}
function end()
{
        alert("请输入确认信息，谢谢！");
}
</script>
</head>

<body>
<h3>MENU：onfocus事件和onblur事件</h3>
<input type="text" value="请输入用户名" name="usid" onfocus="begin()" onblur="end()" />
<input type="button" value="提交" />

</body>
</html>

JS：1.6.8，checkbox-onclick事件， 返回顶部 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function list(check_b,txt)
{
    var str_S=txt.value;
    var str_C=check_b.value;
    if(check_b.checked==true)
    {
        txt.value=str_S+str_C;
    }
    else
    {
        str_S=str_S.replace(str_C,"");
        txt.value=str_S;
    }
}
</script>
</head>

<body>
我们选择了：<input type="text" name="t_1" value="" readonly="true" />
<br />
<input type="checkbox" value="苹果 " onclick="list(this,t_1)" >苹果</input>
<input type="checkbox" value="香蕉 " onclick="list(this,t_1)" >香蕉</input>
<input type="checkbox" value="芹菜 " onclick="list(this,t_1)" >芹菜</input>
</body>
</html>

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
时间： 2024-10-09 11:14:01

事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）【转载】的相关文章

关于下拉框的onchange事件和onclick选择value值。

下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器. 下面是代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择</title> <script src="js/lib/jquery/v1.12.3/jquery-1.

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e

BOM onload onunload onbeforeload的区别

Onload,Onunload和onbeforeunload方法的异同 一 二种方法比较 1 onload的意思是当页面加载完毕的时候执行. 2 相同点:Onunload,onbeforeunload都是在刷新或关闭时调用 3 不同点:Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取,而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用.Onunload是无法阻止页面的更新和关闭的.Onbeforeunload可以做到,onbefo

(92)Wangdao.com_第二十五天_事件 Event

1. 事件 Event 事件的本质是: 程序各个组成部分之间的一种通信方式,也是 异步编程 的一种实现 DOM 的事件操作 分为: 监听 和 触发        都定义在 EventTarget 接口____ 所有节点对象都部署了 EventTarget 接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.AudioNode.AudioContext)也部署了这个接口. .addEventListener();        绑定事件的监听函数 .removeEven

重温委托(delegate)和事件(event)

1.delegate是什么 某种意义上来讲,你可以把delegate理解成C语言中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能够调用这个方法m,说白了就是可以把方法当作参数传递. 不过delegate和函数指针还是有点区别的,delegate有许多函数指针不具备的优点. 首先,函数指针只能指向静态函数,而delegate既可以引用静态函数,又可以引用非静态成员函数.在引 用非静态成员函数时,delegate不但保存了对此函数入口指针的引用,而且还保存了调用此函数的

Android 触屏事件 OnTouch onClick onTouchEvent对于触屏事件的处理和分发

Android 触屏事件 OnTouch onClick onTouchEvent对于触屏事件的处理和分发 做项目的时候经常遇到需要事件分发,很多时候我们发现当我们触发了onTouch却触发不了onClick.或者触发了View的事件却触发不了ViewGroup的事件.那么他们之间到底是什么关系呢,其实最终他们涉及的只是两个问题 OnTouch .onClick .onTouchEvent 之间的关系 OnTouch .onClick .onTouchEvent 之间的处理顺序 这里,我做了简单

事件Event对象

事件event对象 当事件发生时,会向调用函数传递一个event对象,event对象记录当前事件发生时的环境信息. 一个事件只能对应一个event对象,并且event对象是短暂存在的. DOM中的event对象的使用方法 1.在HTML标记中,通过事件来调用函数,向函数传递一个event参数,该参数就是一个event对象,这个event必须全小写.注意:这个event参数是固定的 <img id="img01" src="images/01.jpg" oncl

C#中的委托(Delegate)和事件(Event)

C#中的委托(Delegate)和事件(Event) 2007-11-30 11:40:00 分类: 把C#中的委托(Delegate)和事件(Event)放到现在讲是有目的的:给下次写的设计模式——观察者(Observer)有一个参考. 委托和事件应该是C#相较于C++等之前的非托管的语言提出的一个新的术语(term).“旧瓶装新酒”这样的描述似乎有些“贬义”,但确实是这样.委托也好,事件也好最初的起源是C/C++中的函数指针,关于函数指针的简单介绍可以参见我以前的一篇<C/C++中指向函数的

多个事件绑定执行window.onload写法

多个页面需要绑定多个事件,执行window.onload时,一定要注意正确的写法: 1.创建匿名函数: window.onload=function(){ func1(); func2(); } 2.事件监听: function addLoadEvent(func){                var oldonload=window.onload;                if(typeof window.onload!='function'){