javascript的自定义对象/取消事件/事件兼容性/取消冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<!--
自定义对象是一种特殊数据类型，由属性和方法封装而成.
-->
<script type="text/javascript">
function method1() {
var person=new Object();
//添加属性
person.name=" 瑞兹 ";
person.spell=957;
//添加方法1.
person.say=new Function("alert(' person.name ')");
//添加方法2.
person.way=way;
function way(){
var num=0;
for(var i=0;i<100;i++){
num+=i;
}
alert(num);
}
}
/*
构造器 创建对象
*/
function person(name,age){
//定义属性
this.name=name;
this.age=age;
//定义成员方法：
this.sayName=function(){
alert(this.name);
}
}
function method2(){
var p=new person();
//通过构造器创建对象
}
/*
JSON 是一种轻量级的数据交换格式 ：
-使用 键值对 形式定义
-名称需要用双引号 “” 引起来
-多个对定义之间 使用 ,隔开
*/
function method3(){
var p={"name":"张韶涵","age":30,"say":function(){alert("看得最远的地方")}}；
}
</script>
</head>
<body>
<input type="button" onclick="method1();" value="创建通用对象模板!">
<input type="button" onclick="method2();" value="创建对象模板!">
<input type="button" onclick="method3();" value="创建JSON对象模板!">
</body>
</html>
2.取消事件：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>取消事件写法</title>
<script type="text/javascript">
function judge(){
var result =confirm('确定要删除吗？');
return result;
}
</script>
<body>
<form>
<input type="text" value="我是要提交的数据">
<input type="submit" value="删除" onclick="judge();">
</form>
</body>
</head></html>
3.事件兼容性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>取消事件写法</title>
<script type="text/javascript">
function fun(e){
console.log(event.clientX+','+event.clientY);//获取点击时的位置，单位是像素，次写法可能出现不兼容问题 //不兼容的提示：reffereceError event is not defined // 兼容写法如下：
console.log(e.clientX+','+e.clientY);/* 获取事件源的写法（即事件的目标节点） IE:event.srcElement Fire Fox: event.target*/console.log(event.srcElement);
console.log(event.target);// 兼容写法： var evesrc=event.srcElement||event.target; console.log(evesrc.nodeName);
} </script> <body> <p onclick="console.log(event.clientX);"> HTML使用</p>
<p onclick="fun(event);"> JS使用</p>
</body> </head> </html>
5.取消冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡处理机制</title>
<style type="text/css">
div{
border:1px solid #ccc;
margin:10px;
padding:20px;
}
#d1{
width:300px;
height:300px;
background-color:red;
}
#d2{
width:200px;
height:200px;
background-color:blue;
}
#d3{
width:100px;
height:100px;
background-color:green;
}
</style>
<script type="text/javascript">
function f1(){
alert("D1");
}
function f2(){
alert("D2");
}
function f3(e){
alert("D3");
//取消冒泡 的写法
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble();
}
}
</script>
</head>
<body>
<div id="d1" onclick="f1()">D1
<div id="d2" onclick="f2();">D2
<div id="d3" onclick="f3(event);">D3</div>
</div>
</div>
</body>
</html>
javascript的自定义对象/取消事件/事件兼容性/取消冒泡的更多相关文章
- javascript创建自定义对象和prototype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript获取事件源对象和产生事件的对象
事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- JavaScript内置对象与原型继承
(一) 理解JavaScript类定义 1>关于内置对象理解 console.log(Date.prototype.__proto__===Object.prototype //tru ...
- javascript第一弹——对象
一. 什么是对象 对象是包含一组变量(称为属性)和函数(称为方法)的集合的实例. javascript中所有事物都是对象 javascript有很多内建对象 javascript允许自定义对象 对象只 ...
- javascript 内置对象
什么是对象 javascript中的所有事物都是对象:字符串 数组 数值 函数... 每个对象都带有属性和方法 javascript允许自定义对象 自定义对象: 定义并创建对象实例 使 ...
- JavaScript---网络编程(4)-Date、Math、Global和自定义对象
本节博客进行Date对象.Math对象.Global对象和自定义对象的用法演示. 首先是一个out.js文件内容(输出到网页中的自定义输出方法): function println(parma){ d ...
- 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...
- JavaScript事件---事件对象
发文不易,若转载传播,请亲注明出处,谢谢! 内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开 ...
- JavaScript(第二十四天)【事件对象】
JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的 ...
随机推荐
- SqlServer查看锁表与解锁
某些情况下,sqlserver的表会被锁住,比如某个会话窗口有数据一直没提交,窗口又没关闭,这时表就会被锁住 其他任何连接查询表数据时都不会返回 这时需要手工杀掉产生死锁的会话ID,才能恢复正常 查看 ...
- Java的equals方法的使用技巧
Java的equals方法的使用技巧 1.业务场景: 在某个社交软件中,要求每个用户的用户名(name)必须独一无二,那么在每次增加新用户的时候,都要对该用户的注册名进行判断,如果当前用户名已经被占用 ...
- 开源DDD设计模式框架YMNNetCoreFrameWork第一篇
DDD设计模式:仓储.领域模型.应用层.聚合根.事件总线,以业务模型驱动设计,从数据模型驱动脱离,不用关心数据库设计,开发效率更高 DDD领域驱动设计模型概念不再讲解,直接上技术 框架搭建: 如图所示 ...
- Hive Join优化经验
大表x小表 这里可以利用mapjoin,SparkSQL中也有mapjoin或者使用广播变量能达到同样效果,此处描述HQL // 开启mapjoin并设定map表大小 set hive.auto.co ...
- Educational Codeforces Round 64 选做
感觉这场比赛题目质量挺高(A 全场最佳),难度也不小.虽然 unr 后就懒得打了. A. Inscribed Figures 题意 给你若干个图形,每个图形为三角形.圆形或正方形,第 \(i\) 个图 ...
- html5移动端主流适配方案
1.流式布局(百分比布局) 案例:京东移动端 优点:简单方便,只需要固定高度,宽度自适应: 缺点:大屏幕手机实际显示的不协调. 2.响应式布局 优点:可以节约成本,不用再做专门的web app网 ...
- SDRAM调试总结
SDRAM的调试总结 1 说明 实验平台: JZ2440 CPU: S3C2440 SDRAM型号: EM63A165TS-6G 2 SDRAM的一些基本概念 2.1 引脚分配 2.2 引脚描 ...
- Golang的单目(一元)运算符-地址操作符和接收操作符
Golang的单目(一元)运算符-地址操作符和接收操作符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Golang的单目(一元)运算符概述 常见的地址操作符: &: ...
- 2.9 学习总结 之 【Android】体温统计APP
一.说在前面 昨天 学习了JQ的相关知识 今天 编写体温统计APP 我的工程源码:https://github.com/xiaotian12-call/Take-body-temperature 二. ...
- 【LeetCode 】验证回文串
[问题]给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写.说明:本题中,我们将空字符串定义为有效的回文串. 示例 : 输入: "A man, a plan, a ...