1、client 家族
client 可视区域
offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是内容的大小
client 可视区域
1/检测屏幕宽度(可视区域)
ie9及其以上的版本
window.innerWidth
标准模式
document.documentElement.clientWidth
怪异模式
document.body.clientWidth
封装可视区域大小的函数:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
document.write(client().width);
</script>
2/ window.onresize 改变窗口事件
昨天 window.onscroll = function() {} 屏幕滚动事件
今天 window.onresize = function() {} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生
案例：改变页面颜色
要求：
当我们的页面宽度大于 960 像素的时候 页面颜色是红色
当我们的页面宽度 大于 640 小于 960 页面的颜色是 绿色
剩下的颜色是 蓝色
案例源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
reSize(); // 页面一加载先调用函数 一次
window.onresize = reSize; // 不带括号，只要屏幕触发，就调用 reSzie 函数
//alert(reSize);
function reSize() {
var clientWidth = client().width;
if(clientWidth > 960)
{
document.body.style.backgroundColor = "red";
}
else if(clientWidth > 640 )
{
document.body.style.backgroundColor = "green";
}
else
{
document.body.style.backgroundColor = "blue";
}
}
</script>
function fun() { 语句 }
fun 是函数体的意思
fun() 调用函数 的意思
function fun() {
return 3;
}
console.log(fun); // 返回函数体 function fun() { retrun 3}
console.log(fun()); // 调用函数 3 返回的是结果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}
2、检测屏幕宽度(分辨率)
clientWidth 返回的是 可视区 大小 浏览器内部的大小
window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关系
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
document.write(window.screen.width);
</script>
3、简单冒泡机制
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序:
E 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
1/阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c的方法是event.stopPropagation()
proPagation 传播 传递
IE则是使用event.cancelBubble = true
bubble 冒泡 泡泡 cancel 取消
兼容的写法：
1 if(event && event.stopPropagation)
2 {
3 event.stopPropagation(); // w3c 标准
4 }
5 else
6 {
7 event.cancelBubble = true; // ie 678 ie浏览器
8 }
2/ 小案例 点击空白处隐藏盒子
点击空白处案例.gif
这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。
原理：
点击自己不算 ( 怎么证明我是我 点击的这个对象id 正好和自己一样 )
点击空白处 就是点击 document
3/判断当前对象
火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id
兼容性写法：
ar targetId = event.target ? event.target.id : event.srcElement.id;
点击空白处隐藏盒子的完整案例源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height:2000px;
}
#mask {
width: 100%;
height: 100%;
opacity: 0.4; /*半透明*/
filter: alpha(opacity = 40); /*ie 6半透明*/
background-color: black;
position: fixed;
top: 0;
left: 0;
display: none;
}
#show {
width: 300px;
height: 300px;
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
display: none;
}
</style>
</head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;">登录</a>
<div id="mask"></div>
<div id="show"></div>
</body>
</html>
<script>
function $(id) { return document.getElementById(id);}
var login = document.getElementById("login");
login.onclick = function(event) {
$("mask").style.display = "block";
$("show").style.display = "block";
document.body.style.overflow = "hidden"; // 不显示滚动条
//取消冒泡
var event = event || window.event;
if(event && event.stopPropagation)
{
event.stopPropagation();
}
else
{
event.cancelBubble = true;
}
}
document.onclick = function(event) {
var event = event || window.event;
// alert(event.target.id); // 返回的是点击的某个对象的id 名字
// alert(event.srcElement.id);
var targetId = event.target ? event.target.id : event.srcElement.id;
// 看明白这个写法
if(targetId != "show") // 不等于当前点点击的名字
{
$("mask").style.display = "none";
$("show").style.display = "none";
document.body.style.overflow = "visible"; // 显示滚动条
}
}
</script>
4 /选中之后，弹出层
选定文字弹出层.gif
我们想，选中某些文字之后，会弹出一个弹出框
这个和 我们前面讲过的拖拽有点不一样。
拖拽 是拖着走。 拉着鼠标走 。
选择文字： 这个弹出的层 选中的时候不出来，弹起鼠标的时候才出现 。
所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置 再 鼠标的 clientX 和 clientY 一模一样
用来判断选择的文字.
5/获得用户选择内容
window.getSelection() 标准浏览器
document.selection.createRange().text; ie 获得选择的文字
兼容性的写法：
if(window.getSelection)
{
txt = window.getSelection().toString(); // 转换为字符串
}
else
{
txt = document.selection.createRange().text; // ie 的写法
}
选定文字弹出层案例完整源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 400px;
margin:50px;
}
#demo {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<span id="demo"></span>
<div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>
<div id="another">
我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
</div>
</body>
</html>
<script>
function $(id) {return document.getElementById(id)}
$("test").onmouseup = function(event) {
var event = event || window.event;
var x = event.clientX; // 鼠标的x坐标
var y = event.clientY; // 同理
var txt; // 用于存贮文字的变量
if(window.getSelection) // 获取我们选中的文字
{
txt = window.getSelection().toString(); // 转换为字符串
}
else
{
txt = document.selection.createRange().text; // ie 的写法
}
if(txt) // 所有的字符串都为真 "" 是假 所有的数字为真 0 为假
{
//看看有没有选中的文字，没有选中文字为空的，就不应该执行 点击一下鼠标 就是空的
showBox(x,y,txt); // 调用函数
}
}
document.onmousedown = function(event) { // 点击空白处隐藏
var event = event || window.event;
var targetId = event.target ? event.target.id : event.srcElement.id;
if(targetId != "demo"){
$("demo").style.display = "none";
}
}
function showBox(mousex,mousey,contentText) { // 相关操作
setTimeout(function() {
$("demo").style.display = "block";
$("demo").style.left = mousex + "px";
$("demo").style.top = mousey + "px";
$("demo").innerHTML = contentText;
},200)
}
</script>
网友评论