js技术

一、onmouseover、onmouseenter、onmouseout、onmouseleave的区别

onmouseover、nmouseout:鼠标移动到自身时候会触发事件,同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave:鼠标移动到自身是会触发事件,但是移动到其子元素身上不会触发事件

?

?

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus?">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title></title>

<style type=‘text/css‘>

*{ margin:0; padding:0;}

#box3{

height:100px;

background:red;

}

#box2{

padding:50px;

background:blue;

}

#box1{

padding:50px;

background:green;

}

</style>

</head>

<body>

<div id="box1">1

<div id="box2">2

<div id="box3">3</div>

</div>

</div>

<script type="text/javascript">

/*

onmouseover

onmouseout

onmouseenter

onmouseleave

*/

var oBox1 = document.getElementById(‘box1‘);

///*

/*

oBox1.onmouseover = function(){ //可以直接通过ID这样调用,但不提倡

console.log( ‘over‘ );

};

*/

oBox1.onmouseout = function(){ //可以直接通过ID这样调用,但不提倡

console.log( ‘out‘ );

};

//*/

/*

oBox1.onmouseenter = function(){ //可以直接通过ID这样调用,但不提倡

console.log( ‘enter‘ );

};

oBox1.onmouseleave = function(){

console.log( ‘leave‘ );

};

*/

</script>

</body>

</html>

?

?

二、文档碎片

?

?

//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素

提高页面效率

var d1 = new Date();

//创建十个段落,常规的方式

for(var i = 0 ; i < 1000; i ++) {

var p = document.createElement("p");

var oTxt = document.createTextNode("段落" + i);

p.appendChild (oTxt);

document.body.appendChild(p);

}

var d2 = new Date();

document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));

//使用了createDocumentFragment()的程序

var d3 = new Date();

var pFragment = document.createDocumentFragment();

for(var i = 0 ; i < 1000; i ++) {

var p = document.createElement("p");

var oTxt = document.createTextNode("段落" + i);

p.appendChild(oTxt);

pFragment.appendChild(p);

}

document.body.appendChild(pFragment);

var d4 = new Date();

document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

?

?

三、事件冒泡

1、什么是事件冒泡

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。

2.怎么阻止事件冒泡

通常情况下我们都是一步到位,明确自己的事件触发源,并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序,即我们明确最精准目标,这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解,我们知道程序将做多较多额外的事情,这必然增大程序开销。还有一个重要的问题是:事件冒泡处理可能会激活我们本来不想激活的事件,导致程序错乱,甚至无从下手调试,这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时,我们要阻止事件冒泡。

?

?

<div onclick="openWin(‘http://www.baidu.com‘)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">

  <div onclick="openWin(‘http://www.google.com‘)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>

</div>

<script type="text/javascript">

//本例你实际希望点击灰色盒子打开google首页,而点击黑色盒子打开baidu首页,但结果你点击灰色盒子的时候,却是同时打开了两个网页。其实在实际设计中较少遇到此问题,你可能会想如

果我在页面不同DOM深处安置了不同的按钮或链接,深层处的事件触发会不会波及顶层的按钮呢?不会,因为按钮不能形成嵌套关系。

function openWin(url)

{

window.open(url);

}

</script>

?

?

【阻止事件冒泡例子】

?

?

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">

<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>

</div>

<script type="text/javascript">

//阻止事件冒泡后,你点击灰色盒子,整个过程只弹一次对话框了(注意与默认情况对比)

function showMsg(obj,e)

{

alert(obj.id);

stopBubble(e)

}

//阻止事件冒泡函数

function stopBubble(e)

{

if (e && e.stopPropagation)

e.stopPropagation()

else

window.event.cancelBubble=true

}

</script>

?

时间: 2024-10-11 11:37:14

js技术的相关文章

JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{&amp;quot;options&amp;quot;:&amp;quot;[{

JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"valu e/":/"10

New JavaScript techniques for rapid page loads 加快页面载入的新js技术

Speed has always been one of Chrome's primary missions, ever since it was included as one of the founding principles in 2008. But speed is about more than just traditional Javascript benchmarks. Ideally every part of a user's interaction with a brows

js技术javascript 该重视

当下,js大有挤压php java asp.net之类后端语言的趋势,直接js html5 socket与后端python c c++ 等通信 更不用提二维 三维计算展示 方面 医院呼叫 报警  处理都使用js 编译web展示 全屏  而安全行业似乎web管理方式居多(以后也可能直接js取代) vue之类的前端技术不断发展,过多的浏览器需要兼容,推荐.友好性 . 原生app的空间也越来越小. 算法等.库都倾向于封装完善,使用技术 展示技术 具体业务技术 js发展趋势快捷. 原文地址:https:

js技术分享

什么是失去焦点 JSP表单元素获取焦点就是指你的text,password等元素里有鼠标的光标. 同理 JSP失去焦点例如浏览器上方标题是蓝色的时候 就证明焦点就在这里 当你点其他页面的时候它会变灰.就是失去焦点.原理都一样. 演示代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

js技术1-js简介和变量

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JavaScript简介</title> <!-- 作者:[email protected] 时间:2017-03-28 描述:使用JS的三种方式: 1.html标签中内嵌js <button onclick="javascript:alert('你真点我啊')"&g

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

前端 js技术

一.js存在形式 html执行方式是从上而下的方式进行执行的,如果js放在头部,会造成,js代码不走完,就不会显示主内容. so js放在body内部的最下面. html 中直接写 <script> alert(123) </script> 文件里面 进行导入的方式 <script src="coms.js"></script>

ES6 常用总结(前端开发js技术进阶提升总结)

一.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部).这就是函数变量提升例如: 不用关心bool是否为true or false.实际上,无论如何str都会被创建声明.(如果未声明,返回的是null) 而es6之后,我们通常用let和const来声明.let表示变量.const表示常量,let和const都是块级作用域.如何理解这个块级作用域? 在一个函数内部 在一个代码块内部 let

node.js技术文章汇总

下面为我平时学习所看的高质量文章的汇总,以便后面的查阅及总结 API 文档 | Node.js 中文网 npm Node.js安装及环境配置之Windows篇 Node环境变量 process.env 的那些事儿 Jade中文文档 Jade模板 node.js后台jquery前台-- 实现用户登录注册AJAX交互 node+ajax+mysql实现登录注册 NPM install -save 和 -save-dev 傻傻分不清 原文地址:https://www.cnblogs.com/XmanL

JS技术大全

事件源对象:event.srcElement.tagName  event.srcElement.type 捕获/释放:event.srcElement.setCapture();  event.srcElement.releaseCapture();  事件按键:event.keyCode, event.shiftKey, event.altKey, event.ctrlKey 事件返回值:event.returnValue 鼠标位置:event.x ,event.y 窗体活动元素:docum