JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)
代码:
<input type="text" id="name" /> window.onload = function () {
document.getElementById("name").onkeypress = function (event) {
if (event.keyCode >115)
{
return false;
}
}
}
<form>
<%-- this代表事件发生的目标对象 --%>
<input id="b1" type="button" value="Button1" onclick="alert(this.form.b2.value);" />
<%-- this代表事件发生的目标对象,所以可以省略this --%>
<input id="b2" type="button" value="Button2" onclick="alert(form.b1.value);" />
<%--form在此匿名函数的定义域(document) 当中,所以可以省略form --%>
<input id="b3" type="button" value="Button3" onclick="alert(b4.value);" />
<%--此匿名函数的定义的作用域为window.document当中,所以可以省略document --%>
<input id="b4" type="button" value="Button4" onclick="alert(getElementById('b3').value);" />
<%--此匿名函数的定义的作用域为window.document当中,但document对象也是运行在window当中,所以可以省略window --%>
</form>
var b4 = document.getElementById("b4");
b4.onclick = function () {
with (document) {
with (this.form) {
with (this) {
alert(b3.value);
}
}
}
}
<div id="div1" style="height:100px;height:40px;border:solid 1px red;">
<input id="b1" type="button" value="Button1" />
</div>
window.onload = function () {
var b1 = document.getElementById("b1");
b1.addEventListener("click", function () {
alert("this is b1");
})
var div1 = document.getElementById("div1");
div1.addEventListener("click", function () {
alert("this is div1");
}, true) }
function mousemoveFun(event) {
var left = event.clientX - div1.style.width.substring(0, div1.style.width.length - 2) / 2;
var top = event.clientY - div1.style.height.substring(0, div1.style.height.length - 2) / 2;
div1.style.left = left + "px";
div1.style.top = top + "px";
}
window.onload = function () {
var b1 = document.getElementById("b1");
var div1 = document.getElementById("div1");
var ismove = false;
div1.addEventListener("mousedown", function (event) {
document.addEventListener("mousemove", mousemoveFun, true);
ismove = true;
})
document.addEventListener("mouseup", function (event) {
if (!ismove) {
return;
}
ismove = false;
document.removeEventListener("mousemove", mousemoveFun, true);
var left = event.clientX - div1.style.width.substring(0, div1.style.width.length - 2) / 2;
var top = event.clientY - div1.style.height.substring(0, div1.style.height.length - 2) / 2;
div1.style.left = left + "px";
div1.style.top = top + "px";
}, true);
//注意:mousemove和mouseup事件的句柄被注册为捕捉事件句柄,因为用户移动鼠标的速度比跟跟随它移动的文档元素快,所以其中一些事件发生在
//原始目标元素外部,没有捕获,事件可能无法分配给正确的句柄
}
<input id="b1" type="button" value="Button1" />
var o = new Object();
o.value = "js对象";
o.func = function (event) {
//this引用的 o 而不是文档元素对象
alert(this.value);
}
window.onload = function () {
var b1 = document.getElementById("b1");
b1.addEventListener("click", function (event) {
o.func(event);
}, true);
}
<input id="b1" type="button" value="Button1" />
var e;
window.onload = function () {
var b1 = document.getElementById("b1");
b1.addEventListener("click", function (event) {
dataEvent.receive("b1", e, function (event) {
alert(event.datatype + ":" + event.data);
});
}, true);
var e = dataEvent.send("b1", "name", "小三");
}
var dataEvent = {};
dataEvent.send = function (target, datatype, data) {
if (typeof target == "string") {
target = document.getElementById(target);
}
if (document.createEvent) {
var e = document.createEvent("Events");//此处使用的是接口名 Events UIEvents MouseEvents MutationEvents 有可能没有s
e.initEvent("dataavailable", true, false);//初始化自定义事件
}
else if (document.createEventObject) {
var e = document.createEventObject();
}
else return;
//自定义事件的一些属性
e.datatype = datatype;
e.data = data;
return e;
}
dataEvent.receive = function (target, event, handler) {
if (typeof target == "string")
{ target = document.getElementById(target); }
if (target.addEventListener)
{ target.addEventListener("dataavailable", handler, false); }
else if (target.attachEvent) {
target.attachEvent("ondataavailable", handler);
}
if (target.dispatchEvent) {
target.dispatchEvent(event);
}
else if (target.fireEvent) {
target.fireEvent("ondataavailable", event);
}
}
JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)的更多相关文章
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...
- JavaScript 客户端JavaScript之 Web浏览器的环境
Web浏览器实现的Javascript,通过Web浏览器实现的JavaScript引入了大量可脚本化的对象(1.Web浏览器 2.HTML 3.HTML中的内容) Web浏览器中的Javascrip ...
- JavaScript 客户端JavaScript之 脚本化文档
客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由. 一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...
- JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)
XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话. 大多数浏览的客户端JavaScri ...
- JavaScript 客户端JavaScript之 脚本化浏览器窗口
1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能. 前者是从运行的那一 ...
- JavaScript 客户端JavaScript之cookie和客户端持久性
Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...
- JavaScript 客户端JavaScript之Document对象中的表单和表单元素
Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...
- JavaScript DOM API初步(整理)
文档对象模型 文档对象模型(Doucment Object Model,DOM)是表示文档(如HTML文档.XML文档)和访问.操作构成文档的各种元素的应用程序接口.在DOM中,HTML文档的层次结构 ...
- 前端开发【第6篇:JavaScript客户端(浏览器)】
Web浏览器中的JavaScript 客户端JavaScript时间线 1.Web浏览器创建Document对象,并且开始解析web页面,解析HTML元素和它门的文本内容后添加Element对象和Te ...
随机推荐
- uva 10382 - Watering Grass(区域覆盖问题)
Sample Input 8 20 2 5 3 4 1 1 2 7 2 10 2 13 3 16 2 19 4 3 10 1 3 5 9 3 6 1 3 10 1 5 3 1 1 9 1 Sample ...
- __file__ __name__ __doc__ argv详解
__file__:表示输出当前py文件的路径 __name__: 表示输出当前函数名称,是main()函数(入口函数),或者是其他函数 __doc__: 模块的对象,输出模块的版权信息,如:作者 ch ...
- UI基础 - UILabel
//根据文字获取size - (CGSize)getSizeWithstring:(NSString *)string { CGSize maxSize = CGSizeMake(320, 320); ...
- 10 - 删除vtkDataObject中的Update Extent方法 VTK 6.0 迁移
VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.下面列出来的就是其中的一些方法: SetUpdateExtent(int piece, int numPi ...
- makefile简单介绍
现在的IDE环境大多是高度集成的,只需要按一个按钮即可完成编译-汇编-链接的工作,但是实际在嵌入式开发的过程中,需要根据实际需要编写个性化的需求,这就需要掌握makefile的写法. 高级IDE的方便 ...
- Solr In Action 笔记(1) 之 Key Solr Concepts
Solr In Action 笔记(1) 之 Key Solr Concepts 题记:看了下<Solr In Action>还是收益良多的,只是奈何没有中文版,只能查看英语原版有点类,第 ...
- COJ 0985 WZJ的数据结构(负十五)(限定区域不同数)
传送门:http://oj.cnuschool.org.cn/oj/home/addSolution.htm?problemID=955 试题描述: CHX有一个问题想问问大家.给你一个长度为N的数列 ...
- 【转】android MSM8974 上DeviceTree简介----不错
原文网址:http://blog.csdn.net/dongwuming/article/details/12784213 简介 主要功能是不在代码中硬编码设备信息,而是用专门的文件来描述.整个系统的 ...
- The ToolStripMenuItem visible value always false
http://social.msdn.microsoft.com/Forums/vstudio/en-US/8cf60e57-6d97-43c6-bb3a-394b9bf130af/the-tools ...
- 【索引】gtest学习笔记
下载gtest 链接:http://www.cnblogs.com/duxiuxing/p/4270804.html gtest官方文档浅析 链接:http://www.cnblogs.com/dux ...