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 ...
随机推荐
- 3D touch 的 应用 --备用
在iPhone 6s和iPhone 6s Plus中Apple引入了3D Touch技术.3D Touch的触控技术,被苹果称为新一代多点触控技术.其实,就是此前在Apple Watch上采用的For ...
- mobox:推进企业文档管理走向信息化之路
随着“大数据”时代的到来,越来越多的人们对数据库管理信息抱有认可态度,这是近年来信息化发展的必然结果.企业作为推进社会经济发展的主力军,也必然要紧跟大数据时代潮流,利用计算机技术全面普及企业的信息化管 ...
- SCALA中的抽象类代码样例
package com.hengheng.scala class AbstractClass { } abstract class People { def speak val name : Stri ...
- Android 介绍spydroid每个包的大体功能
看了接近一周的spydroid源代码,对spydroid这个开源项目有了一定的认识.也许有些理解不一定正确,给后来者一点启示.也是自己对rtsp协议,rtp协议的总结. 在windows下,如果安装了 ...
- Spring boot将配置属性注入到bean类中
一.@ConfigurationProperties注解的使用 看配置文件,我的是yaml格式的配置: // file application.yml my: servers: - dev.bar.c ...
- 多线程 Worker Thread 模式
Worker是“工人”的意思,worker thread pattern中,工人线程(worker thread)会一次抓一件工作来处理,当没有工作可做时,工人线程会停下来等待心得工作过来. Work ...
- 14.4.2 Change Buffer 延迟写
14.4.2 Change Buffer change buffer 是一个特殊的数据结构 用于cahce 改变的secondary index pages 当被影响的pages 不在buffer p ...
- URL图片预览(createObjectURL)
1.说明 1)createObjectURL 作用:创建url(creates a URL for the specified object); 语法:var url = URL.createObj ...
- 自动化测试——case编写
简单总结一下最近项目里遇到的问题和解决的方法,可能不全,因为之前做的时候太匆忙了,很多点都没有记录下来,能记得多少是多少吧.纲巴蝶! 1. 问题:犯错误,新增case后忘记把编码也写上去了,后来跑脚本 ...
- 用SQL替换最后一个指定字符后面的所有字符
下面给出任意字符串,该字符串长度未定,只知道该字符串有许多个‘-’连接起来的,现在要把最后一个‘-’后面的字符替换掉为指定串. 假如字符串为:'x1253-axebx-xcdx-o9kgl-3ddll ...