`
wangtong40
  • 浏览: 252907 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript事件

阅读更多

Javascript的事件绑定主要有四种方法:
1、在DOM中,直接用onXXX="fun();"进行绑定
2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定
3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定
4、用<script for="domId" event="onXXX">fun();</script> 进行绑定

 

<html>
<head>
<title>event test</title>
</head>
<body onload="init()">
<!-- 绑定方式一:在元素中,通过onXXX(事件)设置绑定方法 -->
<button id="btn1" onclick="display()" >绑定方式一</button>

<!-- 绑定方式二:在Javascript代码中,通过获得元素,为元素的onXXX(事件)设置绑定方法  -->
<button id="btn2">绑定方式二</button>

<!-- 绑定方式三:通过for、event为元素绑定事件(IE4+)。for后面是元素id,event是具体事件  -->
<button id="btn3">绑定方式三</button>

<!-- 绑定方式四:通过attachEvent为元素绑定事件(IE5+)。第一个参数是事件名,第二个参数是绑定的方法 -->
<button id="btn4">绑定方式四</button>
</body>
</html>
<script type="text/javascript">
	function init() {
		document.getElementById("btn2").onclick = display;//为button2绑定事件
		document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件
	}

	function display(event) {
		var targ;//触发事件的对象引用
		if (!event) {
			var event = window.event;//获得当前事件(IE)
		}
		if (event.target) {//IE没有target
			targ = evente.target;
		} else if (event.srcElement) {//适用于IE
			targ = event.srcElement;
		}

		//对触发事件的对象进行操作
		alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
		targ.disabled="disabled" ;
	}
<script>
<script for="btn3" event="onclick">
	display();//为button3绑定事件
<script>

附一:event事件:
onabort: 图像的加载被中断
onblur: 元素失去焦点
onchange: 域的内容被改变
onclick: 当用户点击某个对象时调用的事件句柄
ondblclick: 当用户双击某个对象时调用的事件句柄
onerror: 在加载文档或图像时发生错误
onfocus: 元素获得焦点
onkeydown: 某个键盘按键被按下
onkeypress: 某个键盘按键被按下并松开
onkeyup: 某个键盘按键被松开
onload: 一张页面或一幅图像完成加载
onmousedown: 鼠标按钮被按下
onmousemove: 鼠标被移动
onmouseout: 鼠标从某元素移开
onmouseover: 鼠标移到某元素之上
onmouseup: 鼠标按键被松开
onreset: 重置按钮被点击
onresize: 窗口或框架被重新调整大小
onselect: 文本被选中
onsubmit: 确认按钮被点击
onunload: 用户退出页面
附二:IE event属性:
cancelBubble: 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
fromElement :对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
keyCode :对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY :发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue: 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
srcElement :对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement: 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。
x,y: 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

 

分享到:
评论
1 楼 m2maomao 2010-07-15  
很不错,学习了。

相关推荐

    JavaScript事件机制详细研究

    JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...

    JavaScript 事件处理 事件绑定 示例代码

    事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例...

    javascript事件详解

    JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言,它的事件机制是实现动态交互的重要部分。在JavaScript中,事件是用户或浏览器对网页进行操作时触发的特定动作,比如点击按钮、鼠标移动等。本文将详细...

    使用webview加载本地html页面,并处理html页面中的javascript事件

    接下来,为了使WebView能够执行JavaScript代码并处理JavaScript事件,我们需要启用JavaScript支持。我们可以调用`WebSettings`类的`setJavaScriptEnabled()`方法: ```java WebSettings settings = webView....

    JavaScript 事件处理 二级菜单级联 示例代码

    JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...

    JavaScript 事件处理 下拉列表和可选项 示例代码

    JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...

    javascript事件查询综合

    JavaScript事件查询是Web开发中的重要概念,它涉及到用户与网页交互时的各种响应处理。这篇文档“javascript事件查询综合”很可能是对JavaScript事件处理机制的详细阐述。在Web开发中,JavaScript事件模型允许开发者...

    JavaScript 事件的一些重要说明

    JavaScript事件是JavaScript编程中至关重要的一个概念,它用于响应用户或浏览器的行为,如点击、滚动、键盘输入等。本文将详细解析JavaScript事件的几个关键点:异步回调、事件对象、`this`关键字以及事件冒泡的管理...

    Javascript事件的定义.doc

    JavaScript事件是网页交互的核心,它定义了当特定动作发生时,浏览器如何响应。这些动作可以是用户的操作,如点击、滚动、键盘输入,或者是页面加载、数据改变等。JavaScript事件的处理方式有多种,包括事件处理属性...

    javascript事件大集合

    JavaScript事件是Web开发中不可或缺的一部分,它允许我们与用户进行交互,响应用户的操作,并以此来更新页面内容。本文将深入探讨JavaScript事件的各个方面,帮助开发者更好地理解和应用这些关键概念。 一、事件...

    关于编写性能高效的javascript事件的技术

    在前端开发中,编写高性能的JavaScript事件处理代码至关重要。高效的事件处理不仅能够提升用户体验,还能减少不必要的计算和DOM操作,从而加快页面的响应速度。随着Web应用的日益复杂,对JavaScript事件系统的优化...

    WEB页编程技巧──JavaScript事件的应用.pdf

    "WEB页编程技巧──JavaScript事件的应用.pdf" 本文档主要介绍了JavaScript事件在WEB页编程中的应用,包括JavaScript事件的概念、分类、事件处理器的使用、事件驱动编程等方面的知识点。 一、JavaScript事件概述 ...

    JAVASCRIPT事件与动态页面编程.pdf

    JAVASCRIPT事件与动态页面编程 本文概述了JAVASCRIPT事件、事件监视器和事件处理器,并通过一个示例程序详细介绍了如何使用JAVASCRIPT事件处理器进行动态页面编程。 JAVASCRIPT事件是指人机交互的结果,如鼠标移动...

    JavaScript事件学习小结(一)事件流

    标题中的"JavaScript事件学习小结(一)事件流"指的是JavaScript中的事件处理机制,特别是事件流的概念。事件流描述了在DOM(文档对象模型)中事件如何从根节点传播到具体的元素节点。在JavaScript中,事件是用户与...

    扣代码工具 javascript事件 捕获者2.0.zip

    "扣代码工具 JavaScript事件 捕获者2.0.zip"这个压缩包文件显然聚焦于JavaScript事件处理,特别是事件捕获的概念。事件是用户与网页交互时产生的行为,如点击按钮、滚动页面等,而事件处理则允许开发者对这些行为...

    javascript 事件

    JavaScript事件是Web开发中不可或缺的一部分,它允许用户与网页进行交互并响应用户的操作。这篇博客主要探讨了JavaScript事件的基本概念、事件模型以及如何处理事件。 首先,我们需要理解什么是JavaScript事件。...

    AJAX中不触发javascript事件

    标题中的“AJAX中不触发javascript事件”指的是在使用AJAX技术进行页面更新时,可能出现JavaScript事件不按预期触发的情况。这通常是由于AJAX请求更新页面部分时,不会触发表单提交、点击或其他依赖于页面刷新的...

Global site tag (gtag.js) - Google Analytics