js基础升级5

1、页面的基本周期

 window.onload = f1

function f1() {
console.log("开始加载")
  }

  //页面离开的逻辑，应该在这个方法中写
  window.onbeforeunload = f2

 function f2() {
	console.log("卸载之前")
  //如果添加return  那么就会在离开页面之前出现弹窗，让你确定是否离开当前页面
 return "要离开"
 }

 //对于这个方法中无法有效的阻止默认行为，因为在这个方法后页面就不存在了，应该在onbeforeunload之前处理关闭的逻辑
 window.onunload = f3

  function f3() {
console.log("开始卸载")
  }


对于这个方法能够监听浏览器窗口的大小，可以让你能够根据浏览器窗口的大小动态的调整你的当前页面中元素的大小
window.onresize = function (ev) {
  console.log(ev)
  box.style.width = w() * 0.8 + "px"
  box.style.height = w() * 0.8 + "px"
}

function w() {
  if (window.innerWidth) {  //兼容dom的形式
    return window.innerWidth
  } else if (window.body && window.body.clientWidth) {
    return window.body.clientWidth
  }
}

function h() {
  if (window.innerHeight) {
    return window.innerHeight
  } else if (window.body && window.body.clientHeight) {
    return window.body.clientHeight
  }
}

错误的处理
window.onerror = function(message){         // 捕获浏览器错误行为
   alert("错误原因：" + arguments[0]+
   "\n错误URL: " +  arguments[1] +
   "\n错误行号: " + arguments[2]
);
  return true;                             // 禁止浏览器显示标准出错信息
}

2.焦点的获取和失去

//如果是隐藏字段，<input type="hidden"> 或者是使用css的display和visibility隐藏字段显示，设置获取焦点就会引发异常。
element.onfocus=function(){}

element.blur=function(){}

3.获取鼠标选择的文本

<body>
<input type="text" id="a" value="请随意选择字符串" />
<input type="text" id="b" />
<script>
var a = document.getElementsByTagName("input")[0];
// 获取第一个文本框的引用指针
var b = document.getElementsByTagName("input")[1];
// 获取第二个文本框的引用指针
a.onselect = function(){        // 为第一个文本框绑定select事件处理函数
if (document.selection){     // 兼容IE
    o = document.selection.createRange();    // 创建一个选择区域
    if(o.text.length > 0)     // 如果选择区域内存在文本
    b.value = o.text;         // 则把该区域内的文本赋值给第二个文本框
}else{                        // 兼容DOM
    p1 = a.selectionStart;     // 获取文本框中选择的初始位置
    p2 = a.selectionEnd;     // 获取文本框中选择的结束位置
    b.value = a.value.substring(p1, p2);
    // 截取文本框中被选取的文本字符串，然后赋值给第二个文本框
}
}
</script>
</body>

4.对于元素节点的监听使用element.onchange方法

<body>
<input type="text" id="a" />
<input type="text" id="b" />
<script>
var a = document.getElementsByTagName("input")[0];
var b = document.getElementsByTagName("input")[1];
a.onchange = function(){        // 为第一个文本框绑定change事件处理函数
   b.value = this.value;         // 把第一个文本框中的值传递给第二个文本框
}

4.点击提交按钮的监听，这时候点击这个input提交按钮或者是text的input获取焦点时回车，都会触发onsubmit方法

<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
<input name="" type="submit" />
</form>
<script>
var t = document.getElementsByTagName("input")[0];
    // 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0];
// 获取表单的引用指针
f.onsubmit = function(e){             // 在表单元素上注册submit事件处理函数
alert(t.value);
return false;                     // 禁止提交数据到服务器
}
</script>
</body>

5.重置表单设置onreset监听

<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
<input name="" type="reset" />
</form>
<script>
var t = document.getElementsByTagName("input")[0];
// 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0];
// 获取表单的引用指针
f.onreset = function(e){             // 在表单元素上注册reset事件处理函数
alert(t.value);
}
</script>
</body>

6.设计Dialog,注意创建对象，并且在对象的原型链上添加方法，这样就需要调用对象的实例进行调用方法

<script type="text/javascript">
function Dialog(id){
//将di绑定到当前实例上。但是直接使用this指代当前对象，是不可以的
this.id=id;
var that=this;
document.getElementById(id).children[0].onclick=function(){
    that.close();
}
}
Dialog.prototype.show=function(){
var dlg=document.getElementById(this.id);
dlg.style.display='block';
dlg=null;
}
Dialog.prototype.close=function(){
//利用当前实例的id，获取到对象，然后设置属性
var dlg=document.getElementById(this.id);
dlg.style.display='none';
dlg=null;
}
function openDialog(){
document.getElementById('pageCover').style.display='block';
//要创建Dialog的对象，然后调用在原型链上的方法
var dlg=new Dialog('dlgTest');
//方法在原型链上
dlg.show();
}

7.自定义事件

<body>
<div id="pageCover" class="pageCover"></div>
<input type="button" value="打开对话框" onclick="openDialog();"/>
<div id="dlgTest" class="dialog"><span class="close">&times;</span>
<div class="title">对话框标题栏</div>
<div class="content">对话框内容框</div>
</div>
<script type="text/javascript">

function Dialog(id){
this.id=id;
this.close_handler=null;
var that=this;
//在这里进行设置监听，当点击的时候，如果close_handler被赋值，就调用这个方法
//document.getElementById(id).children[0]  就是这个关闭的span标签
document.getElementById(id).children[0].onclick=function(){
    that.close();
       console.log("that.close_handler==="+that.close_handler)
    if(typeof that.close_handler=='function'){
        that.close_handler();
    }
}
}
Dialog.prototype.show=function(){
var dlg=document.getElementById(this.id);
dlg.style.display='block';
dlg=null;
}
Dialog.prototype.close=function(){
var dlg=document.getElementById(this.id);
dlg.style.display='none';
dlg=null;
}
function openDialog(){
document.getElementById('pageCover').style.display='block';    
var dlg=new Dialog('dlgTest');
dlg.show();
//在这里将Dialog的close_handler的属性赋值
dlg.close_handler=function(){
    document.getElementById('pageCover').style.display='none';
}
}
</script>
</body>

猜你喜欢